diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..cb8c833
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 856ab54..5c8bd93 100644
--- a/README.md
+++ b/README.md
@@ -3,442 +3,42 @@ WebGL Deferred Shading
 
 **University of Pennsylvania, CIS 565: GPU Programming and Architecture, Project 6**
 
-* (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)
+* Sally Kong
+* Tested on: Google Chrome 46, Macbook Air 2014, 1.4 GHz Intel Core i5, ntel HD Graphics 5000 1536 MB (Personal)
+
 
 ### Live Online
 
-[![](img/thumb.png)](http://TODO.github.io/Project6-WebGL-Deferred-Shading)
+[![](img/thumb.png)](http://kongsally.github.io/Project6-WebGL-Deferred-Shading/)
 
 ### Demo Video
 
-[![](img/video.png)](TODO)
-
-### (TODO: Your README)
-
-*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!
-
-
-Instructions (delete me)
-========================
-
-This is due at midnight on the evening of Tuesday, October 27.
-
-**Summary:** In this project, you'll be introduced to the basics of deferred
-shading and WebGL. You'll use GLSL and WebGL to implement a deferred shading
-pipeline and various lighting and visual effects.
-
-**Recommendations:**
-Take screenshots as you go. Use them to document your progress in your README!
-
-Read (or at least skim) the full README before you begin, so that you know what
-to expect and what to prepare for.
-
-### Running the code
-
-If you have Python, you should be able to run `server.py` to start a server.
-Then, open [`http://localhost:10565/`](http://localhost:10565/) in your browser.
-
-This project requires a WebGL-capable web browser with support for
-`WEBGL_draw_buffers`. You can check for support on
-[WebGL Report](http://webglreport.com/).
-
-Google Chrome seems to work best on all platforms. If you have problems running
-the starter code, use Chrome or Chromium, and make sure you have updated your
-browser and video drivers.
-
-In Moore 100C, both Chrome and Firefox work.
-See below for notes on profiling/debugging tools.
-
-Use the screenshot button to save a screenshot.
-
-## Requirements
-
-**Ask on the mailing list for any clarifications.**
-
-In this project, you are given code for:
-
-* Loading OBJ files and color/normal map textures
-* Camera control
-* Partial implementation of deferred shading including many helper functions
-
-### Required Tasks
-
-**Before doing performance analysis,** you must disable debug mode by changing
-`debugMode` to `false` in `framework.js`. Keep it enabled when developing - it
-helps find WebGL errors *much* more easily.
-
-You will need to perform the following tasks:
-
-* Complete the deferred shading pipeline so that the Blinn-Phong and Post1
-  shaders recieve the correct input. Go through the Starter Code Tour **before
-  continuing!**
-
-**Effects:**
-
-* Implement deferred Blinn-Phong shading (diffuse + specular) for point lights
-  * With normal mapping (code provided)
-  * For deferred shading, you want to use a lighting model for the point lights
-    which has a limited radius - so that adding a scissor or proxy geometry
-    will not cause parts of the lighting to disappear. It should look very
-    similar both with and without scissor/proxy optimization. Here is a
-    convenient lighting model, but you can also use others:
-    * `float attenuation = max(0.0, u_lightRad - dist_from_surface_to_light);`
-
-* Implement one of the following effects:
-  * Bloom using post-process blur (box or Gaussian) [1]
-  * Toon shading (with ramp shading + simple depth-edge detection for outlines)
-
-**Optimizations:**
-
-* Scissor test optimization: when accumulating shading from each point
-  light source, only render in a rectangle around the light.
-  * Show a debug view for this (showing scissor masks clearly), e.g. by
-    modifying and using `red.frag.glsl` with additive blending and alpha = 0.1.
-  * Code is provided to compute this rectangle for you, and there are
-    comments at the relevant place in `deferredRender.js` with more guidance.
-    * **NOTE:** The provided scissor function is not very accurate - it is a
-      quick hack which results in some errors (as can be seen in the live
-      demo).
-
-* Optimized g-buffer format - reduce the number and size of g-buffers:
-  * Ideas:
-    * Pack values together into vec4s
-    * Use 2-component normals
-    * Quantize values by using smaller texture types instead of gl.FLOAT
-    * Reduce number of properties passed via g-buffer, e.g. by:
-      * Applying the normal map in the `copy` shader pass instead of
-        copying both geometry normals and normal maps
-      * Reconstructing world space position using camera matrices and X/Y/depth
-  * For credit, you must show a good optimization effort and record the
-    performance of each version you test, in a simple table.
-    * It is expected that you won't need all 4 provided g-buffers for a basic
-      pipeline - make sure you disable the unused ones.
-  * See mainly: `copy.frag.glsl`, `deferred/*.glsl`, `deferredSetup.js`
-
-### Extra Tasks
-
-You must do at least **10 points** worth of extra features (effects or
-optimizations/analysis).
-
-**Effects:**
-
-* (3pts) The effect you didn't choose above (bloom or toon shading)
-
-* (3pts) Screen-space motion blur (blur along velocity direction) [3]
-
-* (2pts) Allow variability in additional material properties
-  * Include other properties (e.g. specular coeff/exponent) in g-buffers
-  * Use this to render objects with different material properties
-  * These may be uniform across one model draw call, but you'll have to show
-    multiple models
-
-**Optimizations/Analysis:**
-
-* (2pts) Improved screen-space AABB for scissor test
-  (smaller/more accurate than provided - but beware of CPU/GPU tradeoffs)
-
-* (3pts) Two-pass **Gaussian** blur using separable convolution (using a second
-  postprocess render pass) to improve bloom or other 2D blur performance
-
-* (4-6pts) Light proxies
-  * (4pts) Instead of rendering a scissored full-screen quad for every light,
-    render some proxy geometry which covers the part of the screen affected by
-    the light (e.g. a sphere, for an attenuated point light).
-    * A model called `sphereModel` is provided which can be drawn in the same
-      way as the code in `drawScene`. (Must be drawn with a vertex shader which
-      scales it to the light radius and translates it to the light position.)
-  * (+2pts) To avoid lighting geometry far behind the light, render the proxy
-    geometry (e.g. sphere) using an inverted depth test
-    (`gl.depthFunc(gl.GREATER)`) with depth writing disabled (`gl.depthMask`).
-    This test will pass only for parts of the screen for which the backside of
-    the sphere appears behind parts of the scene.
-    * Note that the copy pass's depth buffer must be bound to the FBO during
-      this operation!
-  * Show a debug view for this (showing light proxies)
-  * Compare performance of this, naive, and scissoring.
-
-* (8pts) Tile-based deferred shading with detailed performance comparison
-  * On the CPU, check which lights overlap which tiles. Then, render each tile
-    just once for all lights (instead of once for each light), applying only
-    the overlapping lights.
-    * The method is described very well in
-      [Yuqin & Sijie's README](https://github.com/YuqinShao/Tile_Based_WebGL_DeferredShader/blob/master/README.md#algorithm-details).
-    * This feature requires allocating the global light list and tile light
-      index lists as shown at this link. These can be implemented as textures.
-  * Show a debug view for this (number of lights per tile)
-
-* (6pts) Deferred shading without multiple render targets
-  (i.e. without WEBGL_draw_buffers).
-  * Render the scene once for each target g-buffer, each time into a different
-    framebuffer object.
-  * Include a detailed performance analysis, comparing with/without
-    WEBGL_draw_buffers (like in the
-    [Mozilla blog article](https://hacks.mozilla.org/2014/01/webgl-deferred-shading/)).
-
-* (2-6pts) Compare performance to equivalently-lit forward-rendering:
-  * (2pts) With no forward-rendering optimizations
-  * (+2pts) Coarse, per-object back-to-front sorting of geometry for early-z
-    * (Of course) must render many objects to test
-  * (+2pts) Z-prepass for early-z
-
-This extra feature list is not comprehensive. If you have a particular idea
-that you would like to implement, please **contact us first** (preferably on
-the mailing list).
-
-**Where possible, all features should be switchable using the GUI panel in
-`ui.js`.**
-
-### Performance & Analysis
-
-**Before doing performance analysis,** you must disable debug mode by changing
-`debugMode` to `false` in `framework.js`. Keep it enabled when developing - it
-helps find WebGL errors *much* more easily.
-
-Optimize your JavaScript and/or GLSL code. Web Tracing Framework
-and Chrome/Firefox's profiling tools (see Resources section) will
-be useful for this. For each change
-that improves performance, show the before and after render times.
-
-For each new *effect* feature (required or extra), please
-provide the following analysis:
-
-* Concise overview write-up of the feature.
-* Performance change due to adding the feature.
-  * If applicable, how do parameters (such as number of lights, etc.)
-    affect performance? Show data with simple graphs.
-* If you did something to accelerate the feature, what did you do and why?
-* How might this feature be optimized beyond your current implementation?
-
-For each *performance* feature (required or extra), please provide:
-
-* Concise overview write-up of the feature.
-* Detailed performance improvement analysis of adding the feature
-  * What is the best case scenario for your performance improvement? What is
-    the worst? Explain briefly.
-  * Are there tradeoffs to this performance feature? Explain briefly.
-  * How do parameters (such as number of lights, tile size, etc.) affect
-    performance? Show data with graphs.
-  * Show debug views when possible.
-    * If the debug view correlates with performance, explain how.
-
-Note: Be aware that stats.js may give 0 millisecond frame timings in Chrome on
-occasion - if this happens, you can use the FPS counter.
-
-### Starter Code Tour
-
-You'll be working mainly in `deferredRender.js` using raw WebGL. Three.js is
-included in the project for various reasons. You won't use it for much, but its
-matrix/vector types may come in handy.
-
-It's highly recommended that you use the browser debugger to inspect variables
-to get familiar with the code. At any point, you can also
-`console.log(some_var);` to show it in the console and inspect it.
-
-The setup in `deferredSetup` is already done for you, for many of the features.
-If you want to add uniforms (textures or values), you'll change them here.
-Therefore, it is recommended that you review the comments to understand the
-process, BEFORE starting work in `deferredRender`.
-
-In `deferredRender`, start at the **START HERE!** comment.
-Work through the appropriate `TODO`s as you go - most of them are very
-small. Test incrementally (after implementing each part, instead of testing
-all at once).
-* (The first thing you should be doing is implementing the fullscreen quad!)
-* See the note in the Debugging section on how to test the first part of the
-  pipeline incrementally.
-
-Your _next_ first goal should be to get the debug views working.
-Add code in `debug.frag.glsl` to examine your g-buffers before trying to
-render them. (Set the debugView in the UI to show them.)
-
-For editing JavaScript, you can use a simple editor with syntax highlighting
-such as Sublime, Vim, Emacs, etc., or the editor built into Chrome.
-
-* `js/`: JavaScript files for this project.
-  * `main.js`: Handles initialization of other parts of the program.
-  * `framework.js`: Loads the scene, camera, etc., and calls your setup/render
-    functions. Hopefully, you won't need to change anything here.
-  * `deferredSetup.js`: Deferred shading pipeline setup code.
-    * `createAndBind(Depth/Color)TargetTexture`: Creates empty textures for
-      binding to frame buffer objects as render targets.
-  * `deferredRender.js`: Your deferred shading pipeline execution code.
-    * `renderFullScreenQuad`: Renders a full-screen quad with the given shader
-      program.
-  * `ui.js`: Defines the UI using
-    [dat.GUI](https://workshop.chromeexperiments.com/examples/gui/).
-    * The global variable `cfg` can be accessed anywhere in the code to read
-      configuration values.
-  * `utils.js`: Utilities for JavaScript and WebGL.
-    * `abort`: Aborts the program and shows an error.
-    * `loadTexture`: Loads a texture from a URL into WebGL.
-    * `loadShaderProgram`: Loads shaders from URLs into a WebGL shader program.
-    * `loadModel`: Loads a model into WebGL buffers.
-    * `readyModelForDraw`: Configures the WebGL state to draw a model.
-    * `drawReadyModel`: Draws a model which has been readied.
-    * `getScissorForLight`: Computes an approximate scissor rectangle for a
-      light in world space.
-* `glsl/`: GLSL code for each part of the pipeline:
-  * `clear.*.glsl`: Clears each of the `NUM_GBUFFERS` g-buffers.
-  * `copy.*.glsl`: Performs standard rendering without any fragment shading,
-    storing all of the resulting values into the `NUM_GBUFFERS` g-buffers.
-  * `quad.vert.glsl`: Minimal vertex shader for rendering a single quad.
-  * `deferred.frag.glsl`: Deferred shading pass (for lighting calculations).
-    Reads from each of the `NUM_GBUFFERS` g-buffers.
-  * `post1.frag.glsl`: First post-processing pass.
-* `lib/`: JavaScript libraries.
-* `models/`: OBJ models for testing. Sponza is the default.
-* `index.html`: Main HTML page.
-* `server.bat` (Windows) or `server.py` (OS X/Linux):
-  Runs a web server at `localhost:10565`.
-
-### The Deferred Shading Pipeline
-
-See the comments in `deferredSetup.js`/`deferredRender.js` for low-level guidance.
-
-In order to enable and disable effects using the GUI, upload a vec4 uniform
-where each component is an enable/disable flag. In JavaScript, the state of the
-UI is accessible anywhere as `cfg.enableEffect0`, etc.
-
-**Pass 1:** Renders the scene geometry and its properties to the g-buffers.
-* `copy.vert.glsl`, `copy.frag.glsl`
-* The framebuffer object `pass_copy.fbo` must be bound during this pass.
-* Renders into `pass_copy.depthTex` and `pass_copy.gbufs[i]`, which need to be
-  attached to the framebuffer.
-
-**Pass 2:** Performs lighting and shading into the color buffer.
-* `quad.vert.glsl`, `deferred/blinnphong-pointlight.frag.glsl`
-* Takes the g-buffers `pass_copy.gbufs`/`depthTex` as texture inputs to the
-  fragment shader, on uniforms `u_gbufs` and `u_depth`.
-* `pass_deferred.fbo` must be bound.
-* Renders into `pass_deferred.colorTex`.
-
-**Pass 3:** Performs post-processing.
-* `quad.vert.glsl`, `post/one.frag.glsl`
-* Takes `pass_BlinnPhong_PointLight.colorTex` as a texture input `u_color`.
-* Renders directly to the screen if there are no additional passes.
-
-More passes may be added for additional effects (e.g. combining bloom with
-motion blur) or optimizations (e.g. two-pass Gaussian blur for bloom)
-
-#### Debugging
-
-If there is a WebGL error, it will be displayed on the developer console and
-the renderer will be aborted. To find out where the error came from, look at
-the backtrace of the error (you may need to click the triangle to expand the
-message). The line right below `wrapper @ webgl-debug.js` will point to the
-WebGL call that failed.
-
-When working in the early pipeline (before you have a lit render), it can be
-useful to render WITHOUT post-processing. To do this, you have to make sure
-that there is NO framebuffer bound while rendering to the screen (that is, bind
-null) so that the output will display to the screen instead of saving into a
-texture. Writing to gl_FragData[0] is the same as writing to gl_FragColor, so
-you'll see whatever you were storing into the first g-buffer.
-
-#### Changing the number of g-buffers
-
-Note that the g-buffers are just `vec4`s - you can put any values you want into
-them. However, if you want to change the total number of g-buffers (add more
-for additional effects or remove some for performance), you will need to make
-changes in a number of places:
-
-* `deferredSetup.js`/`deferredRender.js`: search for `NUM_GBUFFERS`
-* `copy.frag.glsl`
-* `deferred.frag.glsl`
-* `clear.frag.glsl`
-
-
-## Resources
-
-* [1] Bloom:
-  [GPU Gems, Ch. 21](http://http.developer.nvidia.com/GPUGems/gpugems_ch21.html) 
-* [2] Screen-Space Ambient Occlusion:
-  [Floored Article](http://floored.com/blog/2013/ssao-screen-space-ambient-occlusion.html)
-* [3] Post-Process Motion Blur:
-  [GPU Gems 3, Ch. 27](http://http.developer.nvidia.com/GPUGems3/gpugems3_ch27.html)
-
-**Also see:** The articles linked in the course schedule.
-
-### Profiling and debugging tools
-
-Built into Firefox:
-* Canvas inspector
-* Shader Editor
-* JavaScript debugger and profiler
-
-Built into Chrome:
-* JavaScript debugger and profiler
-
-Plug-ins:
-* (Chrome/Firefox) [Web Tracing Framework](http://google.github.io/tracing-framework/)
-* (Chrome) [Shader Editor](https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob)
-
-
-Firefox can also be useful - it has a canvas inspector, WebGL profiling and a
-shader editor built in.
-
-
-## README
-
-Replace the contents of this README.md in a clear manner with the following:
-
-* A brief description of the project and the specific features you implemented.
-* At least one screenshot of your project running.
-* A 30+ second video of your project running showing all features.
-  [Open Broadcaster Software](http://obsproject.com) is recommended.
-  (Even though your demo can be seen online, using multiple render targets
-  means it won't run on many computers. A video will work everywhere.)
-* A performance analysis (described below).
-
-### Performance Analysis
-
-See above.
-
-### GitHub Pages
+![](img/deferredShading.gif)
 
-Since this assignment is in WebGL, you can make your project easily viewable by 
-taking advantage of GitHub's project pages feature.
+###Toon Shading
+* With Ramp Shading and Outlines
+![](img/toonShading.png)
 
-Once you are done with the assignment, create a new branch:
 
-`git branch gh-pages`
+### Debug Images
 
-Push the branch to GitHub:
+|Depth | Position | Geometry Normal|
+|:-------------:|:-------------:|:-------------:|
+|![](img/depth.png) | ![](img/position.png) | ![](img/geom_normal.png)|
+|Color Map | Normal Map | Surface Normal|
+|![](img/color_map.png) | ![](img/normal_map.png) | ![](img/surface_normal.png)|
 
-`git push origin gh-pages`
+## Performance Analysis
 
-Now, you can go to `<user_name>.github.io/<project_name>` to see your
-renderer online from anywhere. Add this link to your README.
+* Enabling the Scissor Test almost quadrupled the FPS. The Toon Shader didn't change the performance. 
+![](img/FPSChart.png)
 
-## Submit
+* It reduced rendering time by about half
 
-1. Open a GitHub pull request so that we can see that you have finished.
-   The title should be "Submission: YOUR NAME".
-   * **ADDITIONALLY:**
-     In the body of the pull request, include a link to your repository.
-2. Send an email to the TA (gmail: kainino1+cis565@) with:
-   * **Subject**: in the form of `[CIS565] Project N: PENNKEY`.
-   * Direct link to your pull request on GitHub.
-   * Estimate the amount of time you spent on the project.
-   * If there were any outstanding problems, briefly explain.
-   * **List the extra features you did.**
-   * Feedback on the project itself, if any.
+ | With Scissor Test | Without Scissor Test | 
+ |:-------------:|:-------------:|
+ | 0~11 MS| 0~20 MS|
 
-### Third-Party Code Policy
+* Scissor Test Screenshot
 
-* Use of any third-party code must be approved by asking on our mailing list.
-* If it is approved, all students are welcome to use it. Generally, we approve
-  use of third-party code that is not a core part of the project. For example,
-  for the path tracer, we would approve using a third-party library for loading
-  models, but would not approve copying and pasting a CUDA function for doing
-  refraction.
-* Third-party code **MUST** be credited in README.md.
-* Using third-party code without its approval, including using another
-  student's code, is an academic integrity violation, and will, at minimum,
-  result in you receiving an F for the semester.
+![](img/scissor_test.png)
diff --git a/glsl/.DS_Store b/glsl/.DS_Store
new file mode 100644
index 0000000..2468345
Binary files /dev/null and b/glsl/.DS_Store differ
diff --git a/glsl/copy.frag.glsl b/glsl/copy.frag.glsl
index 0f5f8f7..80941f0 100644
--- a/glsl/copy.frag.glsl
+++ b/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);
 }
diff --git a/glsl/deferred/ambient.frag.glsl b/glsl/deferred/ambient.frag.glsl
index 1fd4647..786525f 100644
--- a/glsl/deferred/ambient.frag.glsl
+++ b/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);  
 }
diff --git a/glsl/deferred/blinnphong-pointlight.frag.glsl b/glsl/deferred/blinnphong-pointlight.frag.glsl
index b24a54a..e8a6e02 100644
--- a/glsl/deferred/blinnphong-pointlight.frag.glsl
+++ b/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,14 +23,22 @@ 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) {
@@ -35,5 +46,24 @@ void main() {
         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);  
 }
diff --git a/glsl/deferred/debug.frag.glsl b/glsl/deferred/debug.frag.glsl
index 9cbfae4..465782a 100644
--- a/glsl/deferred/debug.frag.glsl
+++ b/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);
diff --git a/glsl/deferred/toonShading.frag.glsl b/glsl/deferred/toonShading.frag.glsl
new file mode 100644
index 0000000..13f3c3a
--- /dev/null
+++ b/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);  
+}
diff --git a/glsl/deferred/toon_edge.frag.glsl b/glsl/deferred/toon_edge.frag.glsl
new file mode 100644
index 0000000..0662107
--- /dev/null
+++ b/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);
+}
diff --git a/glsl/post/.DS_Store b/glsl/post/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/glsl/post/.DS_Store differ
diff --git a/glsl/post/one.frag.glsl b/glsl/post/one.frag.glsl
index 94191cd..130adcd 100644
--- a/glsl/post/one.frag.glsl
+++ b/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;
diff --git a/glsl/red.frag.glsl b/glsl/red.frag.glsl
index f8ef1ec..4085da8 100644
--- a/glsl/red.frag.glsl
+++ b/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);
 }
diff --git a/img/.DS_Store b/img/.DS_Store
new file mode 100644
index 0000000..e09ee94
Binary files /dev/null and b/img/.DS_Store differ
diff --git a/img/FPSChart.png b/img/FPSChart.png
new file mode 100644
index 0000000..d9e5734
Binary files /dev/null and b/img/FPSChart.png differ
diff --git a/img/color_map.png b/img/color_map.png
new file mode 100644
index 0000000..b508805
Binary files /dev/null and b/img/color_map.png differ
diff --git a/img/deferredShading.gif b/img/deferredShading.gif
new file mode 100644
index 0000000..8b5e2e7
Binary files /dev/null and b/img/deferredShading.gif differ
diff --git a/img/depth.png b/img/depth.png
new file mode 100644
index 0000000..605fef6
Binary files /dev/null and b/img/depth.png differ
diff --git a/img/geom_normal.png b/img/geom_normal.png
new file mode 100644
index 0000000..ac93925
Binary files /dev/null and b/img/geom_normal.png differ
diff --git a/img/normal_map.png b/img/normal_map.png
new file mode 100644
index 0000000..68d6984
Binary files /dev/null and b/img/normal_map.png differ
diff --git a/img/position.png b/img/position.png
new file mode 100644
index 0000000..5f0a423
Binary files /dev/null and b/img/position.png differ
diff --git a/img/scissor_test.png b/img/scissor_test.png
new file mode 100644
index 0000000..3962573
Binary files /dev/null and b/img/scissor_test.png differ
diff --git a/img/surface_normal.png b/img/surface_normal.png
new file mode 100644
index 0000000..6845a97
Binary files /dev/null and b/img/surface_normal.png differ
diff --git a/img/thumb.png b/img/thumb.png
index 9ec8ed0..cfe0dc2 100644
Binary files a/img/thumb.png and b/img/thumb.png differ
diff --git a/img/toonShading.png b/img/toonShading.png
new file mode 100644
index 0000000..f4806d0
Binary files /dev/null and b/img/toonShading.png differ
diff --git a/index.html b/index.html
index 9f8639c..5ab48c5 100644
--- a/index.html
+++ b/index.html
@@ -84,7 +84,7 @@
             height: 1.4em;
             position: fixed;
             bottom: 2em;
-            left: 0;
+            left: 20px;
         }
     </style>
 </head>
diff --git a/js/deferredRender.js b/js/deferredRender.js
index b1f238b..8054e14 100644
--- a/js/deferredRender.js
+++ b/js/deferredRender.js
@@ -25,16 +25,6 @@
 
         // Execute deferred shading pipeline
 
-        // CHECKITOUT: START HERE! You can even uncomment this:
-        //debugger;
-
-        { // TODO: this block should be removed after testing renderFullScreenQuad
-            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-            // TODO: Implement/test renderFullScreenQuad first
-            renderFullScreenQuad(R.progRed);
-            return;
-        }
-
         R.pass_copy.render(state);
 
         if (cfg && cfg.debugView >= 0) {
@@ -43,9 +33,8 @@
             R.pass_debug.render(state);
         } else {
             // * Deferred pass and postprocessing pass(es)
-            // TODO: uncomment these
-            //R.pass_deferred.render(state);
-            //R.pass_post1.render(state);
+            R.pass_deferred.render(state);
+            R.pass_post1.render(state);
 
             // OPTIONAL TODO: call more postprocessing passes, if any
         }
@@ -55,23 +44,24 @@
      * 'copy' pass: Render into g-buffers
      */
     R.pass_copy.render = function(state) {
-        // * Bind the framebuffer R.pass_copy.fbo
-        // TODO: ^
+        // * Bind the framebuffer R.pass_copy.fbo 
+
+        //turns black when this is uncommented
+        gl.bindFramebuffer(gl.FRAMEBUFFER, R.pass_copy.fbo);
 
         // * Clear screen using R.progClear
-        TODO: renderFullScreenQuad(R.progClear);
+        renderFullScreenQuad(R.progClear);
         // * Clear depth buffer to value 1.0 using gl.clearDepth and gl.clear
-        // TODO: ^
-        // TODO: ^
-
+        gl.clearDepth(1.0);
+        gl.clear(gl.DEPTH_BUFFER_BIT);
+       
         // * "Use" the program R.progCopy.prog
-        // TODO: ^
-        // TODO: Write glsl/copy.frag.glsl
-
+        gl.useProgram(R.progCopy.prog);
+        
         var m = state.cameraMat.elements;
         // * Upload the camera matrix m to the uniform R.progCopy.u_cameraMat
         //   using gl.uniformMatrix4fv
-        // TODO: ^
+        gl.uniformMatrix4fv(R.progCopy.u_cameraMat, false, state.cameraMat.elements);
 
         // * Draw the scene
         drawScene(state);
@@ -97,9 +87,8 @@
         // * Tell shader which debug view to use
         bindTexturesForLightPass(R.prog_Debug);
         gl.uniform1i(R.prog_Debug.u_debug, cfg.debugView);
-
-        // * Render a fullscreen quad to perform shading on
         renderFullScreenQuad(R.prog_Debug);
+        
     };
 
     /**
@@ -118,28 +107,66 @@
 
         // Enable blending and use gl.blendFunc to blend with:
         //   color = 1 * src_color + 1 * dst_color
-        // TODO: ^
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.ONE, gl.ONE);
 
         // * Bind/setup the ambient pass, and render using fullscreen quad
         bindTexturesForLightPass(R.prog_Ambient);
         renderFullScreenQuad(R.prog_Ambient);
 
         // * Bind/setup the Blinn-Phong pass, and render using fullscreen quad
-        bindTexturesForLightPass(R.prog_BlinnPhong_PointLight);
 
-        // TODO: add a loop here, over the values in R.lights, which sets the
-        //   uniforms R.prog_BlinnPhong_PointLight.u_lightPos/Col/Rad etc.,
-        //   then does renderFullScreenQuad(R.prog_BlinnPhong_PointLight).
+        if(cfg.toonShading) {
+            bindTexturesForLightPass(R.prog_ToonShading);
+        } else {
+            bindTexturesForLightPass(R.prog_BlinnPhong_PointLight);
+        }
+        
 
-        // TODO: In the lighting loop, use the scissor test optimization
-        // Enable gl.SCISSOR_TEST, render all lights, then disable it.
-        //
-        // getScissorForLight returns null if the scissor is off the screen.
-        // Otherwise, it returns an array [xmin, ymin, width, height].
-        //
-        //   var sc = getScissorForLight(state.viewMat, state.projMat, light);
+        gl.enable(gl.SCISSOR_TEST);
+    
+        for (var i = 0; i < R.lights.length; i++) {
+            var light = R.lights[i];
+            var sc = getScissorForLight(state.viewMat, state.projMat, light);
+
+            if (sc) {
+
+                gl.scissor(sc[0], sc[1], sc[2], sc[3]);
+
+                if (cfg.toonShading) {
+                    gl.uniform3f(R.prog_ToonShading.u_lightPos, 
+                    light.pos[0], light.pos[1], light.pos[2]);
+                    gl.uniform3f(R.prog_ToonShading.u_lightCol, 
+                    light.col[0], light.col[1], light.col[2]);
+                    gl.uniform3f(R.prog_ToonShading.u_cameraPos, 
+                    state.cameraPos[0], state.cameraPos[1], state.cameraPos[2]);
+                    gl.uniform1f(R.prog_ToonShading.u_lightRad, light.rad);
+                    gl.uniform1f(R.prog_ToonShading.u_width, width);
+                    gl.uniform1f(R.prog_ToonShading.u_height, height);
+
+                    if(cfg.debugScissor) {
+                        renderFullScreenQuad(R.progRed);
+                    }
+                    renderFullScreenQuad(R.prog_ToonShading);
+
+                } else {
+                    gl.uniform3f(R.prog_BlinnPhong_PointLight.u_lightPos, 
+                    light.pos[0], light.pos[1], light.pos[2]);
+                    gl.uniform3f(R.prog_BlinnPhong_PointLight.u_lightCol, 
+                    light.col[0], light.col[1], light.col[2]);
+                    gl.uniform3f(R.prog_BlinnPhong_PointLight.u_cameraPos, 
+                    state.cameraPos[0], state.cameraPos[1], state.cameraPos[2]);
+                    gl.uniform1f(R.prog_BlinnPhong_PointLight.u_lightRad, light.rad);
+                    if(cfg.debugScissor) {
+                        renderFullScreenQuad(R.progRed);
+                    }
+                    renderFullScreenQuad(R.prog_BlinnPhong_PointLight);
+                }
+ 
+           }
 
-        // Disable blending so that it doesn't affect other code
+        }
+         gl.disable(gl.SCISSOR_TEST);
         gl.disable(gl.BLEND);
     };
 
@@ -165,7 +192,7 @@
         // * Unbind any existing framebuffer (if there are no more passes)
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
-        // * Clear the framebuffer depth to 1.0
+         // * Clear the framebuffer depth to 1.0
         gl.clearDepth(1.0);
         gl.clear(gl.DEPTH_BUFFER_BIT);
 
@@ -174,14 +201,16 @@
 
         // * Bind the deferred pass's color output as a texture input
         // Set gl.TEXTURE0 as the gl.activeTexture unit
-        // TODO: ^
+        gl.activeTexture(gl.TEXTURE0);
         // Bind the TEXTURE_2D, R.pass_deferred.colorTex to the active texture unit
-        // TODO: ^
+        gl.bindTexture(gl.TEXTURE_2D, R.pass_deferred.colorTex);
+        
         // Configure the R.progPost1.u_color uniform to point at texture unit 0
         gl.uniform1i(R.progPost1.u_color, 0);
-
+        
         // * Render a fullscreen quad to perform shading on
         renderFullScreenQuad(R.progPost1);
+
     };
 
     var renderFullScreenQuad = (function() {
@@ -204,13 +233,13 @@
 
         var init = function() {
             // Create a new buffer with gl.createBuffer, and save it as vbo.
-            // TODO: ^
-
+            vbo = gl.createBuffer();
+           
             // Bind the VBO as the gl.ARRAY_BUFFER
-            // TODO: ^
+            gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
             // Upload the positions array to the currently-bound array buffer
             // using gl.bufferData in static draw mode.
-            // TODO: ^
+            gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
         };
 
         return function(prog) {
@@ -223,16 +252,17 @@
             gl.useProgram(prog.prog);
 
             // Bind the VBO as the gl.ARRAY_BUFFER
-            // TODO: ^
+            gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
             // Enable the bound buffer as the vertex attrib array for
             // prog.a_position, using gl.enableVertexAttribArray
-            // TODO: ^
+            gl.enableVertexAttribArray(prog.a_position);
+
             // Use gl.vertexAttribPointer to tell WebGL the type/layout for
             // prog.a_position's access pattern.
-            // TODO: ^
+            gl.vertexAttribPointer(prog.a_position, 3, gl.FLOAT, false, 0, 0);
 
             // Use gl.drawArrays (or gl.drawElements) to draw your quad.
-            // TODO: ^
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
             // Unbind the array buffer.
             gl.bindBuffer(gl.ARRAY_BUFFER, null);
diff --git a/js/deferredSetup.js b/js/deferredSetup.js
index 65136e0..00e3792 100644
--- a/js/deferredSetup.js
+++ b/js/deferredSetup.js
@@ -4,6 +4,7 @@
     window.R = {};
     R.pass_copy = {};
     R.pass_debug = {};
+    R.pass_debug_scissor = {};
     R.pass_deferred = {};
     R.pass_post1 = {};
     R.lights = [];
@@ -24,8 +25,8 @@
     R.light_min = [-14, 0, -6];
     R.light_max = [14, 18, 6];
     R.light_dt = -0.03;
-    R.LIGHT_RADIUS = 4.0;
-    R.NUM_LIGHTS = 20; // TODO: test with MORE lights!
+    R.LIGHT_RADIUS = 3.0;
+    R.NUM_LIGHTS =100; // TODO: test with MORE lights!
     var setupLights = function() {
         Math.seedrandom(0);
 
@@ -141,22 +142,39 @@
             p.u_lightPos = gl.getUniformLocation(p.prog, 'u_lightPos');
             p.u_lightCol = gl.getUniformLocation(p.prog, 'u_lightCol');
             p.u_lightRad = gl.getUniformLocation(p.prog, 'u_lightRad');
+            p.u_cameraPos = gl.getUniformLocation(p.prog, 'u_cameraPos');
             R.prog_BlinnPhong_PointLight = p;
         });
 
+        loadDeferredProgram('toonShading', function(p) {
+            // Save the object into this variable for access later
+            p.u_lightPos = gl.getUniformLocation(p.prog, 'u_lightPos');
+            p.u_lightCol = gl.getUniformLocation(p.prog, 'u_lightCol');
+            p.u_lightRad = gl.getUniformLocation(p.prog, 'u_lightRad');
+            p.u_cameraPos = gl.getUniformLocation(p.prog, 'u_cameraPos');
+            R.prog_ToonShading = p;
+        });
+
         loadDeferredProgram('debug', function(p) {
             p.u_debug = gl.getUniformLocation(p.prog, 'u_debug');
             // Save the object into this variable for access later
             R.prog_Debug = p;
         });
 
+    /*        loadDeferredProgram('toon_edge', function(p) {
+            p.u_width    = gl.getUniformLocation(p.prog, 'u_width');
+            p.u_height   = gl.getUniformLocation(p.prog, 'u_height');
+            // Save the object into this variable for access later
+            R.prog_toonEdge = p;
+        });*/
+
         loadPostProgram('one', function(p) {
             p.u_color    = gl.getUniformLocation(p.prog, 'u_color');
             // Save the object into this variable for access later
             R.progPost1 = p;
         });
 
-        // TODO: If you add more passes, load and set up their shader programs.
+        
     };
 
     var loadDeferredProgram = function(name, callback) {
diff --git a/js/framework.js b/js/framework.js
index 49fe429..c57e125 100644
--- a/js/framework.js
+++ b/js/framework.js
@@ -75,7 +75,7 @@ var width, height;
         gl = renderer.context;
 
         // TODO: For performance measurements, disable debug mode!
-        var debugMode = true;
+        var debugMode = false;
 
         if (debugMode) {
             $('#debugmodewarning').css('display', 'block');
diff --git a/js/ui.js b/js/ui.js
index 05c1852..4c6eb96 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -7,7 +7,7 @@ var cfg;
         // TODO: Define config fields and defaults here
         this.debugView = -1;
         this.debugScissor = false;
-        this.enableEffect0 = false;
+        this.toonShading = false;
     };
 
     var init = function() {
@@ -26,8 +26,9 @@ var cfg;
         });
         gui.add(cfg, 'debugScissor');
 
-        var eff0 = gui.addFolder('EFFECT NAME HERE');
-        eff0.add(cfg, 'enableEffect0');
+        var eff0 = gui.addFolder('Toon Shading');
+        eff0.add(cfg, 'toonShading');
+
         // TODO: add more effects toggles and parameters here
     };