CIS5650-Fall-2025 · rubenaryo · Oct 10, 2025 · Oct 15, 2025 · Oct 15, 2025 · Oct 15, 2025
diff --git a/README.md b/README.md
@@ -1,27 +1,68 @@
 WebGL Forward+ and Clustered Deferred Shading
 ======================
 
+* Ruben Young
+* Tested on: **Google Chrome 143.0.7479.0 (Official Build) canary (64-bit)** on
+  Windows 11 Version 24H2, AMD Ryzen 7 7800X3D, RTX 4080 SUPER
+
 **University of Pennsylvania, CIS 565: GPU Programming and Architecture, Project 4**
 
-* (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)
+## Description
+This WebGPU-based application is built to demonstrate the large performance difference between forward (naive), forward+, and clustered-lights deferred rendering using the CryTek Sponza demo scene.
 
 ### Live Demo
 
-[![](img/thumb.png)](http://TODO.github.io/Project4-WebGPU-Forward-Plus-and-Clustered-Deferred)
+[Live Demo](http://rubenaryo.github.io/Project4-WebGPU-Forward-Plus-and-Clustered-Deferred)
+
+![](img/sponza_4k_2048.png)
+
+### Forward+
+Forward+ builds on the traditional rendering pipeline by introducing tiled (or clustered) light culling. 
+
+Forward+ divides the scene according to view-space frusta, with each frustum maintaining a list of lights that affect it. At shading time, we now only have to calculate the contributions of the lights in our local frustum. This produces markedly better results than having to iterate over every light in the scene.
+
+This application further divides each frustum along the view-space Z-direction into clusters with log-depth widths. Because of this, we achieve higher resolution at points closer to the camera where detail matters more due to perspective projection. 
+
+| ![](img/clustered.png) | 
+|:--:| 
+| Example of tiled space partitioning |
+
+### Deferred Rendering
+We also demonstrate how we can further optimize the scene by using deferred rendering. By separating the render pass into a g-buffer and a shading pass, we can reduce the waste of shading expensive fragments that will be drawn over later by instead only shading those that will be visible. 
+
+This is especially potent for this demo due to the high number of lights making the shading of each fragment much more expensive.
+
+Resulting textures from the g-buffer pass:
+| ![](img/albedo_gbuffer.png) | ![](img/normal_gbuffer.png) | ![](img/position_gbuffer.png) | 
+|:--:|:--:|:--:| 
+|Albedo|Normal|World-space position
+
+### Examples
+
+| ![](img/sponza_naive_2048.gif) | ![](img/sponza_deferred_2048.gif) | ![](img/sponza_deferred_5096.gif) | 
+|:--:|:--:|:--:| 
+|Naive (2048 Lights): 10FPS|Clustered Deferred (2048 Lights): 100FPS|Clustered Deferred (4096 Lights): 240FPS|
+
+## Performance
+
+### By Light Count
+Predictably, deferred shading has very good performance as the number of lights increases. Each new light adds further computation required per-fragment, so the reduction of wasted fragments gained from deferred shading is significant.
+
+However, we can see that deferred begins to approach forward+ at very high light counts. This is because each cluster has a hard cap on the number of lights it can contain (1024), so at very high lights we see maxed out clusters, yet lose on the performance overhead of the additional g-buffer pass.
 
-### Demo Video/GIF
+| ![](img/fpschart.png) | 
+|:--:| 
+| Note: FPS Cap is 240 due to VSync|
 
-[![](img/video.mp4)](TODO)
+### By Tile Count
+Looking at the performance by tile count, we can see that there is a performance boost from further dividing the screen in XY, but we see diminishing returns at higher tile counts and hit a hard buffer size limit at 36 x 37.
 
-### (TODO: Your README)
+| ![](img/dimchart.png) | 
+|:--:| 
+| Any performance gains for Forward+ disappear after about 16x9 |
 
-*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!
+### 
 
 ### Credits
 

diff --git a/img/albedo_gbuffer.png b/img/albedo_gbuffer.png
diff --git a/img/clustered.png b/img/clustered.png
diff --git a/img/dimchart.png b/img/dimchart.png
diff --git a/img/fpschart.png b/img/fpschart.png
diff --git a/img/normal_gbuffer.png b/img/normal_gbuffer.png
diff --git a/img/position_gbuffer.png b/img/position_gbuffer.png
diff --git a/img/sponza_4k_2048.png b/img/sponza_4k_2048.png
diff --git a/img/sponza_deferred_2048.gif b/img/sponza_deferred_2048.gif
diff --git a/img/sponza_deferred_2048.mp4 b/img/sponza_deferred_2048.mp4
diff --git a/img/sponza_deferred_5096.gif b/img/sponza_deferred_5096.gif
diff --git a/img/sponza_deferred_5096.mp4 b/img/sponza_deferred_5096.mp4
diff --git a/img/sponza_naive_2048.gif b/img/sponza_naive_2048.gif
diff --git a/img/sponza_naive_2048.mp4 b/img/sponza_naive_2048.mp4
diff --git a/src/main.ts b/src/main.ts
@@ -50,7 +50,7 @@ function setRenderer(mode: string) {
 }
 
 const renderModes = { naive: 'naive', forwardPlus: 'forward+', clusteredDeferred: 'clustered deferred' };
-let renderModeController = gui.add({ mode: renderModes.naive }, 'mode', renderModes);
+let renderModeController = gui.add({ mode: renderModes.clusteredDeferred }, 'mode', renderModes);
 renderModeController.onChange(setRenderer);
 
 setRenderer(renderModeController.getValue());