Submission: Sally Kong

glsl/copy.frag.glsl

@@ -11,5 +11,16 @@ varying vec3 v_normal;
 varying vec2 v_uv;
 
 void main() {
-    // TODO: copy values into gl_FragData[0], [1], etc.
+
+	 // color/albedo
+    gl_FragData[0] = texture2D(u_colmap, v_uv);
+
+    // position
+    gl_FragData[1] = vec4(v_position, 1.0);
+
+    // surface normal
+    gl_FragData[2] = texture2D(u_normap, v_uv);
+
+    // normal
+    gl_FragData[3] = vec4(v_normal, 1.0);
 }

glsl/deferred/ambient.frag.glsl

@@ -11,17 +11,17 @@ uniform sampler2D u_depth;
 varying vec2 v_uv;
 
 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 gb0 = texture2D(u_gbufs[0], v_uv); 
     float depth = texture2D(u_depth, v_uv).x;
-    // TODO: Extract needed properties from the g-buffers into local variables
+
+    vec3 colmap = gb0.xyz;  // The color map - unlit "albedo" (surface color)
+
 
     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(0.3 * colmap, 1);  
 }

glsl/deferred/blinnphong-pointlight.frag.glsl

@@ -6,10 +6,13 @@ precision highp int;
 
 uniform vec3 u_lightCol;
 uniform vec3 u_lightPos;
+uniform vec3 u_cameraPos;
+
 uniform float u_lightRad;
 uniform sampler2D u_gbufs[NUM_GBUFFERS];
 uniform sampler2D u_depth;
 
+
 varying vec2 v_uv;
 
 vec3 applyNormalMap(vec3 geomnor, vec3 normap) {
@@ -20,20 +23,47 @@ vec3 applyNormalMap(vec3 geomnor, vec3 normap) {
     return normap.y * surftan + normap.x * surfbinor + normap.z * geomnor;
 }
 
+
+//https://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_shading_model
+
 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);
-    float depth = texture2D(u_depth, v_uv).x;
-    // TODO: Extract needed properties from the g-buffers into local variables
+    vec4 gb0 = texture2D(u_gbufs[0], v_uv); // albedo
+    vec4 gb1 = texture2D(u_gbufs[1], v_uv); // position
+    vec4 gb2 = texture2D(u_gbufs[2], v_uv); // surface normal
+    vec4 gb3 = texture2D(u_gbufs[3], v_uv); // geom normal
+
+    vec3 pos = gb1.xyz;     // World-space position
+    vec3 geomnor = gb3.xyz;  // Normals of the geometry as defined, without normal mapping
+    vec3 colmap = gb0.xyz;  // The color map - unlit "albedo" (surface color)
+    vec3 normap = gb2.xyz;  // The raw normal map (normals relative to the surface they're on)
 
+    float depth = texture2D(u_depth, v_uv).x;
+
     // 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
+    vec3 lightDir = normalize(u_lightPos - pos);
+    vec3 normal = applyNormalMap(geomnor, normap);
+
+
+    float lambertian = max(dot(lightDir, normal), 0.0);
+    float specular = 0.0;
+
+    if (lambertian > 0.0) {
+        vec3 viewDir = normalize(u_cameraPos - pos);
+
+        //blinn phong
+        vec3 halfDir = normalize(lightDir + viewDir);
+        float specAngle = max(dot(normal, halfDir), 0.0);
+        //specular = pow(specAngle, 4.0);
+    }
+
+    vec3 color = (lambertian + specular) * u_lightCol * vec3(1.0);
+    float attenuation = max(0.0, u_lightRad - distance(u_lightPos, pos));
+
+    gl_FragColor = vec4(color * attenuation, 1);  
 }

glsl/deferred/debug.frag.glsl

@@ -21,18 +21,23 @@ vec3 applyNormalMap(vec3 geomnor, vec3 normap) {
 }
 
 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 gb0 = texture2D(u_gbufs[0], v_uv); // albedo
+    vec4 gb1 = texture2D(u_gbufs[1], v_uv); // position
+    vec4 gb2 = texture2D(u_gbufs[2], v_uv); // surface normal
+    vec4 gb3 = texture2D(u_gbufs[3], v_uv); // normal
+
     float depth = texture2D(u_depth, v_uv).x;
