Project 5: Hanming Zhang

README.md

@@ -3,29 +3,123 @@ WebGL Clustered Deferred and Forward+ Shading
 
 **University of Pennsylvania, CIS 565: GPU Programming and Architecture, Project 5**
 
-* (TODO) YOUR NAME HERE
-* Tested on: (TODO) **Google Chrome 222.2** on
-  Windows 22, i7-2222 @ 2.22GHz 22GB, GTX 222 222MB (Moore 2222 Lab)
+* Hanming Zhang
+* Tested on: **Google Chrome 62.0** on
+  Windows 10 Education, i7-3630QM @ 2.40GHz, 16GB, GTX 670MX 3072MB (Personal laptop)
 
 ### Live Online
 
-[![](img/thumb.png)](http://TODO.github.io/Project5B-WebGL-Deferred-Shading)
+This project requires a WebGL-capable browser with support for several extensions(listed below). You can check for support on [WebGL Report](http://webglreport.com/):
+- OES_texture_float
+- OES_texture_float_linear
+- OES_element_index_uint
+- EXT_frag_depth
+- WEBGL_depth_texture
+- WEBGL_draw_buffer
 
-### Demo Video/GIF
+[Live Demo Link](https://HanmingZhang.github.io/Project5-WebGL-Clustered-Deferred-Forward-Plus/)
 
-[![](img/video.png)](TODO)
+[![](img/screenshot.jpg)](https://HanmingZhang.github.io/Project5-WebGL-Clustered-Deferred-Forward-Plus/)
 
-### (TODO: Your README)
+### Demo Video
 
-*DO NOT* leave the README to the last minute! It is a crucial part of the
-project, and we will not be able to grade you without a good README.
+[![](img/videoCover.jpg)](https://www.youtube.com/watch?v=JL3-XckKPKk)
 
-This assignment has a considerable amount of performance analysis compared
-to implementation work. Complete the implementation early to leave time!
 
+Project Features
+================
+
+### Screenshots:
+![](img/screenshot.jpg) |  ![](img/screenshot_bloom.jpg)
+------------ | -------------
+no post processing | bloom
+![](img/screenshot_rampShading.jpg) |  ![](img/screenshot_bloom+rampShading.jpg)
+ramp shading | bloom + ramping shading
+
+
+### Clustered Forward+
+  - cluster 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 Deferred
+  - cluster part are the same as Clustered Forward+
+  - Store vertex attributes in g-buffer
+  - Read g-buffer in a shader to produce final output
+  - Two g-buffers are used(reconstruct norm using two-component normal and reconstruct position using screen space X, Y, and depth information)
+
+### Effects
+- Bloom (additional pipeline stages include brightness filter, horizontal & vertical Gaussian blur and finally combine)
+- Ramp shading
+
+### Controls :
+ - Left mouse button to rotate Camera
+ - Right mouse button to move Camera
+ - Middle mouse button to zoom in/out
+
+
+### Project Analysis
+#### All analysis happens on a 1024x768 canvas and 500 lights are in our sponza scene.
+
+- #### Clustered Deferred Optimization
+
+Before optimization, 4 g-buffers are used, which are albedo, normal, depth and position respectively and they are shown like below.
+
+![](img/color_albedo.jpg) |  ![](img/normal.jpg)
+------------ | -------------
+color / albedo | normal
+![](img/depth.jpg) |  ![](img/position.jpg)
+depth | position
+
+  After optimization, 2 g-buffers are used, which are albedo, view space depth(to determine fragment cluster depth index, because I slice clusters in view space), two component normal(X, Y) and NDC depth(to reconstruct position with screen space position). The structure is shown as below.
+
+   ![](img/gbuffer.jpg)
+
+   ##### Performance Comparison
+
+   ![](img/gbuffer_chart.jpg)
+
+   ##### Analysis:
+   As we can see, when the size of g-buffers reduces from 4 to 2, we have around 16% performance increase. During the process of rendering, we only need to write information to 2 frames buffers, and also only need to extract information from these 2 buffers. The bandwidth burden is reduced.
+
+
+
+- #### Forward, Clustered Forward and Clustered Deferred Comparison
+
+  ![](img/comparsion_chart1.jpg)
+
+  ##### Analysis:
+  Since forward will check every light in the scene in the fragment shader, so naturally, it takes the most time. Clusters works well, and we gain huge performance increase by using it, although on the CPU side, we need to loop through every light and assign their index to the influenced clusters.
+
+  About cluster slice method I use (all slices happens on the view space):
+  1. slice view space depth(between near and far clips) in a natural logarithm way, which means cluster size will smaller(in depth) when it's near and larger when it's far.
+  2. evenly slice view frustum in X and Y directly (which means evenly slice our screen)
+  finally, our view frustum should looks like this,
+  ![](img/viewfrustum.jpg)
+
+  As a result, we only shade limited amount of lights, which influences the cluster each fragment belongs to in fragment shader. This saves a lot of rendering time.
+  In terms of clustered deferred shading, since we only save visible(nearer to camera and not occluded) fragments' information(color, normal, depth) to g-buffers, we save the time to render those not visible fragments.
+
+
+
+- #### Bloom & ramp shading performance analysis
+
+ ![](img/comparsion_chart2.jpg)
+
+  ##### Analysis:
+  Basically, Bloom post processing effect take additional stages to do brightness filter, horizontal Gaussian blur, vertical Gaussian blur and finally combine it with origin no effect frame. But in our case, it does not take so long time to do all these things, since all these actions are very basic, and just reading and writing frame buffers again and again. Several results during these stages are shown below.
+
+![](img/bloom_brightnessFilter.jpg) |  ![](img/bloom_brightnessFilter_horizontalBlur.jpg) | ![](img/bloom_brightnessFilter_horizontalBlur+verticalBlur.jpg)
+------------ | ------------- | -------------
+after brightness filter | after horizontal Gaussian Blur | after vertical Gaussian Blur  
+
+
+  Ramp shading is almost the same as no effect rendering in terms of performance, and we only do several extra steps to modulate the diffuse coefficient(lambert term) in fragment shader.
 
 ### Credits
 
+* [OpenGL Bloom Tutorial](http://prideout.net/archive/bloom/index.php) by Philip Rideout
+* [OpenGL Bloom Effects](https://www.youtube.com/watch?v=LyoSSoYyfVU) by ThinMatrix
+* Clustered Deferred and Forward Shading, Olsson et.al. 2012
 * [Three.js](https://github.com/mrdoob/three.js) by [@mrdoob](https://github.com/mrdoob) and contributors
 * [stats.js](https://github.com/mrdoob/stats.js) by [@mrdoob](https://github.com/mrdoob) and contributors
 * [webgl-debug](https://github.com/KhronosGroup/WebGLDeveloperTools) by Khronos Group Inc.

models/sponza/npm-debug.log

@@ -0,0 +1,47 @@
+0 info it worked if it ends with ok
+1 verbose cli [ 'D:\\nodejs\\node.exe',
+1 verbose cli   'D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
+1 verbose cli   'start' ]
+2 info using npm@3.10.10
+3 info using node@v6.10.0
+4 verbose run-script [ 'prestart', 'start', 'poststart' ]
+5 info lifecycle @~prestart: @
+6 silly lifecycle @~prestart: no script for prestart, continuing
+7 info lifecycle @~start: @
+8 verbose lifecycle @~start: unsafe-perm in lifecycle true
+9 verbose lifecycle @~start: PATH: D:\nodejs\node_modules\npm\bin\node-gyp-bin;D:\GPU_Projects\Project5-WebGL-Clustered-Deferred-Forward-Plus\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v8.0\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v8.0\libnvvp;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\PharosSystems\Core;C:\Users\HM\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;D:\QuickTime\QTSystem\;D:\nodejs\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\GtkSharp\2.12\bin;D:\CMake\bin;C:\Program Files\Git\cmd;%USERPROFILE%\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files\SourceGear\Common\DiffMerge\;C:\Users\HM\AppData\Local\Microsoft\WindowsApps;C:\Users\HM\AppData\Roaming\npm
+10 verbose lifecycle @~start: CWD: D:\GPU_Projects\Project5-WebGL-Clustered-Deferred-Forward-Plus
+11 silly lifecycle @~start: Args: [ '/d /s /c', 'webpack-dev-server' ]
+12 silly lifecycle @~start: Returned: code: 3221225786  signal: null
+13 info lifecycle @~start: Failed to exec start script
+14 verbose stack Error: @ start: `webpack-dev-server`
+14 verbose stack Exit status 3221225786
+14 verbose stack     at EventEmitter.<anonymous> (D:\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at EventEmitter.emit (events.js:191:7)
+14 verbose stack     at ChildProcess.<anonymous> (D:\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at ChildProcess.emit (events.js:191:7)
+14 verbose stack     at maybeClose (internal/child_process.js:877:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
+15 verbose pkgid @
+16 verbose cwd D:\GPU_Projects\Project5-WebGL-Clustered-Deferred-Forward-Plus\models\sponza
+17 error Windows_NT 10.0.14393
+18 error argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
+19 error node v6.10.0
+20 error npm  v3.10.10
+21 error code ELIFECYCLE
+22 error @ start: `webpack-dev-server`
+22 error Exit status 3221225786
+23 error Failed at the @ start script 'webpack-dev-server'.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the  package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     webpack-dev-server
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]

npm-debug.log

@@ -0,0 +1,47 @@
+0 info it worked if it ends with ok
+1 verbose cli [ 'D:\\nodejs\\node.exe',
+1 verbose cli   'D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
+1 verbose cli   'start' ]
+2 info using npm@3.10.10
+3 info using node@v6.10.0
+4 verbose run-script [ 'prestart', 'start', 'poststart' ]
+5 info lifecycle @~prestart: @
+6 silly lifecycle @~prestart: no script for prestart, continuing
+7 info lifecycle @~start: @
+8 verbose lifecycle @~start: unsafe-perm in lifecycle true
+9 verbose lifecycle @~start: PATH: D:\nodejs\node_modules\npm\bin\node-gyp-bin;D:\GPU_Projects\Project5-WebGL-Clustered-Deferred-Forward-Plus\node_modules\.bin;C:\ProgramData\Oracle\Java\javapath;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v8.0\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v8.0\libnvvp;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\PharosSystems\Core;C:\Users\HM\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;D:\QuickTime\QTSystem\;D:\nodejs\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files (x86)\GtkSharp\2.12\bin;D:\CMake\bin;C:\Program Files\Git\cmd;C:\Windows\system32\config\systemprofile\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files\SourceGear\Common\DiffMerge\;C:\Users\HM\AppData\Local\Microsoft\WindowsApps;C:\Users\HM\AppData\Roaming\npm;C:\Users\HM\AppData\Local\atom\bin
+10 verbose lifecycle @~start: CWD: D:\GPU_Projects\Project5-WebGL-Clustered-Deferred-Forward-Plus
+11 silly lifecycle @~start: Args: [ '/d /s /c', 'webpack-dev-server' ]
+12 silly lifecycle @~start: Returned: code: 3221225786  signal: null
+13 info lifecycle @~start: Failed to exec start script
+14 verbose stack Error: @ start: `webpack-dev-server`
+14 verbose stack Exit status 3221225786
+14 verbose stack     at EventEmitter.<anonymous> (D:\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at EventEmitter.emit (events.js:191:7)
+14 verbose stack     at ChildProcess.<anonymous> (D:\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at ChildProcess.emit (events.js:191:7)
+14 verbose stack     at maybeClose (internal/child_process.js:877:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
+15 verbose pkgid @
+16 verbose cwd D:\GPU_Projects\Project5-WebGL-Clustered-Deferred-Forward-Plus
+17 error Windows_NT 10.0.14393
+18 error argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
+19 error node v6.10.0
+20 error npm  v3.10.10
+21 error code ELIFECYCLE
+22 error @ start: `webpack-dev-server`
+22 error Exit status 3221225786
+23 error Failed at the @ start script 'webpack-dev-server'.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the  package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     webpack-dev-server
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]

src/init.js

@@ -1,5 +1,5 @@
 // TODO: Change this to enable / disable debug mode
-export const DEBUG = true && process.env.NODE_ENV === 'development';
+export const DEBUG = false && process.env.NODE_ENV === 'development';
 
 import DAT from 'dat-gui';
 import WebGLDebug from 'webgl-debug';

src/main.js

@@ -11,26 +11,59 @@ const CLUSTERED_DEFFERED = 'Clustered Deferred';
 const params = {
   renderer: CLUSTERED_FORWARD_PLUS,
   _renderer: null,
+  Bloom: false,
+  ToonShading: false,
 };
 
 setRenderer(params.renderer);
 
 function setRenderer(renderer) {
   switch(renderer) {
     case FORWARD:
-      params._renderer = new ForwardRenderer();
+      params._renderer = new ForwardRenderer(params.Bloom, params.ToonShading);
       break;
     case CLUSTERED_FORWARD_PLUS:
-      params._renderer = new ClusteredForwardPlusRenderer(15, 15, 15);
+      params._renderer = new ClusteredForwardPlusRenderer(15, 15, 15, params.Bloom, params.ToonShading);
       break;
     case CLUSTERED_DEFFERED:
-      params._renderer = new ClusteredDeferredRenderer(15, 15, 15);
+      params._renderer = new ClusteredDeferredRenderer(15, 15, 15, params.Bloom, params.ToonShading);
+      break;
+  }
+}
+
+function setBloom(){
+  switch(params.renderer) {
+    case FORWARD:
+      params._renderer = new ForwardRenderer(params.Bloom, params.ToonShading);
+      break;
+    case CLUSTERED_FORWARD_PLUS:
+      params._renderer = new ClusteredForwardPlusRenderer(15, 15, 15, params.Bloom, params.ToonShading);
+      break;
+    case CLUSTERED_DEFFERED:
+      params._renderer = new ClusteredDeferredRenderer(15, 15, 15, params.Bloom, params.ToonShading);
+      break;
+  }
+}
+
+function setToonShading(){
+  switch(params.renderer) {
+    case FORWARD:
+      params._renderer = new ForwardRenderer(params.Bloom, params.ToonShading);
+      break;
+    case CLUSTERED_FORWARD_PLUS:
+      params._renderer = new ClusteredForwardPlusRenderer(15, 15, 15, params.Bloom, params.ToonShading);
+      break;
+    case CLUSTERED_DEFFERED:
+      params._renderer = new ClusteredDeferredRenderer(15, 15, 15, params.Bloom, params.ToonShading);
       break;
   }
 }
 
 gui.add(params, 'renderer', [FORWARD, CLUSTERED_FORWARD_PLUS, CLUSTERED_DEFFERED]).onChange(setRenderer);
 
+gui.add(params, 'Bloom').onChange(setBloom);
+gui.add(params, 'ToonShading').onChange(setToonShading);
+
 const scene = new Scene();
 scene.loadGLTF('models/sponza/sponza.gltf');
 
@@ -43,4 +76,4 @@ function render() {
   params._renderer.render(camera, scene);
 }
 
-makeRenderLoop(render)();
+makeRenderLoop(render)();