Project 5B: Liang Peng

README.md

@@ -3,26 +3,96 @@ WebGL 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)
+* Liang Peng
+* Tested on: **54.0.2840.87 m (64-bit)** on
+  Windows 10, i7-6700HQ @ 2.6GHz 8GB, GTX 960 (Personal Laptop)
 
 ### Live Online
 
-[![](img/thumb.png)](http://TODO.github.io/Project5B-WebGL-Deferred-Shading)
+[Click Me!](http://itoupeter.github.io/Project5-WebGL-Deferred-Shading-with-glTF/)
 
 ### Demo Video/GIF
 
-[![](img/video.png)](TODO)
+![](img/bloom_on.gif)
 
-### (TODO: Your README)
+### Features
 
-*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.
+* [x] Basic Pipeline
+  * [x] Render to G-Buffer
+  * [x] Deferred Shading
+* [x] Scissor Test
+  * [x] Scissor Mask Visualization
+* [x] Post Effect
+  * [x] Sky Color
+  * [x] Bloom Effect
+* [x] Performance Analysis
 
-This assignment has a considerable amount of performance analysis compared
-to implementation work. Complete the implementation early to leave time!
+### Basic Pipeline
 
+Depth | Position | Normal
+--- | --- | ---
+![](img/depth.PNG) | ![](img/position.png) | ![](img/normal.png)
+
+Color Map | Normal Map | Surface Normal
+--- | --- | ---
+![](img/color.png) | ![](img/normal_map.png) | ![](img/surface_normal.png)
+
+Ambient Lighting | Blinn-Phong Lighting
+--- | ---
+![](img/ambient.png) | ![](img/blinn_phong.gif)
+
+Bloom OFF | Bloom ON
+--- | ---
+![](img/bloom_off.gif) | ![](img/bloom_on.gif)
+
+__Scissor Mask Visualization__
+
+![](img/scissor_mask.gif)
+
+### Performance Analysis
+
+#### Lighting
+
+Ambient | Blinn-Phong | Ambient + Blinn-Phong
+:---:|:---:|:---:
+16 ms/frame | 60 ms/frame | 65 ms/frame
+
+![](img/perf_lighting.png)
+
+_*Note_ Ambient lighting is present due to infinite light bouncing in the space, which finally lights every object in the scene evenly (from all angle). Blinn-Phong light consists of, in the simpliest case, two types of lighting, lambert diffuse and specular. Diffuse reflectance is proportional to _dot product of surface normal and light direction_, while specular reflectance is proportional to _dot prodect of surface normal and halfway direction raised to power of shininess_, where halfway direction is the bisectional direction of light direction and view direction.
+
+#### Number of Lights
+
+Num | 1 | 4 | 16 | 64 | 256 | 1024
+:---:|:---:|:---:|:---:|:---:|:---:|:---:
+ms/frame | 20 | 25 | 50 | 190 | 640 | -
+FPS | 55 | 40 | 20 | 6 | 2 | -
+_Note*_ Data above are measured __without scissor test__.
+
+Num | 1 | 4 | 16 | 64 | 256 | 1024
+:---:|:---:|:---:|:---:|:---:|:---:|:---:
+ms/frame | 19 | 24 | 28 | 60 | 200 | 800
+FPS | 60 | 57 | 40 | 16 | 5 | 1
+_Note*_ Data above are measured __with scissor test__.
+
+#### Scissor Test
+
+Scissor Test OFF | Scissor Test ON
+:---:|:---:
+![](img/scissor_off.gif) | ![](img/scissor_on.gif)
+_Note*_ Scissor box calculation is not accurate enough, thus results in noticeable artifacts.
+
+![](img/perf_scissor.png)
+
+_Note*_ With scissor test turned on, only pixels close enough to a particular light for which lighting will be computed, thus a considerable performance gain can be noticed in the figure.
+
+#### Bloom
+
+Bloom OFF | Bloom ON
+:---:|:---:
+36 ms/frame | 40 ms/frame
+
+_*Note_ To achieve bloom effect, we first extract bright color from original color, then bleed the bright color of each pixel into its neighboring pixels, subject to a gaussian distribution. Commonly we will first do the color bleeding first in horizontal direction, then vertical direction. Finally we composite the blurred bright color and the original color to achieve bloom effect.
 
 ### Credits
 

glsl/copy.frag.glsl

@@ -16,5 +16,8 @@ void main() {
     // the UV in v_uv.
 
     // this gives you the idea
-    // gl_FragData[0] = vec4( v_position, 1.0 );
+	gl_FragData[0] = vec4(v_position, 1.);
+	gl_FragData[1] = vec4(v_normal, 0.);
+	gl_FragData[2] = texture2D(u_colmap, v_uv);
+	gl_FragData[3] = texture2D(u_normap, v_uv);
 }

glsl/deferred/ambient.frag.glsl

@@ -16,12 +16,14 @@ void main() {
     vec4 gb2 = texture2D(u_gbufs[2], v_uv);
     vec4 gb3 = texture2D(u_gbufs[3], v_uv);
     float depth = texture2D(u_depth, v_uv).x;
-    // TODO: Extract needed properties from the g-buffers into local variables
+
+	// extract properties from G Buffer
+    vec3 colmap = gb2.rgb;
 
     if (depth == 1.0) {
         gl_FragColor = vec4(0, 0, 0, 0); // set alpha to 0
         return;
     }
 
-    gl_FragColor = vec4(0.1, 0.1, 0.1, 1);  // TODO: replace this
+    gl_FragColor = vec4(colmap * .1, 1);
 }

glsl/deferred/blinnphong-pointlight.frag.glsl

@@ -26,7 +26,20 @@ void main() {
     vec4 gb2 = texture2D(u_gbufs[2], v_uv);
     vec4 gb3 = texture2D(u_gbufs[3], v_uv);
     float depth = texture2D(u_depth, v_uv).x;
+
     // TODO: Extract needed properties from the g-buffers into local variables
+	vec3 pos = gb0.xyz;
+    vec3 geomnor = gb1.xyz;
+    vec3 colmap = gb2.rgb;
+    vec3 normap = gb3.xyz;
+    vec3 N = applyNormalMap(geomnor, normap);
+	vec3 E = vec3(0, 0, 1);
+	vec3 L = normalize(u_lightPos - pos);
+	vec3 H = normalize(E + L);
+	vec3 diffuse;
+	vec3 specular;
+	float dist = distance(pos, u_lightPos);
+	float attenuation = u_lightRad - dist;
 
     // If nothing was rendered to this pixel, set alpha to 0 so that the
     // postprocessing step can render the sky color.
@@ -35,5 +48,13 @@ void main() {
         return;
     }
 
-    gl_FragColor = vec4(0, 0, 1, 1);  // TODO: perform lighting calculations
+	// light too far away
+	if (dist >= u_lightRad) {
+		return;
+	}
+
+	diffuse = u_lightCol * colmap * max(0., dot(N, L)) * attenuation;
+	specular = u_lightCol * pow(max(0., dot(N, H)), 1000.) * attenuation;
+
+    gl_FragColor = vec4(diffuse + specular, 1.);
 }

glsl/deferred/debug.frag.glsl

@@ -32,21 +32,21 @@ void main() {
     vec3 geomnor = gb1.xyz;  // Normals of the geometry as defined, without normal mapping
     vec3 colmap = gb2.rgb;  // The color map - unlit "albedo" (surface color)
     vec3 normap = gb3.xyz;  // The raw normal map (normals relative to the surface they're on)
-    vec3 nor = applyNormalMap (geomnor, normap);     // The true normals as we want to light them - with the normal map applied to the geometry normals (applyNormalMap above)
+    vec3 nor = applyNormalMap(geomnor, normap);     // The true normals as we want to light them - with the normal map applied to the geometry normals (applyNormalMap above)
 
     // TODO: uncomment
     if (u_debug == 0) {
         gl_FragColor = vec4(vec3(depth), 1.0);
     } else if (u_debug == 1) {
-        // gl_FragColor = vec4(abs(pos) * 0.1, 1.0);
+        gl_FragColor = vec4(abs(pos) * 0.1, 1.0);
     } else if (u_debug == 2) {
-        // gl_FragColor = vec4(abs(geomnor), 1.0);
+        gl_FragColor = vec4(abs(geomnor), 1.0);
     } else if (u_debug == 3) {
-        // gl_FragColor = vec4(colmap, 1.0);
+        gl_FragColor = vec4(colmap, 1.0);
     } else if (u_debug == 4) {
-        // gl_FragColor = vec4(normap, 1.0);
+        gl_FragColor = vec4(normap, 1.0);
     } else if (u_debug == 5) {
-        // gl_FragColor = vec4(abs(nor), 1.0);
+        gl_FragColor = vec4(abs(nor), 1.0);
     } else {
         gl_FragColor = vec4(1, 0, 1, 1);
     }

glsl/post/add.frag.glsl

@@ -0,0 +1,16 @@
+#version 100
+#extension GL_EXT_draw_buffers: enable
+precision highp float;
+precision highp int;
+
+uniform sampler2D u_color;
+uniform sampler2D u_bright;
+
+varying vec2 v_uv;
+
+void main() {
+    vec4 color = texture2D(u_color, v_uv);
+	vec4 bright = texture2D(u_bright, v_uv);
+
+    gl_FragColor = color + bright;
+}

glsl/post/blur.frag.glsl

@@ -0,0 +1,35 @@
+#version 100
+#extension GL_EXT_draw_buffers: enable
+precision highp float;
+precision highp int;
+
+uniform sampler2D u_bright;
+uniform bool u_horizontal;
+uniform vec4 u_weight;
+uniform vec2 u_screenSize;
+
+varying vec2 v_uv;
+
+void main() {
+    vec4 brightColor = texture2D(u_bright, v_uv);
+	vec2 offset = 1. / u_screenSize;
+	vec3 result = texture2D(u_bright, v_uv).rgb * 0.227027;
+
+	if (u_horizontal) {
+		float os = 0.;
+		for (int i = 1; i < 5; ++i) {
+			os += offset.x;
+			result += texture2D(u_bright, v_uv + vec2(os, 0.)).rgb * u_weight[i - 1];
+			result += texture2D(u_bright, v_uv - vec2(os, 0.)).rgb * u_weight[i - 1];
+		}
+	} else {
+		float os = 0.;
+		for (int i = 1; i < 5; ++i) {
+			os += offset.y;
+			result += texture2D(u_bright, v_uv + vec2(0., os)).rgb * u_weight[i - 1];
+			result += texture2D(u_bright, v_uv - vec2(0., os)).rgb * u_weight[i - 1];
+		}
+	}
+
+	gl_FragColor = vec4(result, 0.);
+}

glsl/post/one.frag.glsl

@@ -1,4 +1,5 @@
 #version 100
+#extension GL_EXT_draw_buffers: enable
 precision highp float;
 precision highp int;
 
@@ -12,9 +13,17 @@ void main() {
     vec4 color = texture2D(u_color, v_uv);
 
     if (color.a == 0.0) {
-        gl_FragColor = SKY_COLOR;
-        return;
-    }
+        gl_FragData[0] = SKY_COLOR;
+    } else {
+		gl_FragData[0] = color;
+	}
 
-    gl_FragColor = color;
+	// output bright color
+	float brightness = dot(gl_FragData[0].rgb, vec3(.2126, .7152, .0722));
+
+    if (brightness > 1.) {
+        gl_FragData[1] = gl_FragData[0];
+	} else {
+		gl_FragData[1] = vec4(0.);
+	}
 }

glsl/red.frag.glsl

@@ -2,6 +2,8 @@
 precision highp float;
 precision highp int;
 
+uniform vec4 u_color;
+
 void main() {
-    gl_FragColor = vec4(1, 0, 0, 1);
+    gl_FragColor = u_color;
 }

index.html

@@ -101,7 +101,7 @@
         <strong style="font-size: 150%">DEBUG MODE!</strong>
         (Disable before measuring performance.)
         <div id="dlbutton">
-            <button type="button" action="" disabled onclick="downloadCanvas();">Screenshot</button>
+            <button type="button" action="" onclick="downloadCanvas();">Screenshot</button>
         </div>
     </div>
     <div id="alertcontainer">