Project 5: Bowen Bao

README.md

@@ -3,28 +3,55 @@ 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)
+* Bowen Bao
+* Tested on: Firefox 49.0.2 on
+  Windows 10, i7-6700K @ 4.00GHz 32GB, GTX 1080 8192MB (Personal Computer)
 
-### Live Online
+## Overview
 
-[![](img/thumb.png)](http://TODO.github.io/Project5B-WebGL-Deferred-Shading)
+1. Core Features:
+	* Blinn-Phong shading
+	* Bloom using Gaussian blur
+	* Scissor test optimization
+	* g-buffer optimization
+2. Extra Features:
+	* Toon shading
+	* Screen-space motion blur
 
-### Demo Video/GIF
+## Performance
 
-[![](img/video.png)](TODO)
+We first compare the performance under different effects with settings of different amount of lights.
 
-### (TODO: Your README)
+![](/img/perf.png)
 
-*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.
+It is interesting as we could observe that the effects are not putting a heavy load on the performance. And we get a linearly decrease in frame rates with the increasing number of lights. 
 
-This assignment has a considerable amount of performance analysis compared
-to implementation work. Complete the implementation early to leave time!
+![](/img/perf2.png)
 
+Observe that we used to pass four arrays in GBuffer, but two(normal and normal map) among them are only required so that we could calculate the modified normal for later use. We can optimize this step by pre calculating the normal, and pass it in one array in the GBuffer. Now we only pass 3 arrays each time. And as observed, the performance rises.
 
-### Credits
+![](/img/scissor.png)
+
+Above shows the box of scissor test. We improve performance by only rendering the region which is affected by each light(the red rectangle).
+
+## Effects
+
+### Basic
+
+![](/img/basic.png)
+
+### Bloom
+
+![](/img/bloom.png)
+
+(Due to the number of lights, the bloom effect is not that obvious... The lights now would seem to glow compared to the basic rendering)
+
+### Motion Blur
+
+![](/img/blur.gif)
+
+
+## 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

glsl/copy.frag.glsl

@@ -10,11 +10,25 @@ varying vec3 v_position;
 varying vec3 v_normal;
 varying vec2 v_uv;
 
+vec3 applyNormalMap(vec3 geomnor, vec3 normap) {
+	normap = normap * 2.0 - 1.0;
+	vec3 up = normalize(vec3(0.001, 1, 0.001));
+	vec3 surftan = normalize(cross(geomnor, up));
+	vec3 surfbinor = cross(geomnor, surftan);
+	return normap.y * surftan + normap.x * surfbinor + normap.z * geomnor;
+}
+
 void main() {
     // TODO: copy values into gl_FragData[0], [1], etc.
     // You can use the GLSL texture2D function to access the textures using
     // 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.0 );
+
+	vec3 normap = texture2D(u_normap, v_uv).xyz;
+
+	gl_FragData[1] = vec4(normalize(applyNormalMap(v_normal, normap)) , 0.0);
+	gl_FragData[2] = texture2D(u_colmap, v_uv);
+	//gl_FragData[3] = texture2D(u_normap, v_uv);
 }

glsl/deferred/ambient.frag.glsl

@@ -3,7 +3,8 @@
 precision highp float;
 precision highp int;
 
-#define NUM_GBUFFERS 4
+//#define NUM_GBUFFERS 4
+#define NUM_GBUFFERS 3
 
 uniform sampler2D u_gbufs[NUM_GBUFFERS];
 uniform sampler2D u_depth;
@@ -14,7 +15,7 @@ void main() {
     vec4 gb0 = texture2D(u_gbufs[0], v_uv);
     vec4 gb1 = texture2D(u_gbufs[1], v_uv);
     vec4 gb2 = texture2D(u_gbufs[2], v_uv);
-    vec4 gb3 = texture2D(u_gbufs[3], 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
 
@@ -23,5 +24,6 @@ void main() {
         return;
     }
 
-    gl_FragColor = vec4(0.1, 0.1, 0.1, 1);  // TODO: replace this
+    //gl_FragColor = vec4(0.1, 0.1, 0.1, 1);  // TODO: replace this
+	gl_FragColor = vec4(0.1 * gb2.rbg, 1.0);
 }

glsl/deferred/blinnphong-pointlight.frag.glsl

@@ -2,14 +2,17 @@
 precision highp float;
 precision highp int;
 
-#define NUM_GBUFFERS 4
+//#define NUM_GBUFFERS 4
+#define NUM_GBUFFERS 3
 
 uniform vec3 u_lightCol;
 uniform vec3 u_lightPos;
 uniform float u_lightRad;
 uniform sampler2D u_gbufs[NUM_GBUFFERS];
 uniform sampler2D u_depth;
 
+uniform int u_toon;
+
 varying vec2 v_uv;
 
 vec3 applyNormalMap(vec3 geomnor, vec3 normap) {
@@ -24,16 +27,47 @@ void main() {
     vec4 gb0 = texture2D(u_gbufs[0], v_uv);
     vec4 gb1 = texture2D(u_gbufs[1], v_uv);
     vec4 gb2 = texture2D(u_gbufs[2], v_uv);
-    vec4 gb3 = texture2D(u_gbufs[3], 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 col = gb2.rgb;
+	//vec3 nor = gb3.xyz;
+	vec3 nor_ = gb1.xyz;//applyNormalMap(geomNor, nor);
+
+	float dist = distance(pos, u_lightPos);
+
     // If nothing was rendered to this pixel, set alpha to 0 so that the
     // postprocessing step can render the sky color.
     if (depth == 1.0) {
         gl_FragColor = vec4(0, 0, 0, 0);
         return;
     }
 
-    gl_FragColor = vec4(0, 0, 1, 1);  // TODO: perform lighting calculations
+    //gl_FragColor = vec4(1, 0, 0, 1);  // TODO: perform lighting calculations
+	vec3 lightDir = normalize(u_lightPos - pos);
+	vec3 viewDir = normalize(-pos);
+	vec3 halfDir = normalize(lightDir + viewDir);
+
+	float attenuation = max(0.0, u_lightRad - dist);
+	float lambertian = max(dot(lightDir, nor_), 0.0);
+	float specAngle = max(dot(halfDir, nor_), 0.0);
+	vec3 colLinear = 0.3 * specAngle * u_lightCol + 0.7 * col * u_lightCol * lambertian;
+	if (u_toon == 1)
+	{
+		float steps = 3.0;
+		specAngle = ceil(specAngle * steps) / steps;
+		lambertian = ceil(lambertian * steps) / steps;
+		attenuation = ceil(attenuation * steps) / steps;
+
+		colLinear = 0.3 * specAngle * u_lightCol + 0.7 * col * u_lightCol * lambertian;
+
+		gl_FragColor = vec4(colLinear * attenuation, 1.0);
+	}
+	else
+	{
+		gl_FragColor = vec4(colLinear * attenuation, 1.0);
+	}
 }

glsl/deferred/debug.frag.glsl

@@ -2,7 +2,8 @@
 precision highp float;
 precision highp int;
 
-#define NUM_GBUFFERS 4
+//#define NUM_GBUFFERS 4
+#define NUM_GBUFFERS 3
 
 uniform int u_debug;
 uniform sampler2D u_gbufs[NUM_GBUFFERS];
@@ -24,29 +25,31 @@ void main() {
     vec4 gb0 = texture2D(u_gbufs[0], v_uv);
     vec4 gb1 = texture2D(u_gbufs[1], v_uv);
     vec4 gb2 = texture2D(u_gbufs[2], v_uv);
-    vec4 gb3 = texture2D(u_gbufs[3], 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
     // These definitions are suggested for starting out, but you will probably want to change them.
     vec3 pos = gb0.xyz;     // World-space position
-    vec3 geomnor = gb1.xyz;  // Normals of the geometry as defined, without normal mapping
+    //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 normap = gb1.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)
 
     // 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);
+		gl_FragColor = vec4(normap, 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);
+		gl_FragColor = vec4(normap, 1.0);
     } else if (u_debug == 5) {
-        // gl_FragColor = vec4(abs(nor), 1.0);
+        gl_FragColor = vec4(normap, 1.0);
     } else {
         gl_FragColor = vec4(1, 0, 1, 1);
     }

glsl/post/blur.frag.glsl

@@ -0,0 +1,39 @@
+#version 100
+precision highp float;
+precision highp int;
+
+uniform sampler2D u_color;
+uniform mat4 u_prev;
+uniform sampler2D u_pos;
+
+varying vec2 v_uv;
+
+const vec4 SKY_COLOR = vec4(0.01, 0.14, 0.42, 1.0);
+
+void main()
+{
+	vec4 color = texture2D(u_color, v_uv);
+
+	if (color.a == 0.0)
+	{
+		gl_FragColor = SKY_COLOR;
+		return;
+	}
+
+	vec3 pos = texture2D(u_pos, v_uv).xyz;
+	vec4 prev_pos = u_prev * vec4(pos, 1.0);
+	prev_pos = prev_pos / prev_pos.w;
+
+	prev_pos = prev_pos * 0.5 + 0.5;
+
+	vec2 velocity = ((v_uv - prev_pos.xy) * 0.35);
+
+	vec2 coord = v_uv + velocity;
+
+	for (int i = 0; i < 10; ++i)
+	{
+		color += texture2D(u_color, coord);
+		coord += velocity;
+	}
+	gl_FragColor = color * 0.1;
+}

glsl/post/old.frag.glsl

@@ -0,0 +1,19 @@
+#version 100
+precision highp float;
+precision highp int;
+
+uniform sampler2D u_color;
+
+varying vec2 v_uv;
+
+const vec4 SKY_COLOR = vec4(0.01, 0.14, 0.42, 1.0);
+
+void main() {
+	vec4 color = texture2D(u_color, v_uv);
+
+	if (color.a == 0.0) {
+		color = SKY_COLOR;
+	}
+
+	gl_FragColor = color;
+}

glsl/post/one.frag.glsl

@@ -3,18 +3,27 @@ precision highp float;
 precision highp int;
 
 uniform sampler2D u_color;
+uniform vec2 u_screen_inv;
 
 varying vec2 v_uv;
 
 const vec4 SKY_COLOR = vec4(0.01, 0.14, 0.42, 1.0);
 
+const vec3 Gaussian = vec3(0.4, 0.25, 0.05);
+
 void main() {
     vec4 color = texture2D(u_color, v_uv);
 
     if (color.a == 0.0) {
-        gl_FragColor = SKY_COLOR;
-        return;
-    }
+		color = SKY_COLOR;
+    } 
+
+	vec4 l2 = texture2D(u_color, vec2(v_uv.x - u_screen_inv.x * 2.0, v_uv.y));
+	vec4 l1 = texture2D(u_color, vec2(v_uv.x - u_screen_inv.x * 1.0, v_uv.y));
+	vec4 r2 = texture2D(u_color, vec2(v_uv.x + u_screen_inv.x * 2.0, v_uv.y));
+	vec4 r1 = texture2D(u_color, vec2(v_uv.x + u_screen_inv.x * 1.0, v_uv.y));
 
-    gl_FragColor = color;
+	gl_FragColor = color * Gaussian.x; +
+		l2 * Gaussian.z + l1 * Gaussian.y +
+		r2 * Gaussian.z + r1 * Gaussian.y;
 }

glsl/post/toon1.frag.glsl

@@ -0,0 +1,24 @@
+#version 100
+precision highp float;
+precision highp int;
+
+uniform sampler2D u_color;
+uniform vec2 u_screen_inv;
+
+varying vec2 v_uv;
+
+const vec4 SKY_COLOR = vec4(0.01, 0.14, 0.42, 1.0);
+
+void main() {
+	vec4 color = texture2D(u_color, v_uv);
+
+	vec4 l1 = texture2D(u_color, vec2(v_uv.x - u_screen_inv.x, v_uv.y));
+	vec4 l1t = texture2D(u_color, vec2(v_uv.x - u_screen_inv.x, v_uv.y - u_screen_inv.y));
+	vec4 l1b = texture2D(u_color, vec2(v_uv.x - u_screen_inv.x, v_uv.y + u_screen_inv.y));
+
+	vec4 r1 = texture2D(u_color, vec2(v_uv.x + u_screen_inv.x * 1.0, v_uv.y));
+	vec4 r1t = texture2D(u_color, vec2(v_uv.x + u_screen_inv.x, v_uv.y - u_screen_inv.y));
+	vec4 r1b = texture2D(u_color, vec2(v_uv.x + u_screen_inv.x, v_uv.y + u_screen_inv.y));
+
+	gl_FragColor = -l1 - l1t - l1b + r1 + r1t + r1b;
+}

glsl/post/toon2.frag.glsl

@@ -0,0 +1,38 @@
+#version 100
+precision highp float;
+precision highp int;
+
+uniform sampler2D u_color;
+uniform sampler2D u_old_color;
+uniform vec2 u_screen_inv;
+
+varying vec2 v_uv;
+
+const vec4 SKY_COLOR = vec4(0.01, 0.14, 0.42, 1.0);
+
+void main() {
+	vec4 color = texture2D(u_color, v_uv);
+	vec4 old_color = texture2D(u_old_color, v_uv);
+
+	vec4 t1 = texture2D(u_color, vec2(v_uv.x, v_uv.y - u_screen_inv.y));
+	vec4 t1l = texture2D(u_color, vec2(v_uv.x - u_screen_inv.x, v_uv.y - u_screen_inv.y));
+	vec4 t1r = texture2D(u_color, vec2(v_uv.x + u_screen_inv.x, v_uv.y - u_screen_inv.y));
+
+	vec4 b1 = texture2D(u_color, vec2(v_uv.x, v_uv.y + u_screen_inv.y));
+	vec4 b1l = texture2D(u_color, vec2(v_uv.x - u_screen_inv.x, v_uv.y + u_screen_inv.y));
+	vec4 b1r = texture2D(u_color, vec2(v_uv.x + u_screen_inv.x, v_uv.y + u_screen_inv.y));
+
+	vec4 blend = -t1 - t1l - t1r + b1 + b1l + b1r;
+	float edge = max(max(blend.x, blend.y), blend.z);
+
+	if (edge <= 0.3)
+	{
+		blend = vec4(0.0, 0.0, 0.0, 1.0);
+	}
+	else
+	{
+		blend = vec4(1.0);
+	}
+
+	gl_FragColor = (1.0 - blend) * old_color;
+}