Project5: Jie Meng

README.md

@@ -3,25 +3,156 @@ WebGL Clustered 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)
+* Jie Meng
+  * [LinkedIn](https://www.linkedin.com/in/jie-meng/), [YouTube](https://www.youtube.com/channel/UC7G8fUcQrrI_1YnXY5sQM6A).
+* Tested on: Windows 10, i7-7700HQ @ 2.80GHz, 16GB, GTX 1050 4GB (Personal Laptop)
 
-### Live Online
+## Live Online
 
-[![](img/thumb.png)](http://TODO.github.io/Project5B-WebGL-Deferred-Shading)
+`npm run build` keep showing errors, will be fixed soon
 
-### Demo Video/GIF
 
-[![](img/video.png)](TODO)
+## Demo Video
 
-### (TODO: Your README)
+[![](images/video.png)](https://www.youtube.com/watch?v=5GS9u3-nwkI&feature=youtu.be)
 
-*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.
 
-This assignment has a considerable amount of performance analysis compared
-to implementation work. Complete the implementation early to leave time!
+
+Project Doc
+==================
+
+## Heads up - screenshots
+
+Configuration: all running with 300 moving lights, *Toon Shading*
+
+
+![](images/Forward1.png)  | ![](images/ForwardP.png)
+--------------------------|----------------------------
+Forward render|   Forward+ render
+
+![](images/Forward2.png)  | ![](images/Clustered.png)
+--------------------------|----------------------------
+Forward render|   Cluster deferred render
+
+![](images/Forward2.png)  | ![](images/Clustered.png)
+--------------------------|----------------------------
+Forward render|   Cluster deferred render
+
+
+![](images/ForwardP.png)  | ![](images/bloom1.png)
+--------------------------|----------------------------
+Forward+ w/o bloom|   Forward+ w/ bloom
+
+
+## Pipelines
+
+Cluster technique is used in both Forward+ and Deferred shading pipelines for this project:
+
+### (Clustered) Forward+
+ - divide view frustum into clusters, compute which light is in whcih cluster
+ - in render stage, for each cluster only render the lights that influencing it
+
+### (Clustered) Deferred
+ - divide view frustum into clusters, compute which light is in whcih cluster
+ - packing vertex attributes like color and normal into g-buffers
+ - read g-buffers in fragment shader to perform shading stage
+
+## Optimization
+
+**Optimized G-buffer in Deferred shading**
+ - Originally, 4 g-buffers are needed
+ - After optimization, only 2 g-buffers are needed:
+ - g-buffer1:  RGB color & view space depth
+ - g-buffer2:  normal & NDC_Depth
+ - all other values can be reconstructed from these g-buffer values
+
+
+
+## Effects
+ - Toon shading
+
+![](images/Forward1.png)
+
+
+
+ - Bloom (buggy, currently screen has flash, but **kinda cool, isn't it?**) implemented by adding extra stages into pipeline: brightness fitler, gaussian blur and combine shader (same as bloom stages in [CUDA-Rasterizer](https://github.com/Ninjajie/Project4-CUDA-Rasterizer))
+
+![](images/bloom1.png)
+----------------------
+![](images/BLOOM.gif)
+
+
+Analysis
+=====================
+
+*Configuration: 1080p canvas, 300 lights sponza scene*
+
+## g-buffer optimization performances
+
+Naive implementation requires 4 g-buffers:
+
+|g-buffer index| Content |
+|------------|------------|
+|0 | albedo (RGB)|
+|1 | normal (XYZ)|
+|2 | depth (float)|
+|3 | position (XYZ)|
+
+The buffers are visualized as follows:
+
+#### Albedo
+
+![](images/albedo.gif)
+-------------------
+
+#### Normal
+
+![](images/normal.gif)
+-------------------
+
+#### Depth
+
+![](images/depth.gif)
+-------------------
+
+The optimization is aimed at storing only the very necessary data, and other data can be reconstructed from them.
+After optimization, only two g-buffers are needed, they are organized like this:
+
+|g-buffer index| Content xyz| Content w|
+|     -----   |    -----    |   ------  |
+|      0       | albedo (RGB) | View Space Depth|
+|      1       | normal (XYZ) | Screen Space Depth|
+
+
+#### Performance Comparison:
+
+![](images/gbuffers.png)
+
+Render time per frame noticably decrease with g-buffer optimization. The main reason
+for this is that the bandwidth is saved when only 2 g-buffers are used.
+
+
+## Different Pipelines Performance Comparison
+
+ - Forward pipeline is naive: check every light against each fragment in shading stage
+ - (Clustered) Forward+ pipeline is a smarter pipeline, with clustered frustrum, only check cluster with influencing lights, but limited by bandwidth
+ - (Clustered) Deferred pipeline is another pipeline using clusters, by optimizing g-buffer, it reduces the burden on bandwith
+ - Frustum divide is done by slicing z-direction in logarithmic way, and x-y-directions in linear way
+
+![](images/pipelines.png)
+
+As shown in the chart, clustered pipelines outperform naive forward renderer. Moreover, clustered deferred shading is slightly better than forward+ in this configuration.
+
+
+## Effects performances
+
+Bloom effect is currently buggy, so performance analysis is skipped.
+
+For toon shading, it's just normal Lambertian shading been discretized, so it shouldn't have impact on the performance:
+
+![](images/toon.png)
+
+The experiment results confirm our assumption.
 
 
 ### Credits