CIS565-Fall-2018 · ACskyline · Oct 26, 2018 · Oct 26, 2018 · Oct 26, 2018 · Oct 26, 2018
diff --git a/README.md b/README.md
@@ -3,26 +3,153 @@ 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)
+* Xiao Zhang
+  * [LinkedIn](https://www.linkedin.com/in/xiao-zhang-674bb8148/)
+* Tested on: Windows 10, i7-7700K @ 4.20GHz 16.0GB, GTX 1080 15.96GB (my own PC)
 
-### Live Online
+Overview 
+======================
+
+![](img/0.gif)
+
+Analysis 
+======================
+* MAX_LIGHTS_PER_CLUSTER is NUM_LIGHTS.
+
+* Rendering time is measured in millisecond, so lower is better.
+
+* Cluster size is (15, 15, 15).
+
+---
+
+## 1. Naive binning method
+
+### overview
+
+![](img/2.JPG)
+
+### analysis
+
+The naive binning method iterates through all the lights. For each light, the method iterate through all sub-frustums in the view frustum and check whether the light is within the boundaries of each sub-frustum. This is an expensive algorithm so the result is not good enough.
+
+---
+
+## 2. Early rejection binning method
+
+### overview
+
+![](img/3.JPG)
+
+### analysis
+
+The early rejection binning method also iterates through all the lights. For each light, the method iterate through all sub-frustums in the view frustum and check whether the light is within the boundaries of each sub-frustum. But only this time, when it iterates through all the sub-frustums, it will first check whether the light is within the boundary of the sub-frustums along the current axis. If it is not, then there is no point in going through all the sub-frustums within that boundary.
+
+---
+
+## 3. Ad-hoc binning method
+
+### overview
+
+![](img/3a.JPG)
+
+### analysis
+
+The ad-hoc binning method also iterates through all the lights. However, for each light, the method will calculate a boundary based on the AABB of the light and bin the light into all the sub-frustums within that boundary. This method will save all the plane-sphere intersection calculation but it will also intruduce false positive results. Besides, the method will not work if fov of the camera is too large. The reason can be explained by the following picture. 
+
+![](img/3b.png)
+
+When the fov is too large, the maximum and minimum positions along x and y axes do not represent the maximum and minimum sub-frustums. One possible fix is to move the center to the front face of the AABB and calculate the covered sub-frustums using the z value there. But this will produce even more false positive results.
+
+---
+
+## 4. Clustered forward rendering
+
+### overview
+
+![](img/4.JPG)
+
+### analysis
+
+According to the chart, clustered forward rendering benefits from ad-hoc binning method. 
+
+---
+
+## 5. Clustered deferred rendering
+
+### overview
+
+![](img/5.JPG)
+
+### analysis
+
+According to the chart, clustered deferred rendering benefits more from ad-hoc binning method than clustered forward rendering or we can say clustered forward rendering suffers more from ad-hoc binning method than clustered deferred rendering. This might be because ad-hoc binning introduced false-positive results, which means there are more lights in a cluster than it should be. And deferred rendering perfroms better when the light calculation is massive. In conclusion, On CPU side, both rendering method benefits the same from ad-hoc binning but on GPU side, clustered forward suffers more than clustered deferred. 
+
+---
+
+## 6. GPU binning clustered forward renderer
+
+### overview
+
+|   rendered image   |   cluster texture   |
+|:------------------:|:-------------------:|
+|![](img/abcde1.gif) |![](img/abcde2.gif)  |
+
+### analysis
+
+Using GPU to bin the lights is the ultimate solution to increase fps. However, webgl currently does not support compute shader. To bin the lights, we have to draw a full screen quad and convert fragment coordinates to cluster index and loop through 4 lights in each fragment shader. 
+
+Ideally, we want to store only the lights that's in the cluster and a total number of them so that we can loop through only these lights in the subsequent pass. But because we don't have compute shader, we also don't have atomic operations. This makes the above storage scheme impossible. We have to store a bool value for each and every light in the scene for each cluster to indicate whether the particular light is in the particular cluster or not. This can be illustrated in the following picture.
+
+![](img/x.JPG)
+
+
+This means in the subsequent pass, we can not get the total light count and can not only iterate through a small amount of lights. We have to check for each light in the scene whether they are in the cluster or not. And this is an expensive operation. In fact, compared with the un-clustered forward renderer, this makes no improvement at all. The rendering time of the GPU binning clustered forward renderer is not faster than the un-clustered forward renderer.
+
+### images
+
+* very near distance
+
+| rendered image | cluster texture |
+|:--------------:|:---------------:|
+|![](img/a1.JPG) |![](img/a2.JPG)  |
+
+* near distance
+
+| rendered image | cluster texture |
+|:--------------:|:---------------:|
+|![](img/b1.JPG) |![](img/b2.JPG)  |
+
+* mid distance
+
+| rendered image | cluster texture |
+|:--------------:|:---------------:|
+|![](img/c1.JPG) |![](img/c2.JPG)  |
+
+* far distance
+
+| rendered image | cluster texture |
+|:--------------:|:---------------:|
+|![](img/d1.JPG) |![](img/d2.JPG)  |
+
+* very far distance
+
+| rendered image | cluster texture |
+|:--------------:|:---------------:|
+|![](img/e1.JPG) |![](img/e2.JPG)  |
 
-[![](img/thumb.png)](http://TODO.github.io/Project5B-WebGL-Deferred-Shading)
+---
 
-### Demo Video/GIF
+## 7. Other stuff
 
-[![](img/video.png)](TODO)
+![](img/1.JPG)
 
-### (TODO: Your README)
+* Deferred Blinn-Phong shading.
 
-*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.
+* 2 G-buffers.
 
-This assignment has a considerable amount of performance analysis compared
-to implementation work. Complete the implementation early to leave time!
+* 2-component normals.
 
+---
 
 ### Credits
 

diff --git a/img/0.gif b/img/0.gif
diff --git a/img/1.JPG b/img/1.JPG
diff --git a/img/2.JPG b/img/2.JPG
diff --git a/img/3.JPG b/img/3.JPG
diff --git a/img/3a.JPG b/img/3a.JPG
diff --git a/img/3b.png b/img/3b.png
diff --git a/img/4.JPG b/img/4.JPG
diff --git a/img/5.JPG b/img/5.JPG
diff --git a/img/a1.JPG b/img/a1.JPG
diff --git a/img/a2.JPG b/img/a2.JPG
diff --git a/img/abcde1.gif b/img/abcde1.gif
diff --git a/img/abcde2.gif b/img/abcde2.gif
diff --git a/img/b1.JPG b/img/b1.JPG
diff --git a/img/b2.JPG b/img/b2.JPG
diff --git a/img/c1.JPG b/img/c1.JPG
diff --git a/img/c2.JPG b/img/c2.JPG
diff --git a/img/d1.JPG b/img/d1.JPG
diff --git a/img/d2.JPG b/img/d2.JPG
diff --git a/img/e1.JPG b/img/e1.JPG
diff --git a/img/e2.JPG b/img/e2.JPG
diff --git a/img/x.JPG b/img/x.JPG