update some terminology, pin packages

INSTRUCTION.md

@@ -1,7 +1,7 @@
-WebGL Clustered and Forward+ Shading - Instructions
+WebGL Forward+ and Clustered Deferred Shading - Instructions
 ==========================================================
 
-**This is due Thursday 10/26**
+**This is due Wednesday 10/28**
 
 ## Running the code
 
@@ -27,7 +27,7 @@ In this project, you are given code for:
 - Loading glTF models
 - Camera control
 - Simple forward renderer
-- Partial implementation and setup for Clustered and Forward+ shading
+- Partial implementation and setup for Forward+ and Deferred shading using 3D light clusters.
 - Many helpful helpers
 
 ## Required Tasks
@@ -38,7 +38,7 @@ In this project, you are given code for:
   - Build a data structure to keep track of how many lights are in each cluster and what their indices are
   - Render the scene using only the lights that overlap a given cluster
 
-**Clustered**
+**Clustered Deferred**
   - Reuse clustering logic from Forward+
   - Store vertex attributes in g-buffer
   - Read g-buffer in a shader to produce final output
@@ -63,7 +63,7 @@ In this project, you are given code for:
 
 ## Performance & Analysis
 
-Compare your implementations of Forward+ and Clustered shading and analyze their differences.
+Compare your implementations of Forward+ and Clustered Deferred shading and analyze their differences.
   - Is one of them faster?
   - Is one of them better at certain types of workloads?
   - What are the benefits and tradeoffs of using one over the other?
@@ -102,7 +102,7 @@ Initialization happens in `src/init.js`. You don't need to worry about this; it
 **Simple Forward Shading Pipeline**
 There is a simple forward shading pipeline as an example for how everything works. Check out `src/forward.js`.
 
-The constructor for the renderer initializes a `TextureBuffer` to store the lights. This isn't totally necessary for a forward renderer, but you'll need this to do clustered shading. What we're trying to do here is upload to a shader all the positions of our lights. However, we unfortunately can't upload arbitrary data to the GPU with WebGL so we have to pack it as a texture. This is set up for you.
+The constructor for the renderer initializes a `TextureBuffer` to store the lights. This isn't totally necessary for a forward renderer, but you'll need this to implement light clusters. What we're trying to do here is upload to a shader all the positions of our lights. However, we unfortunately can't upload arbitrary data to the GPU with WebGL so we have to pack it as a texture. This is set up for you.
 
 The constructor for `TextureBuffer` takes two arguments, the number of elements, and the size of each element (in floats). It will allocate a floating point texture of dimension `numElements x ceil(elementSize / 4)`. This is because we pack every 4 adjacent values into a single pixel.
 
@@ -125,7 +125,7 @@ Here's a few tips to get you started.
 
 3. Update `src/shaders/deferredToTexture.frag.glsl` to write desired data to the g-buffer
 4. Update `src/deferred.frag.glsl` to read values from the g-buffer and perform simple forward rendering. (Right now it just outputs the screen xy coordinate)
-5. Update it to use clustered shading. You should be able to reuse lots of stuff from Forward+ for this. You will also likely need to update shader inputs in `src/renderers/clustered.js`
+5. Update it to use clustered shading. You should be able to reuse lots of stuff from Forward+ for this. You will also likely need to update shader inputs in `src/renderers/clusteredDeferred.js`
 
 ## README
 

README.md

@@ -1,4 +1,4 @@
-WebGL Clustered and Forward+ Shading
+WebGL Forward+ and Clustered Deferred Shading
 ======================
 
 **University of Pennsylvania, CIS 565: GPU Programming and Architecture, Project 5**
@@ -9,7 +9,7 @@ WebGL Clustered and Forward+ Shading
 
 ### Live Online
 
-[![](img/thumb.png)](http://TODO.github.io/Project5B-WebGL-Deferred-Shading)
+[![](img/thumb.png)](http://TODO.github.io/Project5-WebGL-Forward-Plus-and-Clustered-Deferred)
 
 ### Demo Video/GIF
 

package.json

@@ -5,23 +5,22 @@
     "build": "webpack --env.production"
   },
   "dependencies": {
-    "dat.gui": "^0.7.3",
-    "gl-matrix": "^2.4.0",
-    "spectorjs": "^0.9.0",
-    "stats-js": "^1.0.0-alpha1",
-    "three": "^0.87.1",
-    "three-js": "^79.0.0",
-    "three-orbitcontrols": "^1.2.1",
-    "webgl-debug": "^1.0.2"
+    "dat.gui": "0.7.3",
+    "gl-matrix": "2.4.0",
+    "spectorjs": "0.9.0",
+    "stats-js": "1.0.0-alpha1",
+    "three": "0.87.1",
+    "three-js": "79.0.0",
+    "three-orbitcontrols": "1.2.1",
+    "webgl-debug": "1.0.2"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-minify-webpack-plugin": "^0.3.1",
-    "babel-preset-env": "^1.6.0",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.9.0",
-    "webpack-glsl-loader": "^1.0.1"
+    "babel-core": "6.26.0",
+    "babel-loader": "7.1.2",
+    "babel-minify-webpack-plugin": "0.2.0",
+    "babel-preset-env": "1.6.0",
+    "webpack": "3.7.1",
+    "webpack-dev-server": "2.9.2",
+    "webpack-glsl-loader": "1.0.1"
   }
 }

src/main.js

@@ -1,12 +1,12 @@
 import { makeRenderLoop, camera, cameraControls, gui, gl } from './init';
 import ForwardRenderer from './renderers/forward';
 import ForwardPlusRenderer from './renderers/forwardPlus';
-import ClusteredRenderer from './renderers/clustered';
+import ClusteredDeferredRenderer from './renderers/clusteredDeferred';
 import Scene from './scene';
 
 const FORWARD = 'Forward';
 const FORWARD_PLUS = 'Forward+';
-const CLUSTERED = 'Clustered';
+const CLUSTERED = 'Clustered Deferred';
 
 const params = {
   renderer: FORWARD_PLUS,
@@ -24,7 +24,7 @@ function setRenderer(renderer) {
       params._renderer = new ForwardPlusRenderer(15, 15, 15);
       break;
     case CLUSTERED:
-      params._renderer = new ClusteredRenderer(15, 15, 15);
+      params._renderer = new ClusteredDeferredRenderer(15, 15, 15);
       break;
   }
 }

src/renderers/clustered.js → src/renderers/clusteredDeferred.js

@@ -11,7 +11,7 @@ import BaseRenderer from './base';
 
 export const NUM_GBUFFERS = 4;
 
-export default class ClusteredRenderer extends BaseRenderer {
+export default class ClusteredDeferredRenderer extends BaseRenderer {
   constructor(xSlices, ySlices, zSlices) {
     super(xSlices, ySlices, zSlices);