CIS565-Fall-2020 · lindayukeyi · Oct 30, 2020 · Oct 31, 2020 · Oct 31, 2020 · Oct 31, 2020
diff --git a/92834c4ad142a5899caf4fcbaed2cc2672a7e20a b/92834c4ad142a5899caf4fcbaed2cc2672a7e20a
@@ -0,0 +1,92 @@
+[33mcommit 68388017d3203cb9550402e8886607ed93829b46[m[33m ([m[1;36mHEAD -> [m[1;32mmaster[m[33m)[m
+Author: lindayukeyi <[email protected]>
+Date:   Fri Oct 30 21:14:40 2020 -0400
+
+    readme
+
+[33mcommit 9a43ab04b16382dbd0e7ed0cc7c403fd7b187919[m
+Author: lindayukeyi <[email protected]>
+Date:   Fri Oct 30 20:59:06 2020 -0400
+
+    readme
+
+[33mcommit 92834c4ad142a5899caf4fcbaed2cc2672a7e20a[m
+Author: lindayukeyi <[email protected]>
+Date:   Fri Oct 30 20:53:01 2020 -0400
+
+    readme
+
+[33mcommit 60ec8a9836cc8e71205bdb37af2f3c37b7f2ab06[m[33m ([m[1;31morigin/master[m[33m, [m[1;31morigin/HEAD[m[33m)[m
+Author: lindayukeyi <[email protected]>
+Date:   Fri Oct 30 14:37:47 2020 -0400
+
+    finish
+
+[33mcommit 1e22370c3457f2d4f79951bcf7bcd36585b05674[m
+Author: Kangning Li <[email protected]>
+Date:   Wed Oct 21 11:37:00 2020 -0400
+
+    clarify gh-pages instructions
+
+[33mcommit b4078bce43ee5d0da0840423b5150817c89aa3b7[m
+Author: Kangning Li <[email protected]>
+Date:   Wed Oct 21 11:19:12 2020 -0400
+
+    add wireframe class for visual debugging
+
+[33mcommit 135113b667520e0373c833b8a588f27271a981d8[m
+Author: Kangning Li <[email protected]>
+Date:   Tue Oct 20 20:22:38 2020 -0400
+
+    update some terminology, pin packages
+
+[33mcommit 22ed7d5ea573c698bc4345dbd2a8a39aa6e3e44a[m
+Author: Kangning Li <[email protected]>
+Date:   Tue Oct 20 17:11:28 2020 -0400
+
+    add Hannah Bollar's updates for fall 2019 npm webpacks
+
+[33mcommit 621051d440edd592d1f03f8403ec08c57eaf521f[m
+Author: Ottavio M. Hartman <[email protected]>
+Date:   Wed Oct 17 13:29:11 2018 -0400
+
+    Update Instructions
+
+[33mcommit 32ba1b6ed5b0bc8966dd54b5cf2f2500da0cc642[m
+Merge: e0e02e2 59445f2
+Author: Ottavio M. Hartman <[email protected]>
+Date:   Tue Oct 16 23:30:36 2018 -0400
+
+    Merge pull request #1 from CIS565-Fall-2018/update_2018
+
+    Update filenames, instructions, and variables with clearer language
+
+[33mcommit 59445f2bbcd5061355d824e0fe69c85c1db48a26[m
+Author: Ottavio Hartman <[email protected]>
+Date:   Tue Oct 16 23:25:25 2018 -0400
+
+    Update filenames, instructions, and variables with clearer language
+
+[33mcommit e0e02e20d7ea8a421e12274e67cd237de81737c8[m
+Author: Austin Eng <[email protected]>
+Date:   Thu Oct 19 15:38:08 2017 -0400
+
+    Update build system for production
+
+[33mcommit c5cdb49e83aed951e631da86d16e090aaf34e24a[m
+Author: Austin Eng <[email protected]>
+Date:   Thu Oct 19 12:38:09 2017 -0400
+
+    Add due date
+
+[33mcommit d7caa9574ffcb66d4dcf9839bacb7128522cdb03[m
+Author: Austin Eng <[email protected]>
+Date:   Thu Oct 19 12:32:48 2017 -0400
+
+    Add README.md
+
+[33mcommit 5476fb233088810bcbc983c5faa3ecf513df5d6d[m
+Author: Austin Eng <[email protected]>
+Date:   Thu Oct 19 12:29:08 2017 -0400
+
+    Initial base code
diff --git a/README.md b/README.md
@@ -3,25 +3,95 @@ WebGL Forward+ and Clustered Deferred 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)
+* Keyi Yu
+  * [LinkedIn](https://www.linkedin.com/in/keyi-linda-yu-8b1178137/)
+* Tested on: Windows 10, i7-10750H @ 2.60GHz 16GB, GeForce RTX 2070 with Max-Q 8228MB (My Machine)
 
 ### Live Online
 
-[![](img/thumb.png)](http://TODO.github.io/Project5-WebGL-Forward-Plus-and-Clustered-Deferred)
+[![](img/bf.png)](https://lindayukeyi.github.io/Project5-WebGL-Forward-Plus-and-Clustered-Deferred/)
 
 ### Demo Video/GIF
 
-[![](img/video.png)](TODO)
+![](img/demo2.gif)
 
-### (TODO: Your README)
+### Introduction
 
-*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.
+In this project, I implemented the foward+ and deferred shading. These two methods are optimized with the clustering method. In terms of the number of ligths in the scene, light radius and tile size, each method has its limitations. In addition, I implemented the Blinn-Phong and toon shading for interesting visulization. I also used 2-component normal to reduce the number of gbuffers.
+
+### Features
+**Clustered Rendering**
+
+The basic idea of clustering is deviding the frustum into x * y * z 3D clusters and assigning the lights to those clusters. In this way, we can easily get all the lights instead of iterating every lights in the fragment shader. One tricky thing here is to check the intersection of the clusters and point light. The clusters are the small frustums with different sizes.
+
+**Forward+ shading**
+
+In forward+ fragment shader, I have to invert the fragment coordinate to the indices of clusters. Then I get some information from the texture buffer like the number of lights in a cluster and their indices.
+
+**Deferred Shading**
+
+Deferred shading has two steps. The first step is to write position, color and normal information to a g-buffer. The second step is to find light in clustered texture and then do light shading.
+
+Albedo            |  Normal | Position
+:-------------------------:|:-------------------------:|:-------------------------:
+![](img/alb.png) | ![](img/nor.png) | ![](img/pos.png)
+
+**Blinn-phong**
+
+This is a common specular lighting model.
+```
+S = max(dot(H, N), shininess), 0) * specular color, where H = (V + L) / 2
+final color = ambient  + S
+```
+
+No Blinn-Phong            |  Blinn-Phong
+:-------------------------:|:-------------------------:
+![](img/nobf.png) | ![](img/bf.png)
+
+**Toon shading**
+
+I tried toon shading. It has two parts: ramp shading and edge detection. I use sobel filter to convolve depth to find the edge. If the current fragment is an edge, it will be colored line color, otherwise, it should be rendered a ramp color. I followed this [repo](https://github.com/mchamberlain/Cel-Shader) to ramp the color.
+
+![](img/toon.png)
+
+**2-component Normal**
+
+Instead of using an extra vec4 g-buffer to store the normal information. I pack the information like this
+```
+vec4 gb0 = vec4(position, normal.x);
+vec4 gb1 = vec4(col, normal.y)
+```
+Because the length of a normal is 1, I can extract the z value from x and y value by calulating the square root of (1 - x^2 - y^2). Bacause the value of color is always positive, I use the color information to represent the sign of z value. If the color value is negative, I will multiply the square root by -1.0.
+
+### Performance Analysis
+**Forward(F) vs Forward+(F+) vs Deferred Clustering(DC)**
+1. Number of lights
+
+In every test, the performance is the same: DC > F+ > F. As the number of lights increases, DC greatly outperforms the other two. In the first graph, DC and F
+\+ are not affected by the number of lights because the max number of lights in the cluster is a constant. In contrast, as shown in the second graph, if the max number of lights in a cluster changes along with the number of lights, DC and F+ will also be similarly impacted but they will increase at a slower rate.
+
+![](img/performance100.png)
+
+![](img/performance.png)
+
+2. Tiles
+
+Since large tiles can have more lights, each fragment will check more lights. Small tiles also have more memory usage since each has a light of indices for overlapping lights.
+
+![](img/tile.png)
+
+3. Light raduis
+
+F wins this time. F is not impacted by the radius of light but F+ and DC are greatly impacted. As the raduis increases, F+ and DC slows down. When the raduis is 20, F outperforms F+. The reason why they slow down is that each cluster will have more lights which means the fragment have to check more lights.
+
+![](img/lightradius.png)
+
+**2-Component normal**
+
+The optimized 2-component normal is slightly better than the 3-component one. Although we can save some memory space and data transfer time, it will cost some time to do the float-pointing computation. I just use a straightforward method to compute the z value from x and y using square root. So the result is a little bit blotchy. I could use a more complex encoding and decoding algorithm and I guesss this will cost more time.
+
+![](img/normal.png)
 
-This assignment has a considerable amount of performance analysis compared
-to implementation work. Complete the implementation early to leave time!
 
 
 ### Credits

diff --git a/img/alb.png b/img/alb.png
diff --git a/img/bf.png b/img/bf.png
diff --git a/img/blinphong.png b/img/blinphong.png
diff --git a/img/demo2.gif b/img/demo2.gif
diff --git a/img/lightradius.png b/img/lightradius.png
diff --git a/img/nobf.png b/img/nobf.png
diff --git a/img/nor.png b/img/nor.png
diff --git a/img/normal.png b/img/normal.png
diff --git a/img/performance.png b/img/performance.png
diff --git a/img/performance100.png b/img/performance100.png
diff --git a/img/pic.png b/img/pic.png
diff --git a/img/pos.png b/img/pos.png
diff --git a/img/tile.png b/img/tile.png
diff --git a/img/toon.png b/img/toon.png