-    // TODO: Extract needed properties from the g-buffers into local variables
+
+    // 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;     // World-space position
-    vec3 geomnor;  // Normals of the geometry as defined, without normal mapping
-    vec3 colmap;  // The color map - unlit "albedo" (surface color)
-    vec3 normap;  // The raw normal map (normals relative to the surface they're on)
-    vec3 nor;     // The true normals as we want to light them - with the normal map applied to the geometry normals (applyNormalMap above)
+
+    vec3 pos = gb1.xyz;     // World-space position
+    vec3 geomnor = gb3.xyz;  // Normals of the geometry as defined, without normal mapping
+    vec3 colmap = gb0.xyz;  // The color map - unlit "albedo" (surface color)
+    vec3 normap = gb2.xyz;  // The raw normal map (normals relative to the surface they're on)
+
+    // 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);     
 
     if (u_debug == 0) {
         gl_FragColor = vec4(vec3(depth), 1.0);

glsl/deferred/toonShading.frag.glsl

@@ -0,0 +1,96 @@
+#version 100
+precision highp float;
+precision highp int;
+
+#define NUM_GBUFFERS 4
+
+uniform vec3 u_lightCol;
+uniform vec3 u_lightPos;
+uniform vec3 u_cameraPos;
+
+uniform float u_lightRad;
+uniform float u_width;
+uniform float u_height;
+uniform sampler2D u_gbufs[NUM_GBUFFERS];
+uniform sampler2D u_depth;
+
+
+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() {
+    vec4 gb0 = texture2D(u_gbufs[0], v_uv); // albedo
+    vec4 gb1 = texture2D(u_gbufs[1], v_uv); // position
+    vec4 gb2 = texture2D(u_gbufs[2], v_uv); // surface normal
+    vec4 gb3 = texture2D(u_gbufs[3], v_uv); // geom normal
+
+    float n1 = texture2D(u_depth, v_uv + vec2(0.001, 0.0)).x;
+    float n2 = texture2D(u_depth, v_uv - vec2(0.001, 0.0)).x;
+    float n3 = texture2D(u_depth, v_uv + vec2(0.0, 0.001)).x;
+    float n4 = texture2D(u_depth, v_uv - vec2(0.0, 0.001)).x;
+
+    vec3 pos = gb1.xyz;     // World-space position
+    vec3 geomnor = gb3.xyz;  // Normals of the geometry as defined, without normal mapping
+    vec3 colmap = gb0.xyz;  // The color map - unlit "albedo" (surface color)
+    vec3 normap = gb2.xyz;  // The raw normal map (normals relative to the surface they're on)
+
+    float depth = texture2D(u_depth, v_uv).x;
+
+    // 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;
+    }
+
+    vec3 lightDir = normalize(u_lightPos - pos);
+    vec3 normal = applyNormalMap(geomnor, normap);
+
+    float lambertian = max(dot(lightDir, normal), 0.0);
+    float specular = 0.0;
+
+    if (lambertian > 0.0) {
+
+        if (lambertian > 0.75) {
+            lambertian = 1.0;
+        } else if (lambertian > 0.73) {
+            gl_FragColor = vec4(vec3(0.0), 1.0);
+            return;
+        } else if (lambertian > 0.45) {
+            lambertian = 0.4; 
+        } else if (lambertian > 0.42) {
+            gl_FragColor = vec4(vec3(0.0), 1.0);
+            return;
+        } else {
+            lambertian = 0.0;
+        } 
+
+        vec3 viewDir = normalize(u_cameraPos - pos);
+
+        //blinn phong
+        vec3 halfDir = normalize(lightDir + viewDir);
+        float specAngle = max(dot(normal, halfDir), 0.0);
+        specular = pow(specAngle, 4.0) / 10.0;
+    }
+
+    vec3 color = (lambertian + specular) * u_lightCol * vec3(1.0);
+    float attenuation = max(0.0, u_lightRad - distance(u_lightPos, pos));
+
+    //outline
+    float difference = abs(n1 - depth) + abs(n2 - depth) + abs(n3 - depth) + abs(n4 - depth);
+
+    if(difference > 0.01) {
+        gl_FragColor = vec4(vec3(1.0), 1);
+        return;
+    }  
+
+    gl_FragColor = vec4(color * attenuation, 1);  
+}

glsl/deferred/toon_edge.frag.glsl

@@ -0,0 +1,30 @@
+#version 100
+precision highp float;
+precision highp int;
+
+uniform sampler2D u_depth;
+uniform float u_width;
+uniform float u_height;
+varying vec2 v_uv;
+
+void main() {
+
+    float depth = texture2D(u_depth, v_uv).x;
+
+
+   float difference = abs(texture2D(u_depth, v_uv + vec2(1.0/u_width), 0.0).x - depth)+
+    				abs(texture2D(u_depth, v_uv - vec2(1.0/u_width, 0.0)).x - depth)+
+    				abs(texture2D(u_depth, v_uv + vec2(0.0, 1.0/u_height)).x - depth)+
+    				abs(texture2D(u_depth, v_uv - vec2(0.0, 1.0/u_height)).x - depth)+
+    				abs(texture2D(u_depth, v_uv + vec2(1.0/u_width, 1.0/u_height)).x - depth)+
+    				abs(texture2D(u_depth, v_uv - vec2(1.0/u_width, 1.0/u_height)).x - depth)+
+    				abs(texture2D(u_depth, v_uv + vec2(1.0/u_width, -1.0/u_height)).x - depth)+
+    				abs(texture2D(u_depth, v_uv - vec2(1.0/u_width, -1.0/u_height)).x - depth);
+
+    if(difference >= 0.01) {
+    	gl_FragColor = vec4(vec3(0.0), 1.0);
+    	return;
+    }  
+
+    gl_FragColor = vec4(0.0);
+}

glsl/post/one.frag.glsl

@@ -3,14 +3,13 @@ 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) {
         gl_FragColor = SKY_COLOR;
         return;

glsl/red.frag.glsl

@@ -3,5 +3,5 @@ precision highp float;
 precision highp int;
 
 void main() {
-    gl_FragColor = vec4(1, 0, 0, 1);
+    gl_FragColor = vec4(0.1, 0.1, 0.1, 0.1);
 }

index.html

@@ -84,7 +84,7 @@
             height: 1.4em;
             position: fixed;
             bottom: 2em;
-            left: 0;
+            left: 20px;
         }
     </style>
 </head>