Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project 6 Submission #19

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Project 6 Submission #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c9a286e
finally...
radiumyang Nov 17, 2014
54ba520
Update README.md
radiumyang Nov 17, 2014
c06658f
Update README.md
radiumyang Nov 17, 2014
25e6d6d
Update README.md
radiumyang Nov 17, 2014
02b72a9
analysis
radiumyang Nov 17, 2014
85fba0c
Update README.md
radiumyang Nov 17, 2014
dd4fad4
cow obj
radiumyang Nov 17, 2014
b7d892a
stats update
radiumyang Nov 17, 2014
40cd4f5
live demo
radiumyang Nov 17, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 94 additions & 142 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,26 @@
------------------------------------------------------------------------------
CIS565: Project 6 -- Deferred Shader
-------------------------------------------------------------------------------
Fall 2014
-------------------------------------------------------------------------------
Due Wed, 11/12/2014 at Noon
-------------------------------------------------------------------------------
#### Live Demo (http://radiumyang.github.io/Project6-DeferredShader/)

[Please Open in FireFox Browser]

![a](results/all_shaders_cow.gif)
![a](results/all_shaders_sponza.gif)
![a](results/A_sponza.JPG)
-------------------------------------------------------------------------------
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
fine. And it 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
In this project, I wrote GLSL and OpenGL code to perform various tasks in a deferred lighting pipeline such as creating and writing to a G-Buffer, and some interesting shaders.

The keyboard controls are as follows:
WASDRF - Movement (along w the arrow keys)
Expand All @@ -69,150 +38,133 @@ WASDRF - Movement (along w the arrow keys)
* 2 - Normals
* 3 - Color
* 4 - Depth
* 0 - Full deferred pipeline
* 5 - Blinn-Phong Shader
* 6 - Bloom Shader
* 7 - Toon Shader
* 8 - Ambient Occlusion
* 9 - Pixelation Shader
* 0 - Frosted Glass Shader

There are also mouse controls for camera rotation.

-------------------------------------------------------------------------------
REQUIREMENTS:
Feature List:
-------------------------------------------------------------------------------

In this project, you are given code for:
In this project, I was 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)
I implemented:
* Bloom Shading
* "Toon" Shading (with basic silhouetting)
* Screen Space Ambient Occlusion
* Diffuse and Blinn-Phong shading
* Pixelation Shading
* Frosted Glass 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:
SHADERS:
-------------------------------------------------------------------------------
#### Blinn-Phong
![a](results/blinn_phong.JPG)
![a](results/blinn_phong_ao.JPG)

Since the code attempts to access files that are local to your computer, you
will either need to:
reference:

* Run your browser under modified security settings, or
* Create a simple local server that serves the files
http://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_shading_model


FIREFOX: change ``strict_origin_policy`` to false in about:config
#### Bloom
![a](results/bloom.JPG)

CHROME: run with the following argument : `--allow-file-access-from-files`
reference:

(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`)
http://prideout.net/archive/bloom/

* To check if you have set the flag properly, you can open chrome://version and
check under the flags
I used Guassian Function (http://mathworld.wolfram.com/GaussianFunction.html) to generate sample kernels. Currently in the program the kernel size is 19.

RUNNING A SIMPLE SERVER:
* float k = getKernelValue(sampletc_x, sampletc_y);
* colorSum += k * texture2D(u_shadeTex, sampletc).rgb;

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:
The color sum is the what we want for the result.

`python -m SimpleHTTPServer`
#### Toon
![a](results/toon2.JPG)
![a](results/toon_sponza.JPG)

-------------------------------------------------------------------------------
RESOURCES:
-------------------------------------------------------------------------------
reference:

The following are articles and resources that have been chosen to help give you
a sense of each of the effects:
http://en.wikibooks.org/wiki/GLSL_Programming/Unity/Toon_Shading

* 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)
For Toon shading, there are three main parts need to be considered:

-------------------------------------------------------------------------------
README
-------------------------------------------------------------------------------
All students must replace or augment the contents of this Readme.md in a clear
manner with the following:
* diffuse surface
* contour
* specular surface

* 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).
For diffuse/specular parts, I used similar lighting algorithm as Blinn-Phong to get the position of diffuse and specular positions on the object. Then I used the value of dot(Normal, LightDir) as a threshold to classify the diffuse part into 2 levels to make a little shadow effects, then set constant color for each level (one brighter and one darker).

-------------------------------------------------------------------------------
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.
For contour part, I referred to the algorithm here: http://www.forceflow.be/2010/04/14/contour-and-valley-detection-using-glsl/
The main idea is to calculate the intensity surrounding current pixel and compared them with the intensity of current pixel, if there are far more darker surrouding pixels then brighter ones, then we can tell that current pixel is on the contour.

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.
#### Ambient Occlusion (SSAO)
![a](results/AO.JPG)
![a](results/A_sponza.JPG)

reference:

* http://blog.evoserv.at/index.php/2012/12/hemispherical-screen-space-ambient-occlusion-ssao-for-deferred-renderers-using-openglglsl/
* http://john-chapman-graphics.blogspot.com/2013/01/ssao-tutorial.html

Main idea:
First, use the random function (http://stackoverflow.com/questions/4200224/random-noise-functions-for-glsl) to generate an array of sample kernels within the unit hemisphere. Then scale the kernel values to make the samples evenly distributed.After getting the sample kernels, we can use the kernel as an offset to create a sample point in the vicinity of current pixel:

* vec2 sampleTexCoord = current_texcoord + (kernel * radius);

Then calculate sample point's depth, normal and position, and get the vector (SAMPLE-DIRECTION) from original position to the sample point. Then we can get the angle between SURFACE-NORMAL and SAMPLE-DIRECTION, and the distance between SURFACE-POSITION and SAMPLE-POSITION:

* float Angle = max(dot(viewNormal, sampleDir), 0);
* float Distance = distance(viewPos, samplePos);

Then the AO value += Angle*Distance. Loop all the samples, and the average value of AO is what we have as result.



#### Pixelation
![a](results/pixel.JPG)
![a](results/pixel_sponza.JPG)

reference:

http://www.geeks3d.com/20101029/shader-library-pixelation-post-processing-effect-glsl/

I also implemented pixelation shader, with current tilesize = 6. Thus, every 6*6 pixels of the original canvas will combine to be a large "PIXEL" drawing on the canvas. All the 36 original pixels in the large PIXEL will share the same color.

#### Frosted Glass
![a](results/glass.JPG)
![a](results/glass_sponze.JPG)

reference:

http://www.geeks3d.com/20101228/shader-library-frosted-glass-post-processing-shader-glsl/

To make the glass looks frosted, firstly I randomle generated a noise, then drawed splines on the surface of the object based on the value of the noise point.

-------------------------------------------------------------------------------
THIRD PARTY CODE POLICY
RUNNING THE CODE:
-------------------------------------------------------------------------------
* 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.

FIREFOX: change ``strict_origin_policy`` to false in about:config

-------------------------------------------------------------------------------
SELF-GRADING
PERFORMANCE ANALYSIS:
-------------------------------------------------------------------------------
* On the submission date, email your grade, on a scale of 0 to 100, to Harmony,
[email protected], 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.

![a](results/fps.JPG)

---
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
Expand Down
Loading