From 135113b667520e0373c833b8a588f27271a981d8 Mon Sep 17 00:00:00 2001 From: Kangning Li Date: Tue, 20 Oct 2020 20:22:38 -0400 Subject: [PATCH] update some terminology, pin packages --- INSTRUCTION.md | 14 ++++----- README.md | 4 +-- package.json | 31 +++++++++---------- src/main.js | 6 ++-- .../{clustered.js => clusteredDeferred.js} | 2 +- 5 files changed, 28 insertions(+), 29 deletions(-) rename src/renderers/{clustered.js => clusteredDeferred.js} (99%) mode change 100755 => 100644 diff --git a/INSTRUCTION.md b/INSTRUCTION.md index 583740e..2263805 100755 --- a/INSTRUCTION.md +++ b/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 diff --git a/README.md b/README.md index ec3c73b..94de884 100755 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 6d88d7d..172464b 100755 --- a/package.json +++ b/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" } } diff --git a/src/main.js b/src/main.js index 0438a6d..252156a 100755 --- a/src/main.js +++ b/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; } } diff --git a/src/renderers/clustered.js b/src/renderers/clusteredDeferred.js old mode 100755 new mode 100644 similarity index 99% rename from src/renderers/clustered.js rename to src/renderers/clusteredDeferred.js index 46b8278..f9ae494 --- a/src/renderers/clustered.js +++ b/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);