diff --git a/1000lights.png b/1000lights.png new file mode 100644 index 0000000..43e5569 Binary files /dev/null and b/1000lights.png differ diff --git a/200Lights_bloom.jpg b/200Lights_bloom.jpg new file mode 100755 index 0000000..2a2bb68 Binary files /dev/null and b/200Lights_bloom.jpg differ diff --git a/200Lights_original.jpg b/200Lights_original.jpg new file mode 100755 index 0000000..c96efef Binary files /dev/null and b/200Lights_original.jpg differ diff --git a/250lights.png b/250lights.png new file mode 100644 index 0000000..8da75ac Binary files /dev/null and b/250lights.png differ diff --git a/350lights.png b/350lights.png new file mode 100644 index 0000000..548d892 Binary files /dev/null and b/350lights.png differ diff --git a/500lights.png b/500lights.png new file mode 100644 index 0000000..0bd9b58 Binary files /dev/null and b/500lights.png differ diff --git a/README.md b/README.md old mode 100644 new mode 100755 index da4c7e1..f9956de --- a/README.md +++ b/README.md @@ -1,224 +1,58 @@ ------------------------------------------------------------------------------ CIS565: Project 6 -- Deferred Shader ------------------------------------------------------------------------------- -Fall 2014 +Jiawei Wang ------------------------------------------------------------------------------- -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: -WASDRF - Movement (along w the arrow keys) -* W - Zoom in -* S - Zoom out -* A - Left -* D - Right -* R - Up -* F - Down -* ^ - Up -* v - Down -* < - Left -* > - Right -* 1 - World Space Position -* 2 - Normals -* 3 - Color -* 4 - Depth -* 0 - Full deferred pipeline - -There are also mouse controls for camera rotation. - -------------------------------------------------------------------------------- -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` +Overview +----- +![](original.jpg) -(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`) +In this project, we implemented the deferred shading pipeline with post processing effects, including Toon-Shading, Bloom and multiple lights effect. -* To check if you have set the flag properly, you can open chrome://version and - check under the flags +Given the pipeline we have all information stored in the g-buffer, including position, normal, color, and depth. We can see these individual buffer as color shown on the diagnostic mode, by pressing keyboard '1', '2', '3', '4' to enable the diagnoses.The post processing special effects are all implemented in the diffuse.frag after the diffuse and phong shading. -RUNNING A SIMPLE SERVER: +Post Processing Special Effects +---------- + - Full deferred pipeline with diffuse and phong shading + ![](diffuse_original.png) + + - Toon Shading + ![](toon_basic.jpg) -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: + - Bloom Shading + ![](bloom.jpg) -`python -m SimpleHTTPServer` + - Multiple Lights (40 lights) + - Original (60fps) | Bloom Effect (27fps) + :-------------------------:|:-------------------------: + ![](multi_40lights_original.jpg) | ![](multi_40lights_bloom.jpg) + -------------------------------------------------------------------------------- -RESOURCES: -------------------------------------------------------------------------------- +---- +Performance +---- -The following are articles and resources that have been chosen to help give you -a sense of each of the effects: +I performed the tests for the orignal diffuse shading and bloom shading under multiple lights conditions. + - Multiple Lights (200 lights) + - Original (51fps) | Bloom Effect (26fps) + :-------------------------:|:-------------------------: + ![](200Lights_original.jpg) | ![](200Lights_bloom.jpg) -* 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) +- Comparation (250 lights & 350 lights) + ![](fps_compare1.PNG) -------------------------------------------------------------------------------- -README -------------------------------------------------------------------------------- -All students must replace or augment the contents of this Readme.md in a clear -manner with the following: +- Comparation (500 lights & 1000 lights) + ![](fps_compare2.PNG) -* 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. +From the data collected, we can see the fps drops when bloom shading added and also with the increasing number of lights. +![](chart.png) -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 -------------------------------------------------------------------------------- -* 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. +Toon Shading Source Description: [toon algorithm](http://www.lighthouse3d.com/tutorials/glsl-tutorial/toon-shader-version-ii/) This project makes use of [three.js](http://www.threejs.org). diff --git a/assets/deferred/colorPass.frag b/assets/deferred/colorPass.frag old mode 100644 new mode 100755 diff --git a/assets/deferred/colorPass.vert b/assets/deferred/colorPass.vert old mode 100644 new mode 100755 diff --git a/assets/deferred/diagnostic.frag b/assets/deferred/diagnostic.frag old mode 100644 new mode 100755 diff --git a/assets/deferred/diffuse.frag b/assets/deferred/diffuse.frag old mode 100644 new mode 100755 diff --git a/assets/deferred/normPass.frag b/assets/deferred/normPass.frag old mode 100644 new mode 100755 diff --git a/assets/deferred/normPass.vert b/assets/deferred/normPass.vert old mode 100644 new mode 100755 diff --git a/assets/deferred/pass.frag b/assets/deferred/pass.frag old mode 100644 new mode 100755 diff --git a/assets/deferred/pass.vert b/assets/deferred/pass.vert old mode 100644 new mode 100755 diff --git a/assets/deferred/posPass.frag b/assets/deferred/posPass.frag old mode 100644 new mode 100755 diff --git a/assets/deferred/posPass.vert b/assets/deferred/posPass.vert old mode 100644 new mode 100755 diff --git a/assets/deferred/post.frag b/assets/deferred/post.frag old mode 100644 new mode 100755 diff --git a/assets/deferred/quad.vert b/assets/deferred/quad.vert old mode 100644 new mode 100755 diff --git a/assets/forward.frag b/assets/forward.frag old mode 100644 new mode 100755 diff --git a/assets/forward.vert b/assets/forward.vert old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/banner.mtl b/assets/models/crytek-sponza/banner.mtl old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/banner.obj b/assets/models/crytek-sponza/banner.obj old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/copyright.txt b/assets/models/crytek-sponza/copyright.txt old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/screenshot.jpg b/assets/models/crytek-sponza/screenshot.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/sponza.am.any b/assets/models/crytek-sponza/sponza.am.any old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/sponza.mtl b/assets/models/crytek-sponza/sponza.mtl old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/sponza.obj b/assets/models/crytek-sponza/sponza.obj old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/background.jpg b/assets/models/crytek-sponza/textures/background.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/background.tga b/assets/models/crytek-sponza/textures/background.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/backgroundBGR.jpg b/assets/models/crytek-sponza/textures/backgroundBGR.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/backgroundBGR.tga b/assets/models/crytek-sponza/textures/backgroundBGR.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/background_bump.png b/assets/models/crytek-sponza/textures/background_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/background_ddn.jpg b/assets/models/crytek-sponza/textures/background_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/background_ddn.tga b/assets/models/crytek-sponza/textures/background_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/background_ddn.tif b/assets/models/crytek-sponza/textures/background_ddn.tif old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/chain_texture.jpg b/assets/models/crytek-sponza/textures/chain_texture.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/chain_texture.tga b/assets/models/crytek-sponza/textures/chain_texture.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/chain_texture_bump.png b/assets/models/crytek-sponza/textures/chain_texture_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/chain_texture_ddn.jpg b/assets/models/crytek-sponza/textures/chain_texture_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/chain_texture_ddn.tga b/assets/models/crytek-sponza/textures/chain_texture_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/chain_texture_mask.jpg b/assets/models/crytek-sponza/textures/chain_texture_mask.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/chain_texture_mask.png b/assets/models/crytek-sponza/textures/chain_texture_mask.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/chain_texture_mask.tga b/assets/models/crytek-sponza/textures/chain_texture_mask.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/gi_flag.jpg b/assets/models/crytek-sponza/textures/gi_flag.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/gi_flag.tga b/assets/models/crytek-sponza/textures/gi_flag.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/lion.jpg b/assets/models/crytek-sponza/textures/lion.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/lion.tga b/assets/models/crytek-sponza/textures/lion.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/lion2_bump.png b/assets/models/crytek-sponza/textures/lion2_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/lion2_ddn.jpg b/assets/models/crytek-sponza/textures/lion2_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/lion2_ddn.tga b/assets/models/crytek-sponza/textures/lion2_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/lion_bump.png b/assets/models/crytek-sponza/textures/lion_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/lion_ddn.jpg b/assets/models/crytek-sponza/textures/lion_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/lion_ddn.tga b/assets/models/crytek-sponza/textures/lion_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/spnza_bricks_a_bump.png b/assets/models/crytek-sponza/textures/spnza_bricks_a_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/spnza_bricks_a_ddn.jpg b/assets/models/crytek-sponza/textures/spnza_bricks_a_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/spnza_bricks_a_ddn.tga b/assets/models/crytek-sponza/textures/spnza_bricks_a_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/spnza_bricks_a_diff.jpg b/assets/models/crytek-sponza/textures/spnza_bricks_a_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/spnza_bricks_a_diff.tga b/assets/models/crytek-sponza/textures/spnza_bricks_a_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/spnza_bricks_a_spec.jpg b/assets/models/crytek-sponza/textures/spnza_bricks_a_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/spnza_bricks_a_spec.tga b/assets/models/crytek-sponza/textures/spnza_bricks_a_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_arch_bump.png b/assets/models/crytek-sponza/textures/sponza_arch_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_arch_ddn.jpg b/assets/models/crytek-sponza/textures/sponza_arch_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_arch_ddn.tga b/assets/models/crytek-sponza/textures/sponza_arch_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_arch_diff.jpg b/assets/models/crytek-sponza/textures/sponza_arch_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_arch_diff.tga b/assets/models/crytek-sponza/textures/sponza_arch_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_arch_spec.jpg b/assets/models/crytek-sponza/textures/sponza_arch_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_arch_spec.tga b/assets/models/crytek-sponza/textures/sponza_arch_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_ceiling_a_diff.jpg b/assets/models/crytek-sponza/textures/sponza_ceiling_a_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_ceiling_a_diff.tga b/assets/models/crytek-sponza/textures/sponza_ceiling_a_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_ceiling_a_spec.jpg b/assets/models/crytek-sponza/textures/sponza_ceiling_a_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_ceiling_a_spec.tga b/assets/models/crytek-sponza/textures/sponza_ceiling_a_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_a_bump.png b/assets/models/crytek-sponza/textures/sponza_column_a_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_a_ddn.jpg b/assets/models/crytek-sponza/textures/sponza_column_a_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_a_ddn.tga b/assets/models/crytek-sponza/textures/sponza_column_a_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_a_diff.jpg b/assets/models/crytek-sponza/textures/sponza_column_a_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_a_diff.tga b/assets/models/crytek-sponza/textures/sponza_column_a_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_a_spec.jpg b/assets/models/crytek-sponza/textures/sponza_column_a_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_a_spec.tga b/assets/models/crytek-sponza/textures/sponza_column_a_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_b_bump.png b/assets/models/crytek-sponza/textures/sponza_column_b_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_b_ddn.jpg b/assets/models/crytek-sponza/textures/sponza_column_b_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_b_ddn.tga b/assets/models/crytek-sponza/textures/sponza_column_b_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_b_diff.jpg b/assets/models/crytek-sponza/textures/sponza_column_b_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_b_diff.tga b/assets/models/crytek-sponza/textures/sponza_column_b_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_b_spec.jpg b/assets/models/crytek-sponza/textures/sponza_column_b_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_b_spec.tga b/assets/models/crytek-sponza/textures/sponza_column_b_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_c_bump.png b/assets/models/crytek-sponza/textures/sponza_column_c_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_c_ddn.jpg b/assets/models/crytek-sponza/textures/sponza_column_c_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_c_ddn.tga b/assets/models/crytek-sponza/textures/sponza_column_c_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_c_diff.jpg b/assets/models/crytek-sponza/textures/sponza_column_c_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_c_diff.tga b/assets/models/crytek-sponza/textures/sponza_column_c_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_c_spec.jpg b/assets/models/crytek-sponza/textures/sponza_column_c_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_column_c_spec.tga b/assets/models/crytek-sponza/textures/sponza_column_c_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_curtain_blue_diff.jpg b/assets/models/crytek-sponza/textures/sponza_curtain_blue_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_curtain_blue_diff.tga b/assets/models/crytek-sponza/textures/sponza_curtain_blue_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_curtain_diff.jpg b/assets/models/crytek-sponza/textures/sponza_curtain_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_curtain_diff.tga b/assets/models/crytek-sponza/textures/sponza_curtain_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_curtain_green_diff.jpg b/assets/models/crytek-sponza/textures/sponza_curtain_green_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_curtain_green_diff.tga b/assets/models/crytek-sponza/textures/sponza_curtain_green_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_details_diff.jpg b/assets/models/crytek-sponza/textures/sponza_details_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_details_diff.tga b/assets/models/crytek-sponza/textures/sponza_details_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_details_spec.jpg b/assets/models/crytek-sponza/textures/sponza_details_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_details_spec.tga b/assets/models/crytek-sponza/textures/sponza_details_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_fabric_blue_diff.jpg b/assets/models/crytek-sponza/textures/sponza_fabric_blue_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_fabric_blue_diff.tga b/assets/models/crytek-sponza/textures/sponza_fabric_blue_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_fabric_diff.jpg b/assets/models/crytek-sponza/textures/sponza_fabric_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_fabric_diff.tga b/assets/models/crytek-sponza/textures/sponza_fabric_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_fabric_green_diff.jpg b/assets/models/crytek-sponza/textures/sponza_fabric_green_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_fabric_green_diff.tga b/assets/models/crytek-sponza/textures/sponza_fabric_green_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_fabric_spec.jpg b/assets/models/crytek-sponza/textures/sponza_fabric_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_fabric_spec.tga b/assets/models/crytek-sponza/textures/sponza_fabric_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_flagpole_diff.jpg b/assets/models/crytek-sponza/textures/sponza_flagpole_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_flagpole_diff.tga b/assets/models/crytek-sponza/textures/sponza_flagpole_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_flagpole_spec.jpg b/assets/models/crytek-sponza/textures/sponza_flagpole_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_flagpole_spec.tga b/assets/models/crytek-sponza/textures/sponza_flagpole_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_floor_a_diff.jpg b/assets/models/crytek-sponza/textures/sponza_floor_a_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_floor_a_diff.tga b/assets/models/crytek-sponza/textures/sponza_floor_a_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_floor_a_spec.jpg b/assets/models/crytek-sponza/textures/sponza_floor_a_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_floor_a_spec.tga b/assets/models/crytek-sponza/textures/sponza_floor_a_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_roof_diff.jpg b/assets/models/crytek-sponza/textures/sponza_roof_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_roof_diff.tga b/assets/models/crytek-sponza/textures/sponza_roof_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_thorn_bump.png b/assets/models/crytek-sponza/textures/sponza_thorn_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_thorn_ddn.jpg b/assets/models/crytek-sponza/textures/sponza_thorn_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_thorn_ddn.tga b/assets/models/crytek-sponza/textures/sponza_thorn_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_thorn_diff.jpg b/assets/models/crytek-sponza/textures/sponza_thorn_diff.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_thorn_diff.tga b/assets/models/crytek-sponza/textures/sponza_thorn_diff.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_thorn_mask.jpg b/assets/models/crytek-sponza/textures/sponza_thorn_mask.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_thorn_mask.png b/assets/models/crytek-sponza/textures/sponza_thorn_mask.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_thorn_mask.tga b/assets/models/crytek-sponza/textures/sponza_thorn_mask.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_thorn_spec.jpg b/assets/models/crytek-sponza/textures/sponza_thorn_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/sponza_thorn_spec.tga b/assets/models/crytek-sponza/textures/sponza_thorn_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_bump.png b/assets/models/crytek-sponza/textures/vase_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_ddn.jpg b/assets/models/crytek-sponza/textures/vase_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_ddn.tga b/assets/models/crytek-sponza/textures/vase_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_dif.jpg b/assets/models/crytek-sponza/textures/vase_dif.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_dif.tga b/assets/models/crytek-sponza/textures/vase_dif.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_hanging.jpg b/assets/models/crytek-sponza/textures/vase_hanging.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_hanging.tga b/assets/models/crytek-sponza/textures/vase_hanging.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_plant.jpg b/assets/models/crytek-sponza/textures/vase_plant.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_plant.tga b/assets/models/crytek-sponza/textures/vase_plant.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_plant_mask.jpg b/assets/models/crytek-sponza/textures/vase_plant_mask.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_plant_mask.png b/assets/models/crytek-sponza/textures/vase_plant_mask.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_plant_mask.tga b/assets/models/crytek-sponza/textures/vase_plant_mask.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_plant_spec.jpg b/assets/models/crytek-sponza/textures/vase_plant_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_plant_spec.tga b/assets/models/crytek-sponza/textures/vase_plant_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_round.jpg b/assets/models/crytek-sponza/textures/vase_round.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_round.tga b/assets/models/crytek-sponza/textures/vase_round.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_round_bump.png b/assets/models/crytek-sponza/textures/vase_round_bump.png old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_round_ddn.jpg b/assets/models/crytek-sponza/textures/vase_round_ddn.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_round_ddn.tga b/assets/models/crytek-sponza/textures/vase_round_ddn.tga old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_round_spec.jpg b/assets/models/crytek-sponza/textures/vase_round_spec.jpg old mode 100644 new mode 100755 diff --git a/assets/models/crytek-sponza/textures/vase_round_spec.tga b/assets/models/crytek-sponza/textures/vase_round_spec.tga old mode 100644 new mode 100755 diff --git a/assets/models/suzanne.obj b/assets/models/suzanne.obj old mode 100644 new mode 100755 diff --git a/assets/pass.frag b/assets/pass.frag old mode 100644 new mode 100755 diff --git a/assets/pass.vert b/assets/pass.vert old mode 100644 new mode 100755 diff --git a/assets/shader/deferred/colorPass.frag b/assets/shader/deferred/colorPass.frag old mode 100644 new mode 100755 index c151235..3fd3cdc --- a/assets/shader/deferred/colorPass.frag +++ b/assets/shader/deferred/colorPass.frag @@ -3,5 +3,5 @@ precision highp float; uniform sampler2D u_sampler; void main(void){ - gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); + gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); } diff --git a/assets/shader/deferred/colorPass.vert b/assets/shader/deferred/colorPass.vert old mode 100644 new mode 100755 diff --git a/assets/shader/deferred/diagnostic.frag b/assets/shader/deferred/diagnostic.frag old mode 100644 new mode 100755 index d47a5e9..40f6c15 --- a/assets/shader/deferred/diagnostic.frag +++ b/assets/shader/deferred/diagnostic.frag @@ -22,6 +22,7 @@ float linearizeDepth( float exp_depth, float near, float far ){ void main() { + //v_texcoord = 1.0- v_texcoord.x; vec3 normal = texture2D( u_normalTex, v_texcoord ).xyz; vec3 position = texture2D( u_positionTex, v_texcoord ).xyz; vec4 color = texture2D( u_colorTex, v_texcoord ); diff --git a/assets/shader/deferred/diffuse.frag b/assets/shader/deferred/diffuse.frag old mode 100644 new mode 100755 index ef0c5fc..ae2b7d9 --- a/assets/shader/deferred/diffuse.frag +++ b/assets/shader/deferred/diffuse.frag @@ -9,15 +9,125 @@ uniform float u_zFar; uniform float u_zNear; uniform int u_displayType; +uniform mat4 u_modelview; +uniform float u_time; + varying vec2 v_texcoord; +#define Halfnumberoflights 20.0 +#define BlurNum 10.0 +#define WIDTH 960 +#define HEIGHT 540 +#define PI 3.1415926 + +#define Multi_Lights false +#define Toon_Shading_Basic false +#define Bloom_Shading false +#define Screen_Space_Ambient_Occlusion false + float linearizeDepth( float exp_depth, float near, float far ){ return ( 2.0 * near ) / ( far + near - exp_depth * ( far - near ) ); } +float randF(float x){ + return fract(sin(x*23.131411231) * 43758.5453); +} + +float gaussian(int i, float width) { + return exp(-abs(float(i))/width); +} + void main() { // Write a diffuse shader and a Blinn-Phong shader // NOTE : You may need to add your own normals to fulfill the second's requirements - gl_FragColor = vec4(texture2D(u_colorTex, v_texcoord).rgb, 1.0); + //gl_FragColor = vec4(texture2D(u_colorTex, v_texcoord).rgb, 1.0); + vec2 fixed_coord = v_texcoord; + fixed_coord.x = 1.0-fixed_coord.x; + + vec3 vpos = texture2D(u_positionTex, fixed_coord).rgb; + vec3 vnormal = normalize(texture2D(u_normalTex, fixed_coord).rgb); + + //light1 + vec3 light_pos = vec3(0.0, 3.0, 5.0); + light_pos = (u_modelview*vec4(light_pos,1.0)).xyz; + vec3 light_col = vec3(1.0, 1.0, 1.0); + + vec3 lightDir = normalize(light_pos - vpos); + vec3 reflection = reflect(-lightDir, vnormal); + vec3 view = vec3(0.0, 0.0, -1.0); + + float intensity = dot(lightDir, vnormal); + float diffuse = clamp(intensity, 0.0, 1.0); + float specular = pow(clamp(dot(-view, reflection), 0.0, 1.0), 10.0); + + vec3 color = 0.6*diffuse*texture2D(u_colorTex, fixed_coord).rgb*light_col + 0.4*specular*light_col; + + + //Test1---additional multiple lights + if(Multi_Lights){ + for(float i=-Halfnumberoflights; i 0.95) + color = vec3(1.0,0.5,0.5); + else if (intensity > 0.5) + color = vec3(0.6,0.3,0.3); + else if (intensity > 0.25) + color = vec3(0.4,0.2,0.2); + else + color = vec3(0.2,0.1,0.1); + } + + //Test3---Bloom shading + //bloom + if(Bloom_Shading){ + float pixHeight = 1.0/float(HEIGHT); + float pixWidth = 1.0/float(WIDTH); + vec2 right_dir = vec2(pixWidth, 0.0); + vec2 up_dir = vec2(0.0, pixHeight); + + for (int i = -10; i <= 10; i++) { + for (int j = -10; j <= 10; j++) { + color += gaussian(i, 50.0) * gaussian(j, 50.0) * texture2D(u_colorTex, fixed_coord + vec2(pixWidth*float(i), pixHeight*float(j))).rgb / 1024.0; + } + } + } + + vec4 finalcolor = vec4(color, 1.0); + + //Test4---SSAO---not finished + //ssao + float ambFactor = 1.0; + if(Screen_Space_Ambient_Occlusion){ + + vec3 center = vec3( fixed_coord, texture2D(u_depthTex,fixed_coord).r); + float totalSample = 0.0; + float visibleSample = 0.0; + + //ambFactor = visibleSample/totalSample; + finalcolor *= ambFactor; + + } + + + gl_FragColor = finalcolor; + } diff --git a/assets/shader/deferred/normPass.frag b/assets/shader/deferred/normPass.frag old mode 100644 new mode 100755 index b41d6ed..5df3879 --- a/assets/shader/deferred/normPass.frag +++ b/assets/shader/deferred/normPass.frag @@ -3,5 +3,5 @@ precision highp float; varying vec3 v_normal; void main(void){ - gl_FragColor = vec4(v_normal, 1.0); + gl_FragColor = vec4(normalize(v_normal), 1.0); } diff --git a/assets/shader/deferred/normPass.vert b/assets/shader/deferred/normPass.vert old mode 100644 new mode 100755 diff --git a/assets/shader/deferred/pass.frag b/assets/shader/deferred/pass.frag old mode 100644 new mode 100755 diff --git a/assets/shader/deferred/pass.vert b/assets/shader/deferred/pass.vert old mode 100644 new mode 100755 diff --git a/assets/shader/deferred/posPass.frag b/assets/shader/deferred/posPass.frag old mode 100644 new mode 100755 diff --git a/assets/shader/deferred/posPass.vert b/assets/shader/deferred/posPass.vert old mode 100644 new mode 100755 index ece8cc4..8b0fdf2 --- a/assets/shader/deferred/posPass.vert +++ b/assets/shader/deferred/posPass.vert @@ -9,7 +9,9 @@ varying vec4 v_pos; varying float v_depth; void main(void){ - gl_Position = u_mvp * vec4( a_pos, 1.0 ); + +gl_Position = u_mvp * vec4( a_pos.x, a_pos.y, a_pos.z , 1.0 ); v_pos = u_modelview * vec4( a_pos, 1.0 ); + v_depth = ( gl_Position.z / gl_Position.w + 1.0 ) / 2.0; } diff --git a/assets/shader/deferred/post.frag b/assets/shader/deferred/post.frag old mode 100644 new mode 100755 index 52edda2..a146085 --- a/assets/shader/deferred/post.frag +++ b/assets/shader/deferred/post.frag @@ -1,9 +1,24 @@ precision highp float; uniform sampler2D u_shadeTex; +uniform sampler2D u_positionTex; +uniform sampler2D u_normalTex; +uniform sampler2D u_colorTex; +uniform sampler2D u_depthTex; + +uniform float u_zFar; +uniform float u_zNear; +uniform int u_displayType; //keys input +uniform mat4 u_modelview; varying vec2 v_texcoord; +#define Toon_Shading_Basic 1 +#define Toon_Shading 2 +#define Bloom_Shading 3 +#define Screen_Space_Ambient_Occlusion 4 +#define Blinn_Phong_Shading 5 + float linearizeDepth( float exp_depth, float near, float far ){ return ( 2.0 * near ) / ( far + near - exp_depth * ( far - near ) ); } @@ -13,5 +28,13 @@ void main() // Currently acts as a pass filter that immmediately renders the shaded texture // Fill in post-processing as necessary HERE // NOTE : You may choose to use a key-controlled switch system to display one feature at a time - gl_FragColor = vec4(texture2D( u_shadeTex, v_texcoord).rgb, 1.0); + //gl_FragColor = vec4(texture2D( u_shadeTex, v_texcoord).rgb, 1.0); + + vec2 fixed_coord = v_texcoord; + fixed_coord.x = 1.0-fixed_coord.x; + vec3 this_color = texture2D( u_shadeTex, fixed_coord).rgb; //from diffuse.frag color result + + vec4 finalcolor = vec4(this_color, 1.0); + + gl_FragColor = finalcolor; } diff --git a/assets/shader/deferred/quad.vert b/assets/shader/deferred/quad.vert old mode 100644 new mode 100755 diff --git a/assets/shader/forward.frag b/assets/shader/forward.frag old mode 100644 new mode 100755 diff --git a/assets/shader/forward.vert b/assets/shader/forward.vert old mode 100644 new mode 100755 diff --git a/assets/shader/pass.frag b/assets/shader/pass.frag old mode 100644 new mode 100755 diff --git a/assets/shader/pass.vert b/assets/shader/pass.vert old mode 100644 new mode 100755 diff --git a/bloom.jpg b/bloom.jpg new file mode 100755 index 0000000..f0f64d2 Binary files /dev/null and b/bloom.jpg differ diff --git a/chart.png b/chart.png new file mode 100644 index 0000000..7b47f9a Binary files /dev/null and b/chart.png differ diff --git a/diffuse_original.png b/diffuse_original.png new file mode 100644 index 0000000..8a15b40 Binary files /dev/null and b/diffuse_original.png differ diff --git a/fps_compare1.PNG b/fps_compare1.PNG new file mode 100644 index 0000000..9e60db8 Binary files /dev/null and b/fps_compare1.PNG differ diff --git a/fps_compare2.PNG b/fps_compare2.PNG new file mode 100644 index 0000000..cc646d3 Binary files /dev/null and b/fps_compare2.PNG differ diff --git a/index.html b/index.html old mode 100644 new mode 100755 index dd0ffef..493d731 --- a/index.html +++ b/index.html @@ -22,6 +22,8 @@ + + diff --git a/js/constants.js b/js/constants.js old mode 100644 new mode 100755 diff --git a/js/core/camera-backup.js b/js/core/camera-backup.js old mode 100644 new mode 100755 diff --git a/js/core/camera.js b/js/core/camera.js old mode 100644 new mode 100755 diff --git a/js/core/cameraInteractor.js b/js/core/cameraInteractor.js old mode 100644 new mode 100755 diff --git a/js/core/fbo-util.js b/js/core/fbo-util.js old mode 100644 new mode 100755 index 9124fc1..42abe4c --- a/js/core/fbo-util.js +++ b/js/core/fbo-util.js @@ -111,7 +111,6 @@ CIS565WEBGLCORE.createFBO = function(){ gl.bindFramebuffer(gl.FRAMEBUFFER, null); fbo[FBO_PBUFFER] = gl.createFramebuffer(); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTex, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo[FBO_PBUFFER]); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textures[4], 0); @@ -125,7 +124,6 @@ CIS565WEBGLCORE.createFBO = function(){ // Set up GBuffer Normal fbo[FBO_GBUFFER_NORMAL] = gl.createFramebuffer(); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTex, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo[FBO_GBUFFER_NORMAL]); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textures[1], 0); @@ -140,7 +138,6 @@ CIS565WEBGLCORE.createFBO = function(){ // Set up GBuffer Color fbo[FBO_GBUFFER_COLOR] = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fbo[FBO_GBUFFER_COLOR]); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTex, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textures[2], 0); FBOstatus = gl.checkFramebufferStatus(gl.FRAMEBUFFER); diff --git a/js/core/obj-loader.js b/js/core/obj-loader.js old mode 100644 new mode 100755 diff --git a/js/core/shader-util.js b/js/core/shader-util.js old mode 100644 new mode 100755 diff --git a/js/core/webgl-util.js b/js/core/webgl-util.js old mode 100644 new mode 100755 diff --git a/js/ext/math/gl-matrix.js b/js/ext/math/gl-matrix.js old mode 100644 new mode 100755 diff --git a/js/ext/threejs/MTLLoader.js b/js/ext/threejs/MTLLoader.js old mode 100644 new mode 100755 diff --git a/js/ext/threejs/OBJLoader.js b/js/ext/threejs/OBJLoader.js old mode 100644 new mode 100755 diff --git a/js/ext/threejs/OBJMTLLoader.js b/js/ext/threejs/OBJMTLLoader.js old mode 100644 new mode 100755 diff --git a/js/ext/threejs/three.js b/js/ext/threejs/three.js old mode 100644 new mode 100755 diff --git a/js/lighting.js b/js/lighting.js old mode 100644 new mode 100755 diff --git a/js/main.js b/js/main.js old mode 100644 new mode 100755 index ebf2dc4..1eb4d1f --- a/js/main.js +++ b/js/main.js @@ -32,461 +32,514 @@ var zNear = 20; var zFar = 2000; var texToDisplay = 1; +var u_timeLocation; +var u_time = 0; + +var stats; +var stats_ms; + var main = function (canvasId, messageId) { - var canvas; - // Initialize WebGL - initGL(canvasId, messageId); - // Set up camera - initCamera(canvas); - // Set up FBOs - initFramebuffer(); + var canvas; + + // Initialize WebGL + initGL(canvasId, messageId); + + // Set up camera + initCamera(canvas); - // Set up models - initObjs(); + // Set up FBOs + initFramebuffer(); - // Set up shaders - initShaders(); + // Set up models + initObjs(); - // Register our render callbacks - CIS565WEBGLCORE.render = render; - CIS565WEBGLCORE.renderLoop = renderLoop; + // Set up shaders + initShaders(); - // Start the rendering loop - CIS565WEBGLCORE.run(gl); + stats = new Stats(); + stats_ms = new Stats(); + stats_ms.setMode(1); + stats.domElement.style.position = 'absolute'; + //stats.domElement.style.top = '10px'; + document.body.appendChild(stats.domElement); + stats_ms.domElement.style.position = 'relative'; + stats_ms.domElement.style.top = '49px'; + document.body.appendChild(stats_ms.domElement); + + // Register our render callbacks + CIS565WEBGLCORE.render = render; + CIS565WEBGLCORE.renderLoop = renderLoop; + + // Start the rendering loop + CIS565WEBGLCORE.run(gl); }; var renderLoop = function () { - window.requestAnimationFrame(renderLoop); - render(); + window.requestAnimationFrame(renderLoop); + u_time = u_time + 1.0; + gl.uniform1f(u_timeLocation, u_time); + stats.update(); + stats_ms.update(); + render(); }; var render = function () { - if (fbo.isMultipleTargets()) { - renderPass(); - } else { - renderMulti(); - } - - if (!isDiagnostic) { - renderShade(); - renderPost(); - } else { - renderDiagnostic(); - } - - gl.useProgram(null); -}; - -var drawModel = function (program, mask) { - // Bind attributes - for(var i = 0; i < model.numGroups(); i++) { - if (mask & 0x1) { - gl.bindBuffer(gl.ARRAY_BUFFER, model.vbo(i)); - gl.vertexAttribPointer(program.aVertexPosLoc, 3, gl.FLOAT, false, 0, 0); - gl.enableVertexAttribArray(program.aVertexPosLoc); + if (fbo.isMultipleTargets()) { + renderPass(); + } else { + renderMulti(); } - if (mask & 0x2) { - gl.bindBuffer(gl.ARRAY_BUFFER, model.nbo(i)); - gl.vertexAttribPointer(program.aVertexNormalLoc, 3, gl.FLOAT, false, 0, 0); - gl.enableVertexAttribArray(program.aVertexNormalLoc); + if (!isDiagnostic) { //key 0 to run the pipeline + renderShade(); + renderPost(); + } else { + renderDiagnostic(); //key 1~8 to diagnos } - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, model.ibo(i)); - gl.drawElements(gl.TRIANGLES, model.iboLength(i), gl.UNSIGNED_SHORT, 0); - } + gl.useProgram(null); +}; - if (mask & 0x1) gl.disableVertexAttribArray(program.aVertexPosLoc); - if (mask & 0x2) gl.disableVertexAttribArray(program.aVertexNormalLoc); +var drawModel = function (program, mask) { + // Bind attributes + for (var i = 0; i < model.numGroups() ; i++) { + if (mask & 0x1) { + gl.bindBuffer(gl.ARRAY_BUFFER, model.vbo(i)); + gl.vertexAttribPointer(program.aVertexPosLoc, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(program.aVertexPosLoc); + } + + if (mask & 0x2) { + gl.bindBuffer(gl.ARRAY_BUFFER, model.nbo(i)); + gl.vertexAttribPointer(program.aVertexNormalLoc, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(program.aVertexNormalLoc); + } + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, model.ibo(i)); + gl.drawElements(gl.TRIANGLES, model.iboLength(i), gl.UNSIGNED_SHORT, 0); + } - gl.bindBuffer(gl.ARRAY_BUFFER, null); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); + if (mask & 0x1) gl.disableVertexAttribArray(program.aVertexPosLoc); + if (mask & 0x2) gl.disableVertexAttribArray(program.aVertexNormalLoc); + + gl.bindBuffer(gl.ARRAY_BUFFER, null); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); }; var drawQuad = function (program) { - gl.bindBuffer(gl.ARRAY_BUFFER, quad.vbo); - gl.vertexAttribPointer(program.aVertexPosLoc, 3, gl.FLOAT, false, 0, 0); - gl.enableVertexAttribArray(program.aVertexPosLoc); - - gl.bindBuffer(gl.ARRAY_BUFFER, quad.tbo); - gl.vertexAttribPointer(program.aVertexTexcoordLoc, 2, gl.FLOAT, false, 0, 0); - gl.enableVertexAttribArray(program.aVertexTexcoordLoc); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, quad.ibo); - gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); - - gl.disableVertexAttribArray(program.aVertexPosLoc); - gl.disableVertexAttribArray(program.aVertexTexcoordLoc); - - gl.bindBuffer(gl.ARRAY_BUFFER, null); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); + gl.bindBuffer(gl.ARRAY_BUFFER, quad.vbo); + gl.vertexAttribPointer(program.aVertexPosLoc, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(program.aVertexPosLoc); + + gl.bindBuffer(gl.ARRAY_BUFFER, quad.tbo); + gl.vertexAttribPointer(program.aVertexTexcoordLoc, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(program.aVertexTexcoordLoc); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, quad.ibo); + gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); + + gl.disableVertexAttribArray(program.aVertexPosLoc); + gl.disableVertexAttribArray(program.aVertexTexcoordLoc); + + gl.bindBuffer(gl.ARRAY_BUFFER, null); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); }; var renderPass = function () { - // Bind framebuffer object for gbuffer - fbo.bind(gl, FBO_GBUFFER); + // Bind framebuffer object for gbuffer + fbo.bind(gl, FBO_GBUFFER); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - gl.enable(gl.DEPTH_TEST); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + gl.enable(gl.DEPTH_TEST); - gl.useProgram(passProg.ref()); + gl.useProgram(passProg.ref()); - //update the model-view matrix - var mvpMat = mat4.create(); - mat4.multiply( mvpMat, persp, camera.getViewTransform() ); + //update the model-view matrix + var mvpMat = mat4.create(); + mat4.multiply(mvpMat, persp, camera.getViewTransform()); - //update the normal matrix - var nmlMat = mat4.create(); - mat4.invert( nmlMat, camera.getViewTransform() ); - mat4.transpose( nmlMat, nmlMat); + //update the normal matrix + var nmlMat = mat4.create(); + mat4.invert(nmlMat, camera.getViewTransform()); + mat4.transpose(nmlMat, nmlMat); - gl.uniformMatrix4fv( passProg.uModelViewLoc, false, camera.getViewTransform()); - gl.uniformMatrix4fv( passProg.uMVPLoc, false, mvpMat ); - gl.uniformMatrix4fv( passProg.uNormalMatLoc, false, nmlMat ); + gl.uniformMatrix4fv(passProg.uModelViewLoc, false, camera.getViewTransform()); + gl.uniformMatrix4fv(passProg.uMVPLoc, false, mvpMat); + gl.uniformMatrix4fv(passProg.uNormalMatLoc, false, nmlMat); - drawModel(passProg, 0x3); + drawModel(passProg, 0x3); - // Unbind framebuffer - fbo.unbind(gl); + // Unbind framebuffer + fbo.unbind(gl); }; var renderMulti = function () { - fbo.bind(gl, FBO_GBUFFER_POSITION); + fbo.bind(gl, FBO_GBUFFER_POSITION); + + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + gl.enable(gl.DEPTH_TEST); + + gl.useProgram(posProg.ref()); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - gl.enable(gl.DEPTH_TEST); + //update the model-view matrix + var mvpMat = mat4.create(); + mat4.multiply(mvpMat, persp, camera.getViewTransform()); - gl.useProgram(posProg.ref()); - - //update the model-view matrix - var mvpMat = mat4.create(); - mat4.multiply( mvpMat, persp, camera.getViewTransform() ); + gl.uniformMatrix4fv(posProg.uModelViewLoc, false, camera.getViewTransform()); + gl.uniformMatrix4fv(posProg.uMVPLoc, false, mvpMat); - gl.uniformMatrix4fv( posProg.uModelViewLoc, false, camera.getViewTransform()); - gl.uniformMatrix4fv( posProg.uMVPLoc, false, mvpMat ); + drawModel(posProg, 1); - drawModel(posProg, 1); + gl.disable(gl.DEPTH_TEST); + fbo.unbind(gl); + gl.useProgram(null); -// gl.disable(gl.DEPTH_TEST); - fbo.unbind(gl); - gl.useProgram(null); + fbo.bind(gl, FBO_GBUFFER_NORMAL); + gl.clear(gl.COLOR_BUFFER_BIT); - fbo.bind(gl, FBO_GBUFFER_NORMAL); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - gl.enable(gl.DEPTH_TEST); + gl.useProgram(normProg.ref()); - gl.useProgram(normProg.ref()); + //update the normal matrix + var nmlMat = mat4.create(); + mat4.invert(nmlMat, camera.getViewTransform()); + mat4.transpose(nmlMat, nmlMat); - //update the normal matrix - var nmlMat = mat4.create(); - mat4.invert( nmlMat, camera.getViewTransform() ); - mat4.transpose( nmlMat, nmlMat); - - gl.uniformMatrix4fv(normProg.uMVPLoc, false, mvpMat); - gl.uniformMatrix4fv(normProg.uNormalMatLoc, false, nmlMat); + gl.uniformMatrix4fv(normProg.uMVPLoc, false, mvpMat); + gl.uniformMatrix4fv(normProg.uNormalMatLoc, false, nmlMat); - drawModel(normProg, 3); + drawModel(normProg, 3); - gl.useProgram(null); - fbo.unbind(gl); + gl.useProgram(null); + fbo.unbind(gl); - fbo.bind(gl, FBO_GBUFFER_COLOR); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - gl.enable(gl.DEPTH_TEST); + fbo.bind(gl, FBO_GBUFFER_COLOR); + gl.clear(gl.COLOR_BUFFER_BIT); - gl.useProgram(colorProg.ref()); + gl.useProgram(colorProg.ref()); - gl.uniformMatrix4fv(colorProg.uMVPLoc, false, mvpMat); + gl.uniformMatrix4fv(colorProg.uMVPLoc, false, mvpMat); - drawModel(colorProg, 1); + drawModel(colorProg, 1); - gl.useProgram(null); - fbo.unbind(gl); + gl.useProgram(null); + fbo.unbind(gl); }; var renderShade = function () { - gl.useProgram(shadeProg.ref()); - gl.disable(gl.DEPTH_TEST); + gl.useProgram(shadeProg.ref()); + gl.disable(gl.DEPTH_TEST); - // Bind FBO - fbo.bind(gl, FBO_PBUFFER); + // Bind FBO + fbo.bind(gl, FBO_PBUFFER); - gl.clear(gl.COLOR_BUFFER_BIT); + gl.clear(gl.COLOR_BUFFER_BIT); - // Bind necessary textures - //gl.activeTexture( gl.TEXTURE0 ); //position - //gl.bindTexture( gl.TEXTURE_2D, fbo.texture(0) ); - //gl.uniform1i( shadeProg.uPosSamplerLoc, 0 ); + // Bind necessary textures + gl.activeTexture( gl.TEXTURE0 ); //position + gl.bindTexture( gl.TEXTURE_2D, fbo.texture(0) ); + gl.uniform1i( shadeProg.uPosSamplerLoc, 0 ); - //gl.activeTexture( gl.TEXTURE1 ); //normal - //gl.bindTexture( gl.TEXTURE_2D, fbo.texture(1) ); - //gl.uniform1i( shadeProg.uNormalSamplerLoc, 1 ); + gl.activeTexture( gl.TEXTURE1 ); //normal + gl.bindTexture( gl.TEXTURE_2D, fbo.texture(1) ); + gl.uniform1i( shadeProg.uNormalSamplerLoc, 1 ); - gl.activeTexture( gl.TEXTURE2 ); //color - gl.bindTexture( gl.TEXTURE_2D, fbo.texture(2) ); - gl.uniform1i( shadeProg.uColorSamplerLoc, 2 ); + gl.activeTexture(gl.TEXTURE2); //color + gl.bindTexture(gl.TEXTURE_2D, fbo.texture(2)); + gl.uniform1i(shadeProg.uColorSamplerLoc, 2); - //gl.activeTexture( gl.TEXTURE3 ); //depth - //gl.bindTexture( gl.TEXTURE_2D, fbo.depthTexture() ); - //gl.uniform1i( shadeProg.uDepthSamplerLoc, 3 ); + gl.activeTexture( gl.TEXTURE3 ); //depth + gl.bindTexture( gl.TEXTURE_2D, fbo.depthTexture() ); + gl.uniform1i( shadeProg.uDepthSamplerLoc, 3 ); - // Bind necessary uniforms - //gl.uniform1f( shadeProg.uZNearLoc, zNear ); - //gl.uniform1f( shadeProg.uZFarLoc, zFar ); - - drawQuad(shadeProg); + //modelview + gl.uniformMatrix4fv(shadeProg.uModelViewLoc, false, camera.getViewTransform()); - // Unbind FBO - fbo.unbind(gl); + // Bind necessary uniforms + gl.uniform1f( shadeProg.uZNearLoc, zNear ); + gl.uniform1f( shadeProg.uZFarLoc, zFar ); + + drawQuad(shadeProg); + + // Unbind FBO + fbo.unbind(gl); }; var renderDiagnostic = function () { - gl.useProgram(diagProg.ref()); - - gl.disable(gl.DEPTH_TEST); - gl.clear(gl.COLOR_BUFFER_BIT); - - // Bind necessary textures - gl.activeTexture( gl.TEXTURE0 ); //position - gl.bindTexture( gl.TEXTURE_2D, fbo.texture(0) ); - gl.uniform1i( diagProg.uPosSamplerLoc, 0 ); - - gl.activeTexture( gl.TEXTURE1 ); //normal - gl.bindTexture( gl.TEXTURE_2D, fbo.texture(1) ); - gl.uniform1i( diagProg.uNormalSamplerLoc, 1 ); - - gl.activeTexture( gl.TEXTURE2 ); //color - gl.bindTexture( gl.TEXTURE_2D, fbo.texture(2) ); - gl.uniform1i( diagProg.uColorSamplerLoc, 2 ); - - gl.activeTexture( gl.TEXTURE3 ); //depth - gl.bindTexture( gl.TEXTURE_2D, fbo.depthTexture() ); - gl.uniform1i( diagProg.uDepthSamplerLoc, 3 ); - - // Bind necessary uniforms - gl.uniform1f( diagProg.uZNearLoc, zNear ); - gl.uniform1f( diagProg.uZFarLoc, zFar ); - gl.uniform1i( diagProg.uDisplayTypeLoc, texToDisplay ); - - drawQuad(diagProg); + gl.useProgram(diagProg.ref()); + + gl.disable(gl.DEPTH_TEST); + gl.clear(gl.COLOR_BUFFER_BIT); + + // Bind necessary textures + gl.activeTexture(gl.TEXTURE0); //position, key 1 + gl.bindTexture(gl.TEXTURE_2D, fbo.texture(0)); + gl.uniform1i(diagProg.uPosSamplerLoc, 0); + + gl.activeTexture(gl.TEXTURE1); //normal, key 2 + gl.bindTexture(gl.TEXTURE_2D, fbo.texture(1)); + gl.uniform1i(diagProg.uNormalSamplerLoc, 1); + + gl.activeTexture(gl.TEXTURE2); //color, key 3 + gl.bindTexture(gl.TEXTURE_2D, fbo.texture(2)); + gl.uniform1i(diagProg.uColorSamplerLoc, 2); + + gl.activeTexture(gl.TEXTURE3); //depth, key 4 + gl.bindTexture(gl.TEXTURE_2D, fbo.depthTexture()); + gl.uniform1i(diagProg.uDepthSamplerLoc, 3); + + // Bind necessary uniforms + gl.uniform1f(diagProg.uZNearLoc, zNear); + gl.uniform1f(diagProg.uZFarLoc, zFar); + gl.uniform1i(diagProg.uDisplayTypeLoc, texToDisplay); + + drawQuad(diagProg); }; var renderPost = function () { - gl.useProgram(postProg.ref()); + gl.useProgram(postProg.ref()); + + gl.disable(gl.DEPTH_TEST); + gl.clear(gl.COLOR_BUFFER_BIT); - gl.disable(gl.DEPTH_TEST); - gl.clear(gl.COLOR_BUFFER_BIT); + // Bind necessary textures + gl.activeTexture(gl.TEXTURE4); + gl.bindTexture(gl.TEXTURE_2D, fbo.texture(4)); + gl.uniform1i(postProg.uShadeSamplerLoc, 4); - // Bind necessary textures - gl.activeTexture( gl.TEXTURE4 ); - gl.bindTexture( gl.TEXTURE_2D, fbo.texture(4) ); - gl.uniform1i(postProg.uShadeSamplerLoc, 4 ); - drawQuad(postProg); + // Bind necessary uniforms + gl.uniform1f(postProg.uZNearLoc, zNear); + gl.uniform1f(postProg.uZFarLoc, zFar); + gl.uniform1i(postProg.uDisplayTypeLoc, texToDisplay); + + + drawQuad(postProg); }; var initGL = function (canvasId, messageId) { - var msg; - - // Get WebGL context - canvas = document.getElementById(canvasId); - msg = document.getElementById(messageId); - gl = CIS565WEBGLCORE.getWebGLContext(canvas, msg); - - if (!gl) { - return; // return if a WebGL context not found - } - - // Set up WebGL stuff - gl.viewport(0, 0, canvas.width, canvas.height); - gl.clearColor(0.3, 0.3, 0.3, 1.0); - gl.enable(gl.DEPTH_TEST); - gl.depthFunc(gl.LESS); + var msg; + + // Get WebGL context + canvas = document.getElementById(canvasId); + msg = document.getElementById(messageId); + gl = CIS565WEBGLCORE.getWebGLContext(canvas, msg); + + if (!gl) { + return; // return if a WebGL context not found + } + + // Set up WebGL stuff + gl.viewport(0, 0, canvas.width, canvas.height); + gl.clearColor(0.3, 0.3, 0.3, 1.0); + gl.enable(gl.DEPTH_TEST); + gl.depthFunc(gl.LESS); }; var initCamera = function () { - // Setup camera - persp = mat4.create(); - mat4.perspective(persp, todeg(60), canvas.width / canvas.height, 0.1, 2000); - - camera = CIS565WEBGLCORE.createCamera(CAMERA_TRACKING_TYPE); - camera.goHome([0, 0, 4]); - interactor = CIS565WEBGLCORE.CameraInteractor(camera, canvas); - - // Add key-input controls - window.onkeydown = function (e) { - interactor.onKeyDown(e); - switch(e.keyCode) { - case 48: - isDiagnostic = false; - break; - case 49: - isDiagnostic = true; - texToDisplay = 1; - break; - case 50: - isDiagnostic = true; - texToDisplay = 2; - break; - case 51: - isDiagnostic = true; - texToDisplay = 3; - break; - case 52: - isDiagnostic = true; - texToDisplay = 4; - break; + // Setup camera + persp = mat4.create(); + mat4.perspective(persp, todeg(60), canvas.width / canvas.height, 0.1, 2000); + + camera = CIS565WEBGLCORE.createCamera(CAMERA_TRACKING_TYPE); + camera.goHome([0, 0, 4]); + interactor = CIS565WEBGLCORE.CameraInteractor(camera, canvas); + + // Add key-input controls + window.onkeydown = function (e) { + interactor.onKeyDown(e); + switch (e.keyCode) { + case 48: //key 0 + isDiagnostic = false; + break; + case 49: + isDiagnostic = true; + texToDisplay = 1; + break; + case 50: + isDiagnostic = true; + texToDisplay = 2; + break; + case 51: + isDiagnostic = true; + texToDisplay = 3; + break; + case 52: + isDiagnostic = true; + texToDisplay = 4; + break; + case 53: //key 5 + isDiagnostic = false; + texToDisplay = 1; + break; + case 54: + isDiagnostic = false; + texToDisplay = 2; + break; + case 55: + isDiagnostic = false; + texToDisplay = 3; + break; + case 56: + isDiagnostic = false; + texToDisplay = 4; + break; + case 57: + isDiagnostic = false; + texToDisplay = 5; + break; + } } - } }; var initObjs = function () { - // Create an OBJ loader - objloader = CIS565WEBGLCORE.createOBJLoader(); - - // Load the OBJ from file - objloader.loadFromFile(gl, "assets/models/suzanne.obj", null); - - // Add callback to upload the vertices once loaded - objloader.addCallback(function () { - model = new Model(gl, objloader); - }); - - // Register callback item - CIS565WEBGLCORE.registerAsyncObj(gl, objloader); - - // Initialize full-screen quad - quad.vbo = gl.createBuffer(); - quad.ibo = gl.createBuffer(); - quad.tbo = gl.createBuffer(); - - gl.bindBuffer(gl.ARRAY_BUFFER, quad.vbo); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(screenQuad.vertices), gl.STATIC_DRAW); - - gl.bindBuffer(gl.ARRAY_BUFFER, quad.tbo); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(screenQuad.texcoords), gl.STATIC_DRAW); - gl.bindBuffer(gl.ARRAY_BUFFER, null) - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, quad.ibo); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(screenQuad.indices), gl.STATIC_DRAW); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); + // Create an OBJ loader + objloader = CIS565WEBGLCORE.createOBJLoader(); + + // Load the OBJ from file + objloader.loadFromFile(gl, "assets/models/suzanne.obj", null); + + // Add callback to upload the vertices once loaded + objloader.addCallback(function () { + model = new Model(gl, objloader); + }); + + // Register callback item + CIS565WEBGLCORE.registerAsyncObj(gl, objloader); + + // Initialize full-screen quad + quad.vbo = gl.createBuffer(); + quad.ibo = gl.createBuffer(); + quad.tbo = gl.createBuffer(); + + gl.bindBuffer(gl.ARRAY_BUFFER, quad.vbo); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(screenQuad.vertices), gl.STATIC_DRAW); + + gl.bindBuffer(gl.ARRAY_BUFFER, quad.tbo); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(screenQuad.texcoords), gl.STATIC_DRAW); + gl.bindBuffer(gl.ARRAY_BUFFER, null) + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, quad.ibo); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(screenQuad.indices), gl.STATIC_DRAW); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); }; var initShaders = function () { - if (fbo.isMultipleTargets()) { - // Create a shader program for rendering the object we are loading - passProg = CIS565WEBGLCORE.createShaderProgram(); - - // Load the shader source asynchronously - passProg.loadShader(gl, "assets/shader/deferred/pass.vert", "assets/shader/deferred/pass.frag"); - - // Register the necessary callback functions - passProg.addCallback( function() { - gl.useProgram(passProg.ref()); - - // Add uniform locations - passProg.aVertexPosLoc = gl.getAttribLocation( passProg.ref(), "a_pos" ); - passProg.aVertexNormalLoc = gl.getAttribLocation( passProg.ref(), "a_normal" ); - passProg.aVertexTexcoordLoc = gl.getAttribLocation( passProg.ref(), "a_texcoord" ); - - passProg.uPerspLoc = gl.getUniformLocation( passProg.ref(), "u_projection" ); - passProg.uModelViewLoc = gl.getUniformLocation( passProg.ref(), "u_modelview" ); - passProg.uMVPLoc = gl.getUniformLocation( passProg.ref(), "u_mvp" ); - passProg.uNormalMatLoc = gl.getUniformLocation( passProg.ref(), "u_normalMat"); - passProg.uSamplerLoc = gl.getUniformLocation( passProg.ref(), "u_sampler"); - }); + if (fbo.isMultipleTargets()) { + // Create a shader program for rendering the object we are loading + passProg = CIS565WEBGLCORE.createShaderProgram(); - CIS565WEBGLCORE.registerAsyncObj(gl, passProg); - } else { - posProg = CIS565WEBGLCORE.createShaderProgram(); - posProg.loadShader(gl, "assets/shader/deferred/posPass.vert", "assets/shader/deferred/posPass.frag"); - posProg.addCallback(function() { - posProg.aVertexPosLoc = gl.getAttribLocation(posProg.ref(), "a_pos"); + // Load the shader source asynchronously + passProg.loadShader(gl, "assets/shader/deferred/pass.vert", "assets/shader/deferred/pass.frag"); - posProg.uModelViewLoc = gl.getUniformLocation(posProg.ref(), "u_modelview"); - posProg.uMVPLoc = gl.getUniformLocation(posProg.ref(), "u_mvp"); - }); + // Register the necessary callback functions + passProg.addCallback(function () { + gl.useProgram(passProg.ref()); - CIS565WEBGLCORE.registerAsyncObj(gl, posProg); + // Add uniform locations + passProg.aVertexPosLoc = gl.getAttribLocation(passProg.ref(), "a_pos"); + passProg.aVertexNormalLoc = gl.getAttribLocation(passProg.ref(), "a_normal"); + passProg.aVertexTexcoordLoc = gl.getAttribLocation(passProg.ref(), "a_texcoord"); - normProg = CIS565WEBGLCORE.createShaderProgram(); - normProg.loadShader(gl, "assets/shader/deferred/normPass.vert", "assets/shader/deferred/normPass.frag"); - normProg.addCallback(function() { - normProg.aVertexPosLoc = gl.getAttribLocation(normProg.ref(), "a_pos"); - normProg.aVertexNormalLoc = gl.getAttribLocation(normProg.ref(), "a_normal"); - normProg.uMVPLoc = gl.getUniformLocation(normProg.ref(), "u_mvp"); - normProg.uNormalMatLoc = gl.getUniformLocation(normProg.ref(), "u_normalMat"); - }); + passProg.u_timeLocation = gl.getUniformLocation(passProg.ref(), "u_time"); + passProg.uPerspLoc = gl.getUniformLocation(passProg.ref(), "u_projection"); + passProg.uModelViewLoc = gl.getUniformLocation(passProg.ref(), "u_modelview"); + passProg.uMVPLoc = gl.getUniformLocation(passProg.ref(), "u_mvp"); + passProg.uNormalMatLoc = gl.getUniformLocation(passProg.ref(), "u_normalMat"); + passProg.uSamplerLoc = gl.getUniformLocation(passProg.ref(), "u_sampler"); + }); + + CIS565WEBGLCORE.registerAsyncObj(gl, passProg); + } else { + posProg = CIS565WEBGLCORE.createShaderProgram(); + posProg.loadShader(gl, "assets/shader/deferred/posPass.vert", "assets/shader/deferred/posPass.frag"); + posProg.addCallback(function () { + posProg.aVertexPosLoc = gl.getAttribLocation(posProg.ref(), "a_pos"); + + posProg.uModelViewLoc = gl.getUniformLocation(posProg.ref(), "u_modelview"); + posProg.uMVPLoc = gl.getUniformLocation(posProg.ref(), "u_mvp"); + }); + + CIS565WEBGLCORE.registerAsyncObj(gl, posProg); + + normProg = CIS565WEBGLCORE.createShaderProgram(); + normProg.loadShader(gl, "assets/shader/deferred/normPass.vert", "assets/shader/deferred/normPass.frag"); + normProg.addCallback(function () { + normProg.aVertexPosLoc = gl.getAttribLocation(normProg.ref(), "a_pos"); + normProg.aVertexNormalLoc = gl.getAttribLocation(normProg.ref(), "a_normal"); + + normProg.uMVPLoc = gl.getUniformLocation(normProg.ref(), "u_mvp"); + normProg.uNormalMatLoc = gl.getUniformLocation(normProg.ref(), "u_normalMat"); + }); - CIS565WEBGLCORE.registerAsyncObj(gl, normProg); + CIS565WEBGLCORE.registerAsyncObj(gl, normProg); - colorProg = CIS565WEBGLCORE.createShaderProgram(); - colorProg.loadShader(gl, "assets/shader/deferred/colorPass.vert", "assets/shader/deferred/colorPass.frag"); - colorProg.addCallback(function(){ - colorProg.aVertexPosLoc = gl.getAttribLocation(colorProg.ref(), "a_pos"); + colorProg = CIS565WEBGLCORE.createShaderProgram(); + colorProg.loadShader(gl, "assets/shader/deferred/colorPass.vert", "assets/shader/deferred/colorPass.frag"); + colorProg.addCallback(function () { + colorProg.aVertexPosLoc = gl.getAttribLocation(colorProg.ref(), "a_pos"); - colorProg.uMVPLoc = gl.getUniformLocation(colorProg.ref(), "u_mvp"); + colorProg.uMVPLoc = gl.getUniformLocation(colorProg.ref(), "u_mvp"); + }); + + CIS565WEBGLCORE.registerAsyncObj(gl, colorProg); + } + + // Create shader program for diagnostic + diagProg = CIS565WEBGLCORE.createShaderProgram(); + diagProg.loadShader(gl, "assets/shader/deferred/quad.vert", "assets/shader/deferred/diagnostic.frag"); + diagProg.addCallback(function () { + diagProg.aVertexPosLoc = gl.getAttribLocation(diagProg.ref(), "a_pos"); + diagProg.aVertexTexcoordLoc = gl.getAttribLocation(diagProg.ref(), "a_texcoord"); + + diagProg.uPosSamplerLoc = gl.getUniformLocation(diagProg.ref(), "u_positionTex"); + diagProg.uNormalSamplerLoc = gl.getUniformLocation(diagProg.ref(), "u_normalTex"); + diagProg.uColorSamplerLoc = gl.getUniformLocation(diagProg.ref(), "u_colorTex"); + diagProg.uDepthSamplerLoc = gl.getUniformLocation(diagProg.ref(), "u_depthTex"); + + diagProg.uZNearLoc = gl.getUniformLocation(diagProg.ref(), "u_zNear"); + diagProg.uZFarLoc = gl.getUniformLocation(diagProg.ref(), "u_zFar"); + diagProg.uDisplayTypeLoc = gl.getUniformLocation(diagProg.ref(), "u_displayType"); + }); + CIS565WEBGLCORE.registerAsyncObj(gl, diagProg); + + // Create shader program for shade + shadeProg = CIS565WEBGLCORE.createShaderProgram(); + shadeProg.loadShader(gl, "assets/shader/deferred/quad.vert", "assets/shader/deferred/diffuse.frag"); + shadeProg.addCallback(function () { + shadeProg.aVertexPosLoc = gl.getAttribLocation(shadeProg.ref(), "a_pos"); + shadeProg.aVertexTexcoordLoc = gl.getAttribLocation(shadeProg.ref(), "a_texcoord"); + + shadeProg.uPosSamplerLoc = gl.getUniformLocation(shadeProg.ref(), "u_positionTex"); + shadeProg.uNormalSamplerLoc = gl.getUniformLocation(shadeProg.ref(), "u_normalTex"); + shadeProg.uColorSamplerLoc = gl.getUniformLocation(shadeProg.ref(), "u_colorTex"); + shadeProg.uDepthSamplerLoc = gl.getUniformLocation(shadeProg.ref(), "u_depthTex"); + + shadeProg.uZNearLoc = gl.getUniformLocation(shadeProg.ref(), "u_zNear"); + shadeProg.uZFarLoc = gl.getUniformLocation(shadeProg.ref(), "u_zFar"); + shadeProg.uDisplayTypeLoc = gl.getUniformLocation(shadeProg.ref(), "u_displayType"); }); + CIS565WEBGLCORE.registerAsyncObj(gl, shadeProg); - CIS565WEBGLCORE.registerAsyncObj(gl, colorProg); - } - - // Create shader program for diagnostic - diagProg = CIS565WEBGLCORE.createShaderProgram(); - diagProg.loadShader(gl, "assets/shader/deferred/quad.vert", "assets/shader/deferred/diagnostic.frag"); - diagProg.addCallback( function() { - diagProg.aVertexPosLoc = gl.getAttribLocation( diagProg.ref(), "a_pos" ); - diagProg.aVertexTexcoordLoc = gl.getAttribLocation( diagProg.ref(), "a_texcoord" ); - - diagProg.uPosSamplerLoc = gl.getUniformLocation( diagProg.ref(), "u_positionTex"); - diagProg.uNormalSamplerLoc = gl.getUniformLocation( diagProg.ref(), "u_normalTex"); - diagProg.uColorSamplerLoc = gl.getUniformLocation( diagProg.ref(), "u_colorTex"); - diagProg.uDepthSamplerLoc = gl.getUniformLocation( diagProg.ref(), "u_depthTex"); - - diagProg.uZNearLoc = gl.getUniformLocation( diagProg.ref(), "u_zNear" ); - diagProg.uZFarLoc = gl.getUniformLocation( diagProg.ref(), "u_zFar" ); - diagProg.uDisplayTypeLoc = gl.getUniformLocation( diagProg.ref(), "u_displayType" ); - }); - CIS565WEBGLCORE.registerAsyncObj(gl, diagProg); - - // Create shader program for shade - shadeProg = CIS565WEBGLCORE.createShaderProgram(); - shadeProg.loadShader(gl, "assets/shader/deferred/quad.vert", "assets/shader/deferred/diffuse.frag"); - shadeProg.addCallback( function() { - shadeProg.aVertexPosLoc = gl.getAttribLocation( shadeProg.ref(), "a_pos" ); - shadeProg.aVertexTexcoordLoc = gl.getAttribLocation( shadeProg.ref(), "a_texcoord" ); - - shadeProg.uPosSamplerLoc = gl.getUniformLocation( shadeProg.ref(), "u_positionTex"); - shadeProg.uNormalSamplerLoc = gl.getUniformLocation( shadeProg.ref(), "u_normalTex"); - shadeProg.uColorSamplerLoc = gl.getUniformLocation( shadeProg.ref(), "u_colorTex"); - shadeProg.uDepthSamplerLoc = gl.getUniformLocation( shadeProg.ref(), "u_depthTex"); - - shadeProg.uZNearLoc = gl.getUniformLocation( shadeProg.ref(), "u_zNear" ); - shadeProg.uZFarLoc = gl.getUniformLocation( shadeProg.ref(), "u_zFar" ); - shadeProg.uDisplayTypeLoc = gl.getUniformLocation( shadeProg.ref(), "u_displayType" ); - }); - CIS565WEBGLCORE.registerAsyncObj(gl, shadeProg); - - // Create shader program for post-process - postProg = CIS565WEBGLCORE.createShaderProgram(); - postProg.loadShader(gl, "assets/shader/deferred/quad.vert", "assets/shader/deferred/post.frag"); - postProg.addCallback( function() { - postProg.aVertexPosLoc = gl.getAttribLocation( postProg.ref(), "a_pos" ); - postProg.aVertexTexcoordLoc = gl.getAttribLocation( postProg.ref(), "a_texcoord" ); - - postProg.uShadeSamplerLoc = gl.getUniformLocation( postProg.ref(), "u_shadeTex"); - }); - CIS565WEBGLCORE.registerAsyncObj(gl, postProg); + // Create shader program for post-process + postProg = CIS565WEBGLCORE.createShaderProgram(); + postProg.loadShader(gl, "assets/shader/deferred/quad.vert", "assets/shader/deferred/post.frag"); + postProg.addCallback(function () { + postProg.aVertexPosLoc = gl.getAttribLocation(postProg.ref(), "a_pos"); + postProg.aVertexTexcoordLoc = gl.getAttribLocation(postProg.ref(), "a_texcoord"); + + postProg.uShadeSamplerLoc = gl.getUniformLocation(postProg.ref(), "u_shadeTex"); + }); + CIS565WEBGLCORE.registerAsyncObj(gl, postProg); }; var initFramebuffer = function () { - fbo = CIS565WEBGLCORE.createFBO(); - if (!fbo.initialize(gl, canvas.width, canvas.height)) { - console.log("FBO Initialization failed"); - return; - } + fbo = CIS565WEBGLCORE.createFBO(); + if (!fbo.initialize(gl, canvas.width, canvas.height)) { + console.log("FBO Initialization failed"); + return; + } }; diff --git a/js/screenQuad.js b/js/screenQuad.js old mode 100644 new mode 100755 index f33bfdf..dde90a5 --- a/js/screenQuad.js +++ b/js/screenQuad.js @@ -8,10 +8,10 @@ var screenQuad ={ -1.0, 1.0, 0.0 ], texcoords:[ - 0.0, 0.0, 1.0, 0.0, - 1.0, 1.0, - 0.0, 1.0 + 0.0, 0.0, + 0.0, 1.0, + 1.0, 1.0 ], indices: [ 0, 1, 3, diff --git a/js/stats.min.js b/js/stats.min.js new file mode 100755 index 0000000..8195d09 --- /dev/null +++ b/js/stats.min.js @@ -0,0 +1,5 @@ +Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px"; + i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div"); + k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display= + "block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:11,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height= + a+"px",m=b,r=0);return b},update:function(){l=this.end()}}}; diff --git a/multi_40lights_bloom.jpg b/multi_40lights_bloom.jpg new file mode 100755 index 0000000..e28e3f2 Binary files /dev/null and b/multi_40lights_bloom.jpg differ diff --git a/multi_40lights_original.jpg b/multi_40lights_original.jpg new file mode 100755 index 0000000..2366956 Binary files /dev/null and b/multi_40lights_original.jpg differ diff --git a/original.jpg b/original.jpg new file mode 100755 index 0000000..c0e914b Binary files /dev/null and b/original.jpg differ diff --git a/toon_basic.jpg b/toon_basic.jpg new file mode 100755 index 0000000..857e606 Binary files /dev/null and b/toon_basic.jpg differ