CIS565-Fall-2014 · wulinjiansheng · Nov 8, 2014 · Nov 11, 2014 · Nov 11, 2014 · Nov 12, 2014
diff --git a/Pics/BlinnPhong.bmp b/Pics/BlinnPhong.bmp
diff --git a/Pics/Bloom.bmp b/Pics/Bloom.bmp
diff --git a/Pics/Blur.bmp b/Pics/Blur.bmp
diff --git a/Pics/Blur2.bmp b/Pics/Blur2.bmp
diff --git a/Pics/Toon Right.bmp b/Pics/Toon Right.bmp
diff --git a/Pics/ToonBuggy.bmp b/Pics/ToonBuggy.bmp
diff --git a/Pics/WithRangeCheck.bmp b/Pics/WithRangeCheck.bmp
diff --git a/Pics/WithoutRangeCheck.bmp b/Pics/WithoutRangeCheck.bmp
diff --git a/Pics/wrong.bmp b/Pics/wrong.bmp
diff --git a/README.md b/README.md
@@ -1,59 +1,66 @@
-------------------------------------------------------------------------------
+======================================
 CIS565: Project 6 -- Deferred Shader
--------------------------------------------------------------------------------
-Fall 2014
--------------------------------------------------------------------------------
-Due Wed, 11/12/2014 at Noon
--------------------------------------------------------------------------------
-
--------------------------------------------------------------------------------
-NOTE:
--------------------------------------------------------------------------------
-This project requires any graphics card with support for a modern OpenGL 
-pipeline. Any AMD, NVIDIA, or Intel card from the past few years should work 
-fine, and every machine in the SIG Lab and Moore 100 is capable of running 
-this project.
-
-This project also requires a WebGL capable browser. The project is known to 
-have issues with Chrome on windows, but Firefox seems to run it fine.
-
--------------------------------------------------------------------------------
-INTRODUCTION:
--------------------------------------------------------------------------------
-
-In this project, you will get introduced to the basics of deferred shading. You will write GLSL and OpenGL code to perform various tasks in a deferred lighting pipeline such as creating and writing to a G-Buffer.
-
--------------------------------------------------------------------------------
-CONTENTS:
--------------------------------------------------------------------------------
-The Project5 root directory contains the following subdirectories:
-
-* js/ contains the javascript files, including external libraries, necessary.
-* assets/ contains the textures that will be used in the second half of the
-  assignment.
-* resources/ contains the screenshots found in this readme file.
-
- This Readme file edited as described above in the README section.
-
--------------------------------------------------------------------------------
-OVERVIEW:
--------------------------------------------------------------------------------
-The deferred shader you will write will have the following stages:
-
-Stage 1 renders the scene geometry to the G-Buffer
-* pass.vert
-* pass.frag
-
-Stage 2 renders the lighting passes and accumulates to the P-Buffer
-* quad.vert
-* diffuse.frag
-* diagnostic.frag
-
-Stage 3 renders the post processing
-* post.vert
-* post.frag
-
-The keyboard controls are as follows:
+======================================
+Fall 2014 <br />
+Bo Zhang<br />
+
+##Overview:
+This is a WebGL project based on implementation of deferred shader.
+
+##Result:
+### 1)Diffuse and Blinn-Phong shading<br />
+This part is simple as I have finished Blinn-Phong shader in project4.<br />
+* Reference Link: http://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_shading_model<br />
+* Here is the result of Diffuse and Blinn-Phong shading:<br />
+![Alt text](https://github.com/wulinjiansheng/Project6-DeferredShader/blob/master/Pics/BlinnPhong.bmp)
+
+### 2)Bloom<br />
+Bloom shading makes objects appear to glow. To do this, I use the Blinn-Phong shader color as orginal color and then used a gaussian convolution to add glow on it.<br />
+* Reference Link: http://prideout.net/archive/bloom/<br />
+* Here is the result of Bloom shading:<br />
+![Alt text](https://github.com/wulinjiansheng/Project6-DeferredShader/blob/master/Pics/Bloom.bmp)
+
+### 3)"Toon" Shading (with basic silhouetting)
+To do Toon Shader, I just assign different color to screen points according to the dot product of light direction and screen point normal. And to add silhouette, I tried two different methonds. The first one is to compare the screen point's normal to nearby normals. If the dot product of point's normal and nearby normal is close to 1, I assign edge color(black) to this screen point. And the second one is to compare depth. If the screen point is near to background, I assigh edge color to it.<br />
+* Reference Link: http://www.lighthouse3d.com/tutorials/glsl-tutorial/toon-shader-version-ii/<br />
+* Here is the result of Toon shading(with buggy silhouetting):<br />
+![Alt text](https://github.com/wulinjiansheng/Project6-DeferredShader/blob/master/Pics/ToonBuggy.bmp)
+<br />
+* Here is the result of Toon shading(with right silhouetting):<br />
+![Alt text](https://github.com/wulinjiansheng/Project6-DeferredShader/blob/master/Pics/Toon%20Right.bmp)<br />
+
+### 4)Screen Space Ambient Occlusion
+Ambient occlusion is an approximation of the amount by which a point on a surface is occluded by the surrounding geometry, which affects the accessibility of that point by incoming light. To do this, I generates 100 direction samples in the hemisphere of the normal for each screen point. I use the samples to check whether the incoming rays are occluded. And then I use the occlusion factor(the percentage of the rays that are occluded) as rgb for the point's color. Besides, I also use rangeCheck to prevent erroneous occlusion between large depth discontinuities.<br />
+* Reference Link: http://john-chapman-graphics.blogspot.co.uk/2013/01/ssao-tutorial.html<br /><br />
+* Here is the result of SSAO(without rangeCheck):<br />
+![Alt text](https://github.com/wulinjiansheng/Project6-DeferredShader/blob/master/Pics/WithoutRangeCheck.bmp)
+<br />
+* Here is the result of SSAO(with rangeCheck):<br />
+![Alt text](https://github.com/wulinjiansheng/Project6-DeferredShader/blob/master/Pics/WithRangeCheck.bmp)<br />
+
+### 5)Blur According To Depth
+I implement this as an additional post processing effects. I implement a simple blur shader and blur the points' color according to their depth. And here is the result, we can see the farther the object is, the more it will be blurred.<br />
+
+![Alt text](https://github.com/wulinjiansheng/Project6-DeferredShader/blob/master/Pics/Blur.bmp)<br />
+![Alt text](https://github.com/wulinjiansheng/Project6-DeferredShader/blob/master/Pics/Blur2.bmp)<br />
+
+##Some Other Buggy Images
+Here is the result I get when I pass wrong random kernels for SSAO:<br />
+![Alt text](https://github.com/wulinjiansheng/Project6-DeferredShader/blob/master/Pics/wrong.bmp)<br />
+
+##Performance Evaluation
+Feature | FPS
+----- | ----- 
+Blinn-Phong | 6 FPS 
+Bloom | 6 FPS 
+Toon | 6 FPS 
+SSAO| 6 FPS
+Blur | 6 FPS
+
+The FPS drops down greatly when I use my self-defined shaders. I don't know why it happens and why all features are 6 FPS(I think Bloom and SSAO shaders should have lower FPS as they have more samples). Maybe main reason is that my browser doesn't support drawbuffers. 
+
+-------------------------------------------------------------------------------
+##Keyboard Controls
 WASDRF - Movement (along w the arrow keys)
 * W - Zoom in
 * S - Zoom out
@@ -69,156 +76,18 @@ WASDRF - Movement (along w the arrow keys)
 * 2 - Normals
 * 3 - Color
 * 4 - Depth
-* 0 - Full deferred pipeline
+* 5 - Toon
+* 6 - Bloom
+* 7 - Blinn-Phong
+* 8 - SSAO
+* 9 - Blur
 
 There are also mouse controls for camera rotation.
 
+Video Link
 -------------------------------------------------------------------------------
-REQUIREMENTS:
--------------------------------------------------------------------------------
-
-In this project, you are given code for:
-* Loading .obj file
-* Deferred shading pipeline
-* GBuffer pass
-
-You are required to implement:
-* Either of the following effects
-  * Bloom
-  * "Toon" Shading (with basic silhouetting)
-* Screen Space Ambient Occlusion
-* Diffuse and Blinn-Phong shading
-
-**NOTE**: Implementing separable convolution will require another link in your pipeline and will count as an extra feature if you do performance analysis with a standard one-pass 2D convolution. The overhead of rendering and reading from a texture _may_ offset the extra computations for smaller 2D kernels.
-
-You must implement two of the following extras:
-* The effect you did not choose above
-* Compare performance to a normal forward renderer with
-  * No optimizations
-  * Coarse sort geometry front-to-back for early-z
-  * Z-prepass for early-z
-* Optimize g-buffer format, e.g., pack things together, quantize, reconstruct z from normal x and y (because it is normalized), etc.
-  * Must be accompanied with a performance analysis to count
-* Additional lighting and pre/post processing effects! (email first please, if they are good you may add multiple).
-
--------------------------------------------------------------------------------
-RUNNING THE CODE:
--------------------------------------------------------------------------------
-
-Since the code attempts to access files that are local to your computer, you
-will either need to:
-
-* Run your browser under modified security settings, or
-* Create a simple local server that serves the files
-
-
-FIREFOX: change ``strict_origin_policy`` to false in about:config 
-
-CHROME:  run with the following argument : `--allow-file-access-from-files`
-
-(You can do this on OSX by running Chrome from /Applications/Google
-Chrome/Contents/MacOS with `open -a "Google Chrome" --args
---allow-file-access-from-files`)
-
-* To check if you have set the flag properly, you can open chrome://version and
-  check under the flags
-
-RUNNING A SIMPLE SERVER: 
-
-If you have Python installed, you can simply run a simple HTTP server off your
-machine from the root directory of this repository with the following command:
-
-`python -m SimpleHTTPServer`
-
--------------------------------------------------------------------------------
-RESOURCES:
--------------------------------------------------------------------------------
-
-The following are articles and resources that have been chosen to help give you
-a sense of each of the effects:
-
-* Bloom : [GPU Gems](http://http.developer.nvidia.com/GPUGems/gpugems_ch21.html) 
-* Screen Space Ambient Occlusion : [Floored
-  Article](http://floored.com/blog/2013/ssao-screen-space-ambient-occlusion.html)
-
--------------------------------------------------------------------------------
-README
--------------------------------------------------------------------------------
-All students must replace or augment the contents of this Readme.md in a clear 
-manner with the following:
+http://youtu.be/wwNlNdxbaSo <br />
 
-* A brief description of the project and the specific features you implemented.
-* At least one screenshot of your project running.
-* A 30 second or longer video of your project running.  To create the video you
-  can use [Open Broadcaster Software](http://obsproject.com) 
-* A performance evaluation (described in detail below).
-
--------------------------------------------------------------------------------
-PERFORMANCE EVALUATION
--------------------------------------------------------------------------------
-The performance evaluation is where you will investigate how to make your 
-program more efficient using the skills you've learned in class. You must have
-performed at least one experiment on your code to investigate the positive or
-negative effects on performance. 
-
-We encourage you to get creative with your tweaks. Consider places in your code
-that could be considered bottlenecks and try to improve them. 
-
-Each student should provide no more than a one page summary of their
-optimizations along with tables and or graphs to visually explain any
-performance differences.
-
--------------------------------------------------------------------------------
-THIRD PARTY CODE POLICY
--------------------------------------------------------------------------------
-* Use of any third-party code must be approved by asking on the Google groups.  
-  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 ray 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 result in you 
-  receiving an F for the semester.
-
--------------------------------------------------------------------------------
-SELF-GRADING
+Web Page
 -------------------------------------------------------------------------------
-* On the submission date, email your grade, on a scale of 0 to 100, to Harmony,
-  harmoli+cis565@seas.upenn.edu, with a one paragraph explanation.  Be concise and 
-  realistic.  Recall that we reserve 30 points as a sanity check to adjust your 
-  grade.  Your actual grade will be (0.7 * your grade) + (0.3 * our grade).  We 
-  hope to only use this in extreme cases when your grade does not realistically 
-  reflect your work - it is either too high or too low.  In most cases, we plan 
-  to give you the exact grade you suggest.
-* Projects are not weighted evenly, e.g., Project 0 doesn't count as much as 
-  the path tracer.  We will determine the weighting at the end of the semester 
-  based on the size of each project.
-
-
----
-SUBMISSION
----
-As with the previous projects, you should fork this project and work inside of
-your fork. Upon completion, commit your finished project back to your fork, and
-make a pull request to the master repository.  You should include a README.md
-file in the root directory detailing the following
-
-* A brief description of the project and specific features you implemented
-* At least one screenshot of your project running.
-* A link to a video of your project running.
-* Instructions for building and running your project if they differ from the
-  base code.
-* A performance writeup as detailed above.
-* A list of all third-party code used.
-* This Readme file edited as described above in the README section.
-
----
-ACKNOWLEDGEMENTS
----
-
-Many thanks to Cheng-Tso Lin, whose framework for CIS700 we used for this
-assignment.
-
-This project makes use of [three.js](http://www.threejs.org).
+http://wulinjiansheng.github.io/Project6-DeferredShader/
diff --git a/assets/deferred/colorPass.frag b/assets/deferred/colorPass.frag
diff --git a/assets/deferred/colorPass.vert b/assets/deferred/colorPass.vert
diff --git a/assets/deferred/diagnostic.frag b/assets/deferred/diagnostic.frag
diff --git a/assets/deferred/diffuse.frag b/assets/deferred/diffuse.frag
diff --git a/assets/deferred/normPass.frag b/assets/deferred/normPass.frag
diff --git a/assets/deferred/normPass.vert b/assets/deferred/normPass.vert