CIS565-Fall-2017 · AmanSachan1 · Oct 22, 2017 · Oct 22, 2017 · Oct 22, 2017 · Oct 23, 2017
diff --git a/README.md b/README.md
@@ -3,28 +3,119 @@ 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)
+* Aman Sachan
+* Tested on: Windows 10, Intel(R) Xeon(R) CPU E5-1630 v4 @ 3.7GHz (8 CPUs) 32GB RAM, 
+			GTX 1070 8081MB (Lab Machine)
 
-### Live Online
+## [Try it Live!](https://amansachan1.github.io/WebGL-Clustered-Deferred-Forward-Plus/)
 
-[![](img/thumb.png)](http://TODO.github.io/Project5B-WebGL-Deferred-Shading)
+## Demo Video
 
-### Demo Video/GIF
+[![](readmeImages/VideoLinkImage.png)](https://vimeo.com/240254058)
 
-[![](img/video.png)](TODO)
+#### _The demo above has about 300 dynamic lights. The Clustered Deferred Shading model implemented here can handle more than 2100 lights at 60 FPS but this over saturates the scene._
 
-### (TODO: Your README)
+## OverView
 
-*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 project implements Clustered Deferred and Clustered Forward Shading Techniques. These techniques improve performance for scenes with many dynamic lights. Typical forward shading involves looping over every object and then looping over every single light in the scene to accumulate the light energy on the object. If the number of lights is high, this can lead to a drastic drop in performance. We need to cull lights so that only those lights which actually contribute energy on a fragment are looped over. Clustering is a solution that bins lights into 3D buckets based on what the light can influence. Deferred shading is an improvement over this by only dealing with the fragments with the smallest z-depth, which is accomplished via a culling stage and using a "g-buffer".
 
-This assignment has a considerable amount of performance analysis compared
-to implementation work. Complete the implementation early to leave time!
+These solutions allow you to have an enormous number of dynamic lights in the scene when optimized. This project can run over 2100 lights at 60 FPS.
 
+## Features
 
-### Credits
+_A much more in depth explanation of the shading models and clustering can be found [here](http://amansachan.com/webpages/projects.html#Modal_ClusteredDeferredShading)._
+
+### Forward Shading Model
+
+![](readmeImages/NumLightsComparison.png)
+
+![](readmeImages/NumLights_table.png)
+
+A typical forward shading pipeline loops over every object and then inside that loops over all the lights in the scene to accumulate the light energy on the object. If the number of lights is high, this can lead to a drastic drop in performance.
+
+As seen in the charts above forward shading takes a massive hit in performance as you increase the number of dynamic lights in the scene. At around 2000 lights it doesnt even run.
+
+### Clustered Forward+ Shading Model
+
+Forward Plus is a shading technique that involves culling lights in some fashion and then binning them in either 2D tiles or as was done in this project 3D clusters. This means that there is overhead for light culling but the payoff during shading is enormous. Culling lights means every fragment looops through only a select few lights in relation to the entire scene instead of all the lights.
+
+The preformance can be many folds as the number of lights in the scene increase. About 17-18 times at 500 lights as compared to forward shading.
+
+The graphs show at a 1000 lights that forward plus is only about 5 times faster than forward shading. This is much better ofcourse but isn't as great as 17. This might be because of the cluster texture not fitting well into memory leading to many expensive calls to global memorry during shading. 
+
+### Clustered Deferred Shading Model
+
+Deferred shading is an improvement over forward plus shading. It has 2 render passes, the first one looping over fragments and creating a "g-buffer" that stores only the topmost fragment, ie the one with the smallest depth, and storing the data associated with it in a single or multiple buffers. This data can be whatever is required for shading such as positions, colors, normals, depth, specular, etc.
+
+Not having to loop over all the the fragments for a pixel and perform light accumulation on all the fragments leads to massive performance boosts even over forward plus. This boost is anywhere from 2 to 8 times more. The performance can be improved by using smaller and more data-coherent textures and so compact g-buffers.
+
+The performance of both clustered forward plus and deffered shading is heavily dependent upon the size of the cluster buffer which is based mainly on how many clusters and the maximum number of lights that can be stored in the cluster. Making this texture data coherent goes a long way towards making the shading technique run really fast. This however is hard to know intuitively and was more of a guessing process. 
+
+### Clustering
+
+Clustering is the binning technique used to store lights in a spatial data structure based on their area of influence. Clusters arent simply called grids because they are made y slicing up the camera view frustum, which makes each cluster a tiny frustum. Frustum based culling is hard (false positives are easy) but there are many ways to go about it based on how accurate you need to be.
+
+#### [Fast Frustum Culling](http://gamedevs.org/uploads/fast-extraction-viewing-frustum-planes-from-world-view-projection-matrix.pdf)
+
+![](readmeImages/PointLightCulling.png)
+
+![](readmeImages/false-positive-diagram.jpg)
+
+![](readmeImages/Clustering_depth_Slicing.png)
+
+The clusters used in this project were uniformly spaces in z, and were slicing the view frustum into 15 sections along each dimension. The number of slices per plane affects the size of the cluster buffer and so is a good number to play around with. Additionally it may be beneficially to have exponential or some other way of splitting up the z dimension, because usually in real-time applications things in the distance are sampled at lower resolutions. This is something that can and has been taken advantage of, for example the game doom implemented an exponential divisioning of the z dimension.
+
+### Optimizations
+
+![](readmeImages/OptimizationComparison.png)
+
+![](readmeImages/OptimizationComparison_table.png)
+
+#### Using Two G-buffers (use total 8 channels) - Pack values together into vec4s
+
+Reducing the number of g-buffers helps make deferred shading faster which can be done by compactly storing data in them. Colors often dont need the alpha component, normals can be reconstructed simply from 2 of their components, data can be stored in 24bit floats instead of 32 bits, are just some of the ways to achieve this compression.
+
+This project implemented the following layout for the 2 g-buffers used:
+
+R-Channel | G-Channel | B-Channel | A-Channel
+--------- | --------- | --------- | ---------
+Position.x | Position.y | Position.z | Normal.x
+Color.x | Color.y | Color.z | Normal.y
+
+#### 2 Component Normals
+
+If we assume the magnitude of a normal is one, which it usually is because its simply a direction vector. We can reconstruct the z-value of the normal from its x and y values. The magnitude of a vector is defined as the square root of x squared + y squared + z squared. This formula gives us the magnitude of z. The sign of z is positive in camera space for all the fragments that we can see. Using these 2 bits of information we can easily reconstruct the normal from only its x and y components.
+
+### Effects
+#### Toon Shading
+
+![](readmeImages/toonShadingExample.png)
+
+#### Blinn-Phong
+
+![](readmeImages/BlinnPhongShadingExample.png)
+
+#### Gamma Correction
+
+With | Without
+---- | -------
+![](readmeImages/gammaCorrection.png) | ![](readmeImages/nogammaCorrection.png)
+
+## Debug Views
+
+Fragment X Cluster | Fragment Y Cluster | Fragment Z Cluster
+------------------ | ------------------ | ------------------
+![](readmeImages/fragmentXcluster.png) | ![](readmeImages/fragmentYcluster.png) | ![](readmeImages/fragmentZcluster.png)
+
+Fragment u coordinate | Lights Per Cluster | Arbitray Light Value Per Cluster
+------------------ | ------------------ | ------------------
+![](readmeImages/fragment_u.png) | ![](readmeImages/lightsPerCluster.png) | ![](readmeImages/arbitrarylightColorPerCluster.png)
+
+Fragment Depth | Fragment World Space Position | Normals | Albedo
+-------------- | ----------------------------- | ------- | ------
+![](readmeImages/fragmentdepth.png) | ![](readmeImages/fragmentWorldSpacePositions.png) | ![](readmeImages/worldspacenormals.png) | ![](readmeImages/albedo.png)
+
+## Credits
 
 * [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

diff --git a/build/bundle.js b/build/bundle.js
diff --git a/build/bundle.js.map b/build/bundle.js.map
diff --git a/readmeImages/BlinnPhongShadingExample.png b/readmeImages/BlinnPhongShadingExample.png
diff --git a/readmeImages/Clustering_depth_Slicing.png b/readmeImages/Clustering_depth_Slicing.png
diff --git a/readmeImages/LambertianShadingExample.png b/readmeImages/LambertianShadingExample.png
diff --git a/readmeImages/LambertianShadingWithoutGammaCorrectionExample.png b/readmeImages/LambertianShadingWithoutGammaCorrectionExample.png
diff --git a/readmeImages/LiveDemoImage.png b/readmeImages/LiveDemoImage.png
diff --git a/readmeImages/NumLightsComparison.png b/readmeImages/NumLightsComparison.png
diff --git a/readmeImages/NumLights_table.png b/readmeImages/NumLights_table.png
diff --git a/readmeImages/OptimizationComparison.png b/readmeImages/OptimizationComparison.png
diff --git a/readmeImages/OptimizationComparison_table.png b/readmeImages/OptimizationComparison_table.png
diff --git a/readmeImages/PointLightCulling.png b/readmeImages/PointLightCulling.png
diff --git a/readmeImages/VideoLinkImage.png b/readmeImages/VideoLinkImage.png
diff --git a/readmeImages/albedo.png b/readmeImages/albedo.png
diff --git a/readmeImages/arbitrarylightColorPerCluster.png b/readmeImages/arbitrarylightColorPerCluster.png
diff --git a/readmeImages/blinnPhongSpecular.png b/readmeImages/blinnPhongSpecular.png
diff --git a/readmeImages/false-positive-diagram.jpg b/readmeImages/false-positive-diagram.jpg
diff --git a/readmeImages/fragmentWorldSpacePositions.png b/readmeImages/fragmentWorldSpacePositions.png
diff --git a/readmeImages/fragmentXcluster.png b/readmeImages/fragmentXcluster.png
diff --git a/readmeImages/fragmentYcluster.png b/readmeImages/fragmentYcluster.png
diff --git a/readmeImages/fragmentZcluster.png b/readmeImages/fragmentZcluster.png
diff --git a/readmeImages/fragment_u.png b/readmeImages/fragment_u.png
diff --git a/readmeImages/fragmentdepth.png b/readmeImages/fragmentdepth.png
diff --git a/readmeImages/gammaCorrection.png b/readmeImages/gammaCorrection.png
diff --git a/readmeImages/lightsPerCluster.png b/readmeImages/lightsPerCluster.png
diff --git a/readmeImages/nogammaCorrection.png b/readmeImages/nogammaCorrection.png
diff --git a/readmeImages/toonShadingExample.png b/readmeImages/toonShadingExample.png
diff --git a/readmeImages/toonshading.png b/readmeImages/toonshading.png
diff --git a/readmeImages/worldspacenormals.png b/readmeImages/worldspacenormals.png
diff --git a/src/AABB.js b/src/AABB.js
@@ -0,0 +1,22 @@
+import { mat4, vec4, vec3 } from 'gl-matrix';
+const THREE = require('three')
+
+export default class AABB //class for Axis Aligned Bounding Boxes
+{
+  constructor()
+  {
+    this.min = vec3.create();
+    this.max = vec3.create();
+  }
+
+  calcAABB_PointLight(lightPos, radius)
+  {
+    this.min[0] = lightPos[0] - radius;
+    this.min[1] = lightPos[1] - radius;
+    this.min[2] = lightPos[2] - radius;
+
+    this.max[0] = lightPos[0] + radius;
+    this.max[1] = lightPos[1] + radius;
+    this.max[2] = lightPos[2] + radius;
+  }
+}
diff --git a/src/init.js b/src/init.js
@@ -1,5 +1,5 @@
-// TODO: Change this to enable / disable debug mode
-export const DEBUG = true && process.env.NODE_ENV === 'development';
+// Change this to enable / disable debug mode
+export const DEBUG = false && process.env.NODE_ENV === 'development';
 
 import DAT from 'dat-gui';
 import WebGLDebug from 'webgl-debug';
@@ -60,7 +60,7 @@ stats.domElement.style.top = '0px';
 document.body.appendChild(stats.domElement);
 
 // Initialize camera
-export const camera = new PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
+export const camera = new PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 50);
 
 // Initialize camera controls
 export const cameraControls = new OrbitControls(camera, canvas);

diff --git a/src/main.js b/src/main.js
@@ -3,34 +3,90 @@ import ForwardRenderer from './renderers/forward';
 import ClusteredForwardPlusRenderer from './renderers/clusteredForwardPlus';
 import ClusteredDeferredRenderer from './renderers/clusteredDeferred';
 import Scene from './scene';
+import { NUM_LIGHTS } from './scene';
+import { MAX_LIGHTS_PER_CLUSTER } from './scene';
 
 const FORWARD = 'Forward';
 const CLUSTERED_FORWARD_PLUS = 'Clustered Forward+';
 const CLUSTERED_DEFFERED = 'Clustered Deferred';
 
+const Lambertian = 'Lambertian';
+const BlinnPhong = 'BlinnPhong';
+const Toon = 'Toon';
+
+var shadertype = 0;
+var gammaSet = 0;
+
 const params = {
   renderer: CLUSTERED_FORWARD_PLUS,
+  numLights: NUM_LIGHTS,
+  maxLightsPerCluster: MAX_LIGHTS_PER_CLUSTER,
+  GammaCorrection: true,
+  ShadingModel: Lambertian,
   _renderer: null,
 };
 
 setRenderer(params.renderer);
 
 function setRenderer(renderer) {
+  if(params.ShadingModel == 'Lambertian')
+  {
+    shadertype = 0;
+  }
+  else if(params.ShadingModel == 'BlinnPhong')
+  {
+    shadertype = 1;
+  }
+  else
+  {
+    shadertype = 2;
+  }
+
+  if(params.GammaCorrection == true)
+  {
+    gammaSet = 1;
+  }
+  else
+  {
+    gammaSet = 0;
+  }
+
   switch(renderer) {
     case FORWARD:
       params._renderer = new ForwardRenderer();
       break;
     case CLUSTERED_FORWARD_PLUS:
-      params._renderer = new ClusteredForwardPlusRenderer(15, 15, 15);
+      params._renderer = new ClusteredForwardPlusRenderer(15, 15, 15, camera, Math.floor(params.numLights), 
+                                                                              Math.floor(params.maxLightsPerCluster), 
+                                                                              gammaSet, 
+                                                                              shadertype);
       break;
     case CLUSTERED_DEFFERED:
-      params._renderer = new ClusteredDeferredRenderer(15, 15, 15);
+      params._renderer = new ClusteredDeferredRenderer(15, 15, 15, camera, Math.floor(params.numLights), 
+                                                                           Math.floor(params.maxLightsPerCluster), 
+                                                                           gammaSet,
+                                                                           shadertype);
       break;
   }
 }
 
 gui.add(params, 'renderer', [FORWARD, CLUSTERED_FORWARD_PLUS, CLUSTERED_DEFFERED]).onChange(setRenderer);
 
+// Will have to change the scene file to get dynamic changing of lights
+// gui.add(params, 'numLights', 50, 10000).onChange(function(newVal) {
+//   setRenderer(params.renderer);
+// });
+// gui.add(params, 'maxLightsPerCluster', 50, 7500).onChange(function(newVal) {
+//   setRenderer(params.renderer);
+// });
+
+gui.add(params, 'GammaCorrection').onChange(function(newVal) {
+  setRenderer(params.renderer);
+});
+gui.add(params, 'ShadingModel', [Lambertian, BlinnPhong, Toon]).onChange(function(newVal) {
+  setRenderer(params.renderer);
+});
+
 const scene = new Scene();
 scene.loadGLTF('models/sponza/sponza.gltf');