diff --git a/README.md b/README.md index f810e88..83fc282 100644 --- a/README.md +++ b/README.md @@ -3,424 +3,82 @@ WebGL Deferred Shading **University of Pennsylvania, CIS 565: GPU Programming and Architecture, Project 6** -* (TODO) YOUR NAME HERE -* Tested on: (TODO) **Google Chrome 222.2** on - Windows 22, i7-2222 @ 2.22GHz 22GB, GTX 222 222MB (Moore 2222 Lab) +siqi Huang Tested on: Windows 7, Inter(R) Core(TM) i7-4870 HQ CPU@ 2.5GHz; GeForce GT 750M(GK107) (Personal Computer) -### Live Online +#Representative Images: -[![](img/thumb.png)](http://TODO.github.io/Project6-WebGL-Deferred-Shading) +![](img/rep1.jpg) +![](img/rep2.png) +![](img/rep3.png) +![](img/rep4.jpg) +[![ScreenShot](img/screenshot.png)](https://youtu.be/5MFLvYcvd4w) -### Demo Video +#Part O: Browser Setup +This should be a very easy part, as many browser nowadays support WebGl 1.0 or higher. But in my case I still have problems and spend a whole day dealing with it. First I tried to use Chrome but it seems that it only support WebGl 1.0. To enable the WebGl 2.0, you have to add parameter in its command line[1]. This method work fine in majority of time, but unlucky I am not in that range, so I turn to FireFox and setup the browser for WebGl. -[![](img/video.png)](TODO) +#Part I: Simple Red Squad +For this part I still used much time. Really not familiar with the js function. In general, what I did is create and bind buffer, give point location to shader and render. After all this, the dark screen is in red. -### (TODO: Your README) +#Part II: Debug Views +After pass value to the copy.vert.glsl. All debug view is easy to get. -*DO NOT* leave the README to the last minute! It is a crucial part of the -project, and we will not be able to grade you without a good README. +1 Depth: Simply use depth value to render. +![](img/debug1.jpg) -This assignment has a considerable amount of performance analysis compared -to implementation work. Complete the implementation early to leave time! +2 Position: Simply use position to render +![](img/debug2.jpg) +3 Geometry Normal: Simply use geometry normal to render +![](img/debug3.jpg) -Instructions (delete me) -======================== +4 Color Map: Simply use color map to render +![](img/debug4.jpg) -This is due at midnight on the evening of Tuesday, October 27. +5 Normal Map: Simply use normal map to render +![](img/debug5.png) -**Summary:** In this project, you'll be introduced to the basics of deferred -shading and WebGL. You'll use GLSL and WebGL to implement a deferred shading -pipeline and various lighting and visual effects. +6 Surface Normal: Use normal map*geometry normal to render +![](img/debug6.png) -**Recommendations:** -Take screenshots as you go. Use them to document your progress in your README! +# Part III: Ambient Shader(With Toon Shading) +Here the default value is black. I use the color map(texture) as its ambient color. Because the texture is too light, I use 0.4*colorMap instead. Then I implemented toon shading. Given the eye position, we can get the toon shading using lambert's law(somewhat like diffuse shading). However, here we divide color into 4 levels based on the angle between the eye and the normal. So we get the result like this: +![](img/rep4.jpg) -Read (or at least skim) the full README before you begin, so that you know what -to expect and what to prepare for. +# Part VI: Blinn-Phong Shader(With Lighting Fade Off) +To implement the bline-phone effect, we need the camera position. Then using the light position we get the result. To improve the performance, we used scissor test to restrict the change of pixes are only within the scissor square. The scissor square is like: +![](img/scissor.png) -### Running the code +Then in the actual rendering, the lighting fade off is set to be linear. So we get the result here like: +![](img/rep1.jpg) -If you have Python, you should be able to run `server.py` to start a server. -Then, open [`http://localhost:10565/`](http://localhost:10565/) in your browser. +The specular coefficient is a random number between 1 and 60, with is passed to the shader with the G-buffer. -This project requires a WebGL-capable web browser with support for -`WEBGL_draw_buffers`. You can check for support on -[WebGL Report](http://webglreport.com/). +# Part V: Bloom Shading(With Two Passes) +The idea of bloom shading[2] here is to get the result color from the blinn-phong shader first and post processing twice to get the bluring images. Using the Guassian function we first do the texture(color) offset in x direction. Then push the color back and reuse in the second pass, and then we do the texture(color) offset in y direction. The number of offset is 10 in both direction, and the coefficient for Guassian fade off is 0.8. If the color to be add is less than 0.8 in length, then discard it and use the original color. So after blurring, the result is like: +![](img/rep5.jpg) -Google Chrome seems to work best on all platforms. If you have problems running -the starter code, use Chrome or Chromium, and make sure you have updated your -browser and video drivers. +# Part VI: Motion Blur +The motion blur[3] is pretty easy to understand in the reference[3]. However, one major problem I came across is when I tried to record the old camera matrix, the whole object is stored. If I want to renew the camera matrix every 10 frame, the object camera matrix renew every frame since it is the current camera matrix's object. One way to solve this is to use the set function in THREE.js's Matrix4 class. I renew the scene(update the old camera matrix) every 15 frame and the blur is ideal. +![](img/blur.jpg) -In Moore 100C, both Chrome and Firefox work. -See below for notes on profiling/debugging tools. +# Part VII: Performance Analysis +1 Scissor Test vs non Scissor Test +The Scissor Test is very important for performance improvement. The Small the scissor square is, the better the performance is enhanced. Below is a comparison of performance of with and without scissor test. +![](img/ana_scissor.png) -Use the screenshot button to save a screenshot. +We can see that the average fps of using scissor outweight the method without the scissor in all comparison. When the computation is large(like in motion blur) the performance is not so obvious. But when the computation task is not heavy, the improvement is clear. I believe when the distance of camera to the light is large, the enhance in performance should be more obvious. -## Requirements +2 Bloom vs non-Bloom +The changing variable is in lights number, and number of offsets. +When the lights number is the variable, it is very strange to find the in all cases the bloom is faster than not using bloom. The default number of offsets is 10. This show when the number of offsets is low, the bottle neck is not on the number of offsets. +![](img/ana_bloom1.jpg) -**Ask on the mailing list for any clarifications.** +When the number of offsets is the variable, the fps drop dramatically when the number goes up. +![](img/ana_bloom2.png) -In this project, you are given code for: +# Part VIII: References: +[1] https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation -* Loading OBJ files and color/normal map textures -* Camera control -* Partial implementation of deferred shading including many helper functions +[2] http://http.developer.nvidia.com/GPUGems/gpugems_ch21.html -### Required Tasks - -**Before doing performance analysis,** you must disable debug mode by changing -`debugMode` to `false` in `framework.js`. Keep it enabled when developing - it -helps find WebGL errors *much* more easily. - -You will need to perform the following tasks: - -* Complete the deferred shading pipeline so that the Blinn-Phong and Post1 - shaders recieve the correct input. Go through the Starter Code Tour **before - continuing!** - -**Effects:** - -* Implement deferred Blinn-Phong shading (diffuse + specular) - * With normal mapping (code provided) - -* Implement one of the following effects: - * Bloom using post-process blur (box or Gaussian) [1] - * Toon shading (with ramp shading + simple depth-edge detection for outlines) - -**Optimizations:** - -* Scissor test optimization: when accumulating shading from each point - light source, only render in a rectangle around the light. - * Show a debug view for this (showing scissor masks clearly), e.g. by - modifying and using `red.frag.glsl` with additive blending and alpha = 0.1. - * Code is provided to compute this rectangle for you, and there are - comments at the relevant place in `deferredRender.js` with more guidance. - -* Optimized g-buffer format - reduce the number and size of g-buffers: - * Ideas: - * Pack values together into vec4s - * Use 2-component normals - * Quantize values by using smaller texture types instead of gl.FLOAT - * Reduce number of properties passed via g-buffer, e.g. by: - * Applying the normal map in the `copy` shader pass instead of - copying both geometry normals and normal maps - * Reconstructing world space position using camera matrices and X/Y/depth - * For credit, you must show a good optimization effort and record the - performance of each version you test, in a simple table. - * It is expected that you won't need all 4 provided g-buffers for a basic - pipeline - make sure you disable the unused ones. - * See mainly: `copy.frag.glsl`, `deferred/*.glsl`, `deferredSetup.js` - -### Extra Tasks - -You must do at least **10 points** worth of extra features (effects or -optimizations/analysis). - -**Effects:** - -* (3pts) The effect you didn't choose above (bloom or toon shading) - -* (3pts) Screen-space motion blur (blur along velocity direction) [3] - -* (2pts) Allow variability in additional material properties - * Include other properties (e.g. specular coeff/exponent) in g-buffers - * Use this to render objects with different material properties - * These may be uniform across one model draw call, but you'll have to show - multiple models - -**Optimizations/Analysis:** - -* (2pts) Improved screen-space AABB for scissor test - (smaller/more accurate than provided - but beware of CPU/GPU tradeoffs) - -* (3pts) Two-pass **Gaussian** blur using separable convolution (using a second - postprocess render pass) to improve bloom or other 2D blur performance - -* (4-6pts) Light proxies - * (4pts) Instead of rendering a scissored full-screen quad for every light, - render some proxy geometry which covers the part of the screen affected by - the light (e.g. a sphere, for an attenuated point light). - * A model called `sphereModel` is provided which can be drawn in the same - way as the code in `drawScene`. (Must be drawn with a vertex shader which - scales it to the light radius and translates it to the light position.) - * (+2pts) To avoid lighting geometry far behind the light, render the proxy - geometry (e.g. sphere) using an inverted depth test - (`gl.depthFunc(gl.GREATER)`) with depth writing disabled (`gl.depthMask`). - This test will pass only for parts of the screen for which the backside of - the sphere appears behind parts of the scene. - * Note that the copy pass's depth buffer must be bound to the FBO during - this operation! - * Show a debug view for this (showing light proxies) - * Compare performance of this, naive, and scissoring. - -* (8pts) Tile-based deferred shading with detailed performance comparison - * On the CPU, check which lights overlap which tiles. Then, render each tile - just once for all lights (instead of once for each light), applying only - the overlapping lights. - * The method is described very well in - [Yuqin & Sijie's README](https://github.com/YuqinShao/Tile_Based_WebGL_DeferredShader/blob/master/README.md#algorithm-details). - * This feature requires allocating the global light list and tile light - index lists as shown at this link. These can be implemented as textures. - * Show a debug view for this (number of lights per tile) - -* (6pts) Deferred shading without multiple render targets - (i.e. without WEBGL_draw_buffers). - * Render the scene once for each target g-buffer, each time into a different - framebuffer object. - * Include a detailed performance analysis, comparing with/without - WEBGL_draw_buffers (like in the - [Mozilla blog article](https://hacks.mozilla.org/2014/01/webgl-deferred-shading/)). - -* (2-6pts) Compare performance to equivalently-lit forward-rendering: - * (2pts) With no forward-rendering optimizations - * (+2pts) Coarse, per-object back-to-front sorting of geometry for early-z - * (Of course) must render many objects to test - * (+2pts) Z-prepass for early-z - -This extra feature list is not comprehensive. If you have a particular idea -that you would like to implement, please **contact us first** (preferably on -the mailing list). - -**Where possible, all features should be switchable using the GUI panel in -`ui.js`.** - -### Performance & Analysis - -**Before doing performance analysis,** you must disable debug mode by changing -`debugMode` to `false` in `framework.js`. Keep it enabled when developing - it -helps find WebGL errors *much* more easily. - -Optimize your JavaScript and/or GLSL code. Web Tracing Framework -and Chrome/Firefox's profiling tools (see Resources section) will -be useful for this. For each change -that improves performance, show the before and after render times. - -For each new *effect* feature (required or extra), please -provide the following analysis: - -* Concise overview write-up of the feature. -* Performance change due to adding the feature. - * If applicable, how do parameters (such as number of lights, etc.) - affect performance? Show data with simple graphs. -* If you did something to accelerate the feature, what did you do and why? -* How might this feature be optimized beyond your current implementation? - -For each *performance* feature (required or extra), please provide: - -* Concise overview write-up of the feature. -* Detailed performance improvement analysis of adding the feature - * What is the best case scenario for your performance improvement? What is - the worst? Explain briefly. - * Are there tradeoffs to this performance feature? Explain briefly. - * How do parameters (such as number of lights, tile size, etc.) affect - performance? Show data with graphs. - * Show debug views when possible. - * If the debug view correlates with performance, explain how. - -Note: Be aware that stats.js may give 0 millisecond frame timings in Chrome on -occasion - if this happens, you can use the FPS counter. - -### Starter Code Tour - -You'll be working mainly in `deferredRender.js` using raw WebGL. Three.js is -included in the project for various reasons. You won't use it for much, but its -matrix/vector types may come in handy. - -It's highly recommended that you use the browser debugger to inspect variables -to get familiar with the code. At any point, you can also -`console.log(some_var);` to show it in the console and inspect it. - -The setup in `deferredSetup` is already done for you, for many of the features. -If you want to add uniforms (textures or values), you'll change them here. -Therefore, it is recommended that you review the comments to understand the -process, BEFORE starting work in `deferredRender`. - -In `deferredRender`, start at the **START HERE!** comment. -Work through the appropriate `TODO`s as you go - most of them are very -small. Test incrementally (after implementing each part, instead of testing -all at once). -* (The first thing you should be doing is implementing the fullscreen quad!) - -Your _next_ first goal should be to get the debug views working. -Add code in `debug.frag.glsl` to examine your g-buffers before trying to -render them. (Set the debugView in the UI to show them.) - -For editing JavaScript, you can use a simple editor with syntax highlighting -such as Sublime, Vim, Emacs, etc., or the editor built into Chrome. - -* `js/`: JavaScript files for this project. - * `main.js`: Handles initialization of other parts of the program. - * `framework.js`: Loads the scene, camera, etc., and calls your setup/render - functions. Hopefully, you won't need to change anything here. - * `deferredSetup.js`: Deferred shading pipeline setup code. - * `createAndBind(Depth/Color)TargetTexture`: Creates empty textures for - binding to frame buffer objects as render targets. - * `deferredRender.js`: Your deferred shading pipeline execution code. - * `renderFullScreenQuad`: Renders a full-screen quad with the given shader - program. - * `ui.js`: Defines the UI using - [dat.GUI](https://workshop.chromeexperiments.com/examples/gui/). - * The global variable `cfg` can be accessed anywhere in the code to read - configuration values. - * `utils.js`: Utilities for JavaScript and WebGL. - * `abort`: Aborts the program and shows an error. - * `loadTexture`: Loads a texture from a URL into WebGL. - * `loadShaderProgram`: Loads shaders from URLs into a WebGL shader program. - * `loadModel`: Loads a model into WebGL buffers. - * `readyModelForDraw`: Configures the WebGL state to draw a model. - * `drawReadyModel`: Draws a model which has been readied. - * `getScissorForLight`: Computes an approximate scissor rectangle for a - light in world space. -* `glsl/`: GLSL code for each part of the pipeline: - * `clear.*.glsl`: Clears each of the `NUM_GBUFFERS` g-buffers. - * `copy.*.glsl`: Performs standard rendering without any fragment shading, - storing all of the resulting values into the `NUM_GBUFFERS` g-buffers. - * `quad.vert.glsl`: Minimal vertex shader for rendering a single quad. - * `deferred.frag.glsl`: Deferred shading pass (for lighting calculations). - Reads from each of the `NUM_GBUFFERS` g-buffers. - * `post1.frag.glsl`: First post-processing pass. -* `lib/`: JavaScript libraries. -* `models/`: OBJ models for testing. Sponza is the default. -* `index.html`: Main HTML page. -* `server.bat` (Windows) or `server.py` (OS X/Linux): - Runs a web server at `localhost:10565`. - -### The Deferred Shading Pipeline - -See the comments in `deferredSetup.js`/`deferredRender.js` for low-level guidance. - -In order to enable and disable effects using the GUI, upload a vec4 uniform -where each component is an enable/disable flag. In JavaScript, the state of the -UI is accessible anywhere as `cfg.enableEffect0`, etc. - -**Pass 1:** Renders the scene geometry and its properties to the g-buffers. -* `copy.vert.glsl`, `copy.frag.glsl` -* The framebuffer object `pass_copy.fbo` must be bound during this pass. -* Renders into `pass_copy.depthTex` and `pass_copy.gbufs[i]`, which need to be - attached to the framebuffer. - -**Pass 2:** Performs lighting and shading into the color buffer. -* `quad.vert.glsl`, `deferred/blinnphong-pointlight.frag.glsl` -* Takes the g-buffers `pass_copy.gbufs`/`depthTex` as texture inputs to the - fragment shader, on uniforms `u_gbufs` and `u_depth`. -* `pass_deferred.fbo` must be bound. -* Renders into `pass_deferred.colorTex`. - -**Pass 3:** Performs post-processing. -* `quad.vert.glsl`, `post/one.frag.glsl` -* Takes `pass_BlinnPhong_PointLight.colorTex` as a texture input `u_color`. -* Renders directly to the screen if there are no additional passes. - -More passes may be added for additional effects (e.g. combining bloom with -motion blur) or optimizations (e.g. two-pass Gaussian blur for bloom) - -#### Debugging - -If there is a WebGL error, it will be displayed on the developer console and -the renderer will be aborted. To find out where the error came from, look at -the backtrace of the error (you may need to click the triangle to expand the -message). The line right below `wrapper @ webgl-debug.js` will point to the -WebGL call that failed. - -#### Changing the number of g-buffers - -Note that the g-buffers are just `vec4`s - you can put any values you want into -them. However, if you want to change the total number of g-buffers (add more -for additional effects or remove some for performance), you will need to make -changes in a number of places: - -* `deferredSetup.js`/`deferredRender.js`: search for `NUM_GBUFFERS` -* `copy.frag.glsl` -* `deferred.frag.glsl` -* `clear.frag.glsl` - - -## Resources - -* [1] Bloom: - [GPU Gems, Ch. 21](http://http.developer.nvidia.com/GPUGems/gpugems_ch21.html) -* [2] Screen-Space Ambient Occlusion: - [Floored Article](http://floored.com/blog/2013/ssao-screen-space-ambient-occlusion.html) -* [3] Post-Process Motion Blur: - [GPU Gems 3, Ch. 27](http://http.developer.nvidia.com/GPUGems3/gpugems3_ch27.html) - -**Also see:** The articles linked in the course schedule. - -### Profiling and debugging tools - -Built into Firefox: -* Canvas inspector -* Shader Editor -* JavaScript debugger and profiler - -Built into Chrome: -* JavaScript debugger and profiler - -Plug-ins: -* (Chrome/Firefox) [Web Tracing Framework](http://google.github.io/tracing-framework/) -* (Chrome) [Shader Editor](https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob) - - -Firefox can also be useful - it has a canvas inspector, WebGL profiling and a -shader editor built in. - - -## README - -Replace the contents of this README.md in a clear manner with the following: - -* A brief description of the project and the specific features you implemented. -* At least one screenshot of your project running. -* A 30+ second video of your project running showing all features. - [Open Broadcaster Software](http://obsproject.com) is recommended. - (Even though your demo can be seen online, using multiple render targets - means it won't run on many computers. A video will work everywhere.) -* A performance analysis (described below). - -### Performance Analysis - -See above. - -### GitHub Pages - -Since this assignment is in WebGL, you can make your project easily viewable by -taking advantage of GitHub's project pages feature. - -Once you are done with the assignment, create a new branch: - -`git branch gh-pages` - -Push the branch to GitHub: - -`git push origin gh-pages` - -Now, you can go to `.github.io/` to see your -renderer online from anywhere. Add this link to your README. - -## Submit - -1. Open a GitHub pull request so that we can see that you have finished. - The title should be "Submission: YOUR NAME". - * **ADDITIONALLY:** - In the body of the pull request, include a link to your repository. -2. Send an email to the TA (gmail: kainino1+cis565@) with: - * **Subject**: in the form of `[CIS565] Project N: PENNKEY`. - * Direct link to your pull request on GitHub. - * Estimate the amount of time you spent on the project. - * If there were any outstanding problems, briefly explain. - * **List the extra features you did.** - * Feedback on the project itself, if any. - -### Third-Party Code Policy - -* Use of any third-party code must be approved by asking on our mailing list. -* If it is approved, all students are welcome to use it. Generally, we approve - use of third-party code that is not a core part of the project. For example, - for the path tracer, we would approve using a third-party library for loading - models, but would not approve copying and pasting a CUDA function for doing - refraction. -* Third-party code **MUST** be credited in README.md. -* Using third-party code without its approval, including using another - student's code, is an academic integrity violation, and will, at minimum, - result in you receiving an F for the semester. +[3] http://http.developer.nvidia.com/GPUGems3/gpugems3_ch27.html diff --git a/glsl/copy.frag.glsl b/glsl/copy.frag.glsl index 0f5f8f7..e530356 100644 --- a/glsl/copy.frag.glsl +++ b/glsl/copy.frag.glsl @@ -5,6 +5,7 @@ precision highp int; uniform sampler2D u_colmap; uniform sampler2D u_normap; +uniform float u_specCoff; varying vec3 v_position; varying vec3 v_normal; @@ -12,4 +13,8 @@ varying vec2 v_uv; void main() { // TODO: copy values into gl_FragData[0], [1], etc. + gl_FragData[0]=vec4(v_position,1); + gl_FragData[1]=vec4(v_normal,1); + gl_FragData[2]=texture2D(u_colmap, v_uv); + gl_FragData[3]=texture2D(u_normap, v_uv); } diff --git a/glsl/copy.vert.glsl b/glsl/copy.vert.glsl index ec14e69..2a7dba1 100644 --- a/glsl/copy.vert.glsl +++ b/glsl/copy.vert.glsl @@ -4,6 +4,7 @@ precision highp float; precision highp int; uniform mat4 u_cameraMat; +uniform vec3 u_camPos; attribute vec3 a_position; attribute vec3 a_normal; @@ -11,11 +12,13 @@ attribute vec2 a_uv; varying vec3 v_position; varying vec3 v_normal; +varying vec3 c_position; varying vec2 v_uv; void main() { gl_Position = u_cameraMat * vec4(a_position, 1.0); v_position = a_position; + c_position = u_camPos; v_normal = a_normal; v_uv = a_uv; } diff --git a/glsl/deferred/ambient.frag.glsl b/glsl/deferred/ambient.frag.glsl index 1fd4647..86f826b 100644 --- a/glsl/deferred/ambient.frag.glsl +++ b/glsl/deferred/ambient.frag.glsl @@ -5,23 +5,60 @@ precision highp int; #define NUM_GBUFFERS 4 +uniform int u_enableToon; +uniform vec3 u_camPos; uniform sampler2D u_gbufs[NUM_GBUFFERS]; uniform sampler2D u_depth; varying vec2 v_uv; +float contourStep(float angle){ + if(angle<0.0) return 0.0; + angle/=0.1; + //if(angle<1.0) return 0.0; + if(angle<2.0) return 0.0; + //if(angle<3.0) return 0.2; + if(angle<4.0) return 0.25; + //if(angle<5.0) return 0.4; + if(angle<6.0) return 0.5; + //if(angle<7.0) return 0.6; + if(angle<8.0) return 0.75; + //if(angle<9.0) return 0.8; + return 1.0; +} + +vec3 applyNormalMap(vec3 geomnor, vec3 normap) { + normap = normap * 2.0 - 1.0; + vec3 up = normalize(vec3(0.001, 1, 0.001)); + vec3 surftan = normalize(cross(geomnor, up)); + vec3 surfbinor = cross(geomnor, surftan); + return normap.y * surftan + normap.x * surfbinor + normap.z * geomnor; +} + void main() { vec4 gb0 = texture2D(u_gbufs[0], v_uv); vec4 gb1 = texture2D(u_gbufs[1], v_uv); vec4 gb2 = texture2D(u_gbufs[2], v_uv); vec4 gb3 = texture2D(u_gbufs[3], v_uv); - float depth = texture2D(u_depth, v_uv).x; - // TODO: Extract needed properties from the g-buffers into local variables + float depth = texture2D(u_depth, v_uv).x; - if (depth == 1.0) { + if (depth == 1.0) { gl_FragColor = vec4(0, 0, 0, 0); // set alpha to 0 return; } - gl_FragColor = vec4(0.1, 0.1, 0.1, 1); // TODO: replace this + if(u_enableToon==1){ + vec3 geomnor=gb1.xyz; // Normals of the geometry as defined, without normal mapping + vec3 colmap=gb2.xyz; // The color map - unlit "albedo" (surface color) + vec3 normap=gb3.xyz; + vec3 nor=applyNormalMap(geomnor,normap); + vec3 cameraDir=normalize(u_camPos-gb0.xyz); + float angle=dot(nor,cameraDir); + angle=contourStep(angle); + gl_FragColor=vec4(angle,angle,angle,1); + } + else{ + vec3 colmap=gb2.xyz; + gl_FragColor = 0.2*gb2; + } } diff --git a/glsl/deferred/blinnphong-pointlight.frag.glsl b/glsl/deferred/blinnphong-pointlight.frag.glsl index b24a54a..6039f6f 100644 --- a/glsl/deferred/blinnphong-pointlight.frag.glsl +++ b/glsl/deferred/blinnphong-pointlight.frag.glsl @@ -4,8 +4,11 @@ precision highp int; #define NUM_GBUFFERS 4 +uniform int u_debugScissor; uniform vec3 u_lightCol; uniform vec3 u_lightPos; +uniform vec3 u_camPos; +uniform float u_specCoff; uniform float u_lightRad; uniform sampler2D u_gbufs[NUM_GBUFFERS]; uniform sampler2D u_depth; @@ -35,5 +38,25 @@ void main() { return; } - gl_FragColor = vec4(0, 0, 1, 1); // TODO: perform lighting calculations + vec3 geomnor=gb1.xyz; // Normals of the geometry as defined, without normal mapping + vec3 colmap=gb2.xyz; // The color map - unlit "albedo" (surface color) + vec3 normap=gb3.xyz; + vec3 nor=applyNormalMap(geomnor,normap); + vec3 cameraDir=normalize(u_camPos-gb0.xyz); + vec3 lightDir=normalize(gb0.xyz-u_lightPos); + vec3 ref=normalize(lightDir-2.0*nor*dot(lightDir,nor)); + + vec3 diff=u_lightCol*dot(nor,cameraDir); + vec3 spec=u_lightCol*pow(max(0.0,dot(ref,cameraDir)),u_specCoff); + + vec3 color=0.5*diff+0.5*spec; + + float len=length(u_lightPos-gb0.xyz); + if(u_debugScissor==1&&len<2.0*u_lightRad){ + gl_FragColor=vec4(color+vec3(0.2,0,0),1); + } + else if(len0.8) + result+=v; + else result+=pow(COFF,i)*texture2D(u_gbuf,v_uv); + } + for(float i=1.0;i<=N;++i){ + vec4 v=pow(COFF,i)*texture2D(u_gbuf,vec2(v_uv.x-0.005*i,v_uv.y)); + if(length(v.xyz)>0.8) + result+=v; + else result+=pow(COFF,i)*texture2D(u_gbuf,v_uv); + } + return result; +} + void main() { - vec4 color = texture2D(u_color, v_uv); + float depth = texture2D(u_depth, v_uv).x; + vec4 H = vec4(v_uv.x*2.0-1.0,(1.0-v_uv.y)*2.0-1.0,depth,1.0); + vec4 D = u_currentMat*H; + vec4 worldPos=D/D.w; + vec4 currentPos=H; + vec4 previousPos=u_previousMat*worldPos; + previousPos=previousPos/previousPos.w; + vec2 v=(currentPos.xy - previousPos.xy)/2.0; + + vec4 color1,color2,color; + if(u_mode==0) color1 = texture2D(u_color, v_uv); + else color1 = accumulateX(v_uv,u_color); + + v=0.05*v+1.0*v_uv; + if(u_mode==0) color2 = texture2D(u_color, v); + else color2 = accumulateX(v,u_color); + color=color1+color2; + color/=2.0; if (color.a == 0.0) { gl_FragColor = SKY_COLOR; return; diff --git a/glsl/post/two.frag.glsl b/glsl/post/two.frag.glsl new file mode 100644 index 0000000..04e51cc --- /dev/null +++ b/glsl/post/two.frag.glsl @@ -0,0 +1,51 @@ +#version 100 +#define N 32.0 +#define COFF 0.8 +precision highp float; +precision highp int; + +uniform mat4 u_previousMat; +uniform mat4 u_currentMat; +uniform int u_mode; +uniform sampler2D u_color; +uniform sampler2D u_depth; + +varying vec2 v_uv; + +const vec4 SKY_COLOR = vec4(0.01, 0.14, 0.42, 1.0); + +vec4 accumulateY(vec2 v_uv,sampler2D u_gbuf){ + vec4 result=texture2D(u_gbuf,v_uv); + for(float i=1.0;i<=N;++i){ + vec4 v=pow(COFF,i)*texture2D(u_gbuf,vec2(v_uv.x,v_uv.y+0.005*i)); + if(length(v.xyz)>0.8) + result+=v; + else result+=pow(COFF,i)*texture2D(u_gbuf,v_uv); + } + for(float i=1.0;i<=N;++i){ + vec4 v=pow(COFF,i)*texture2D(u_gbuf,vec2(v_uv.x,v_uv.y-0.005*i)); + if(length(v.xyz)>0.8) + result+=v; + else result+=pow(COFF,i)*texture2D(u_gbuf,v_uv); + } + return result; +} + +float getNum(){ + float result=1.0+2.0*(1.0-pow(COFF,N)); + result=result+2.0*result*(1.0-pow(COFF,N)); + return result; +} + +void main() { + vec4 color; + color=accumulateY(v_uv,u_color); + color/=getNum(); + + if (color.a == 0.0) { + gl_FragColor = SKY_COLOR; + return; + } + + gl_FragColor = 1.0*color; +} diff --git a/img/ana_bloom1.jpg b/img/ana_bloom1.jpg new file mode 100644 index 0000000..f884280 Binary files /dev/null and b/img/ana_bloom1.jpg differ diff --git a/img/ana_bloom2.png b/img/ana_bloom2.png new file mode 100644 index 0000000..e3d3c5e Binary files /dev/null and b/img/ana_bloom2.png differ diff --git a/img/ana_scissor.png b/img/ana_scissor.png new file mode 100644 index 0000000..04ae935 Binary files /dev/null and b/img/ana_scissor.png differ diff --git a/img/blur.jpg b/img/blur.jpg new file mode 100644 index 0000000..cfeb192 Binary files /dev/null and b/img/blur.jpg differ diff --git a/img/debug1.jpg b/img/debug1.jpg new file mode 100644 index 0000000..4a60e11 Binary files /dev/null and b/img/debug1.jpg differ diff --git a/img/debug2.jpg b/img/debug2.jpg new file mode 100644 index 0000000..d8053ba Binary files /dev/null and b/img/debug2.jpg differ diff --git a/img/debug3.jpg b/img/debug3.jpg new file mode 100644 index 0000000..d6bff96 Binary files /dev/null and b/img/debug3.jpg differ diff --git a/img/debug4.jpg b/img/debug4.jpg new file mode 100644 index 0000000..0a0c26d Binary files /dev/null and b/img/debug4.jpg differ diff --git a/img/debug5.png b/img/debug5.png new file mode 100644 index 0000000..ded742f Binary files /dev/null and b/img/debug5.png differ diff --git a/img/debug6.png b/img/debug6.png new file mode 100644 index 0000000..ed88c16 Binary files /dev/null and b/img/debug6.png differ diff --git a/img/rep1.jpg b/img/rep1.jpg new file mode 100644 index 0000000..77c7d05 Binary files /dev/null and b/img/rep1.jpg differ diff --git a/img/rep2.png b/img/rep2.png new file mode 100644 index 0000000..20f4360 Binary files /dev/null and b/img/rep2.png differ diff --git a/img/rep3.png b/img/rep3.png new file mode 100644 index 0000000..4ebd361 Binary files /dev/null and b/img/rep3.png differ diff --git a/img/rep4.jpg b/img/rep4.jpg new file mode 100644 index 0000000..ee1d1f5 Binary files /dev/null and b/img/rep4.jpg differ diff --git a/img/rep5.jpg b/img/rep5.jpg new file mode 100644 index 0000000..14d8023 Binary files /dev/null and b/img/rep5.jpg differ diff --git a/img/scissor.png b/img/scissor.png new file mode 100644 index 0000000..5ab0e37 Binary files /dev/null and b/img/scissor.png differ diff --git a/img/screenshot.png b/img/screenshot.png new file mode 100644 index 0000000..50b9e3e Binary files /dev/null and b/img/screenshot.png differ diff --git a/index.html b/index.html index 9f8639c..840fd2d 100644 --- a/index.html +++ b/index.html @@ -96,7 +96,7 @@ (Disable before measuring performance.)
- + 

diff --git a/js/deferredRender.js b/js/deferredRender.js
index b1f238b..6d142f7 100644
--- a/js/deferredRender.js
+++ b/js/deferredRender.js
@@ -10,7 +10,8 @@
             !R.prog_Ambient ||
             !R.prog_BlinnPhong_PointLight ||
             !R.prog_Debug ||
-            !R.progPost1)) {
+            !R.progPost1||
+            !R.progPost2)) {
             console.log('waiting for programs to load...');
             return;
         }
@@ -28,12 +29,13 @@
         // CHECKITOUT: START HERE! You can even uncomment this:
         //debugger;
 
-        { // TODO: this block should be removed after testing renderFullScreenQuad
+        /*{ // TODO: this block should be removed after testing renderFullScreenQuad
             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
             // TODO: Implement/test renderFullScreenQuad first
+            
             renderFullScreenQuad(R.progRed);
             return;
-        }
+        }*/
 
         R.pass_copy.render(state);
 
@@ -44,9 +46,10 @@
         } else {
             // * Deferred pass and postprocessing pass(es)
             // TODO: uncomment these
-            //R.pass_deferred.render(state);
-            //R.pass_post1.render(state);
-
+            R.pass_deferred.render(state);
+            R.pass_post1.render(state);
+            if(cfg.enableBlur)
+            	R.pass_post2.render(state);
             // OPTIONAL TODO: call more postprocessing passes, if any
         }
     };
@@ -57,22 +60,28 @@
     R.pass_copy.render = function(state) {
         // * Bind the framebuffer R.pass_copy.fbo
         // TODO: ^
-
+    	gl.bindFramebuffer(gl.FRAMEBUFFER, R.pass_copy.fbo);
         // * Clear screen using R.progClear
-        TODO: renderFullScreenQuad(R.progClear);
+        renderFullScreenQuad(R.progClear);
+    	
         // * Clear depth buffer to value 1.0 using gl.clearDepth and gl.clear
         // TODO: ^
         // TODO: ^
-
+    	gl.clearDepth(1.0);
+    	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         // * "Use" the program R.progCopy.prog
         // TODO: ^
         // TODO: Write glsl/copy.frag.glsl
+    	gl.useProgram(R.progCopy.prog);
 
         var m = state.cameraMat.elements;
+        
+        //var invM= THREE.Matrix4.prototype.getInverse(state.cameraMat).elements;
         // * Upload the camera matrix m to the uniform R.progCopy.u_cameraMat
         //   using gl.uniformMatrix4fv
         // TODO: ^
-
+        gl.uniformMatrix4fv(R.progCopy.u_cameraMat, false, new Float32Array(m));
+        
         // * Draw the scene
         drawScene(state);
     };
@@ -119,21 +128,48 @@
         // Enable blending and use gl.blendFunc to blend with:
         //   color = 1 * src_color + 1 * dst_color
         // TODO: ^
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.ONE,gl.ONE);
 
         // * Bind/setup the ambient pass, and render using fullscreen quad
         bindTexturesForLightPass(R.prog_Ambient);
+        var pos=state.cameraPos;
+        var toon=cfg.enableToon?1:0;
+        gl.uniform3f(R.prog_Ambient.u_camPos,pos.x,pos.y,pos.z);
+        gl.uniform1i(R.prog_Ambient.u_enableToon, toon);
         renderFullScreenQuad(R.prog_Ambient);
-
+        
         // * Bind/setup the Blinn-Phong pass, and render using fullscreen quad
         bindTexturesForLightPass(R.prog_BlinnPhong_PointLight);
-
+        
+        //var pos=state.cameraPos;
+        gl.uniform3f(R.prog_BlinnPhong_PointLight.u_camPos,pos.x,pos.y,pos.z);
+        
+        gl.uniform1f(R.prog_BlinnPhong_PointLight.u_specCoff, R.specCoff);
+        
+        var scissor=cfg.debugScissor?1:0;
+        gl.uniform1i(R.prog_BlinnPhong_PointLight.u_debugScissor, scissor);
+    
         // TODO: add a loop here, over the values in R.lights, which sets the
         //   uniforms R.prog_BlinnPhong_PointLight.u_lightPos/Col/Rad etc.,
         //   then does renderFullScreenQuad(R.prog_BlinnPhong_PointLight).
-
+        for(var i=0;i15){
+        	//R.previousMat=new THREE.Matrix4(state.cameraMat.elements);
+        	var tmp=state.cameraMat.elements;
+        	R.previousMat.set(tmp[0],tmp[4],tmp[8],tmp[12],tmp[1],tmp[5],tmp[9],tmp[13]
+        	,tmp[2],tmp[6],tmp[10],tmp[14],tmp[3],tmp[7],tmp[11],tmp[15]);
+        	R.count=0;
+        }
+        R.count++;
     };
+    
+    R.pass_post2.render = function(state) {
+        // * Unbind any existing framebuffer (if there are no more passes)
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+        // * Clear the framebuffer depth to 1.0
+        gl.clearDepth(1.0);
+        gl.clear(gl.DEPTH_BUFFER_BIT);
+
+        // * Bind the postprocessing shader program
+        
+        gl.useProgram(R.progPost2.prog);
+
+        // * Bind the deferred pass's color output as a texture input
+        // Set gl.TEXTURE0 as the gl.activeTexture unit
+        // TODO: ^
+        gl.activeTexture(gl.TEXTURE4);
+        // Bind the TEXTURE_2D, R.pass_deferred.colorTex to the active texture unit
+        // TODO: ^
+        gl.bindTexture(gl.TEXTURE_2D, R.pass_post1.colorTex);
+        // Configure the R.progPost1.u_color uniform to point at texture unit 0
+        gl.uniform1i(R.pass_post2.u_color, 4);
+       
+        // * Render a fullscreen quad to perform shading on
+        renderFullScreenQuad(R.progPost2);
+    };
+
 
     var renderFullScreenQuad = (function() {
         // The variables in this function are private to the implementation of
@@ -205,12 +290,15 @@
         var init = function() {
             // Create a new buffer with gl.createBuffer, and save it as vbo.
             // TODO: ^
+        	vbo=gl.createBuffer();
 
             // Bind the VBO as the gl.ARRAY_BUFFER
             // TODO: ^
+        	gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
             // Upload the positions array to the currently-bound array buffer
             // using gl.bufferData in static draw mode.
             // TODO: ^
+        	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
         };
 
         return function(prog) {
@@ -218,22 +306,24 @@
                 // If the vbo hasn't been initialized, initialize it.
                 init();
             }
-
             // Bind the program to use to draw the quad
             gl.useProgram(prog.prog);
 
             // Bind the VBO as the gl.ARRAY_BUFFER
             // TODO: ^
+            gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
             // Enable the bound buffer as the vertex attrib array for
             // prog.a_position, using gl.enableVertexAttribArray
             // TODO: ^
+            gl.enableVertexAttribArray(prog.a_position);
             // Use gl.vertexAttribPointer to tell WebGL the type/layout for
             // prog.a_position's access pattern.
             // TODO: ^
-
+            gl.vertexAttribPointer(prog.a_position, 3, gl.FLOAT, false, 0, 0);
             // Use gl.drawArrays (or gl.drawElements) to draw your quad.
             // TODO: ^
-
+            //gl.drawElements(gl.TRIANGLES, 20, gl.UNSIGNED_INT, 0);
+            gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
             // Unbind the array buffer.
             gl.bindBuffer(gl.ARRAY_BUFFER, null);
         };
diff --git a/js/deferredSetup.js b/js/deferredSetup.js
index 115b016..3fe0b6a 100644
--- a/js/deferredSetup.js
+++ b/js/deferredSetup.js
@@ -6,9 +6,11 @@
     R.pass_debug = {};
     R.pass_deferred = {};
     R.pass_post1 = {};
+    R.pass_post2 = {};
     R.lights = [];
-
-    R.NUM_GBUFFERS = 4;
+    R.previousMat = new THREE.Matrix4();
+    R.count=-1;
+    R.NUM_GBUFFERS = 5;
 
     /**
      * Set up the deferred pipeline framebuffer objects and textures.
@@ -18,6 +20,7 @@
         loadAllShaderPrograms();
         R.pass_copy.setup();
         R.pass_deferred.setup();
+        R.pass_post1.setup();
     };
 
     // TODO: Edit if you want to change the light initial positions
@@ -26,6 +29,9 @@
     R.light_dt = -0.03;
     R.LIGHT_RADIUS = 4.0;
     R.NUM_LIGHTS = 20; // TODO: test with MORE lights!
+    Math.seedrandom(0);
+    //R.specCoff=1+Math.random()*60;
+    R.specCoff=20.0;
     var setupLights = function() {
         Math.seedrandom(0);
 
@@ -69,7 +75,7 @@
             R.pass_copy.gbufs.push(tex);
             attachments.push(attachment);
         }
-
+        
         // * Check for framebuffer errors
         abortIfFramebufferIncomplete(R.pass_copy.fbo);
         // * Tell the WEBGL_draw_buffers extension which FBO attachments are
@@ -93,6 +99,20 @@
         //   being used. (This extension allows for multiple render targets.)
         gl_draw_buffers.drawBuffersWEBGL([gl_draw_buffers.COLOR_ATTACHMENT0_WEBGL]);
     };
+    
+    R.pass_post1.setup = function() {
+        // * Create the FBO
+        R.pass_post1.fbo = gl.createFramebuffer();
+        // * Create, bind, and store a single color target texture for the FBO
+        R.pass_post1.colorTex = createAndBindColorTargetTexture(
+            R.pass_post1.fbo, gl_draw_buffers.COLOR_ATTACHMENT0_WEBGL);
+
+        // * Check for framebuffer errors
+        abortIfFramebufferIncomplete(R.pass_post1.fbo);
+        // * Tell the WEBGL_draw_buffers extension which FBO attachments are
+        //   being used. (This extension allows for multiple render targets.)
+        gl_draw_buffers.drawBuffersWEBGL([gl_draw_buffers.COLOR_ATTACHMENT0_WEBGL]);
+    };
 
     /**
      * Loads all of the shader programs used in the pipeline.
@@ -110,6 +130,7 @@
                 p.a_position  = gl.getAttribLocation(prog, 'a_position');
                 p.a_normal    = gl.getAttribLocation(prog, 'a_normal');
                 p.a_uv        = gl.getAttribLocation(prog, 'a_uv');
+                
 
                 // Save the object into this variable for access later
                 R.progCopy = p;
@@ -129,6 +150,8 @@
 
         loadDeferredProgram('ambient', function(p) {
             // Save the object into this variable for access later
+        	p.u_camPos = gl.getUniformLocation(p.prog, 'u_camPos');
+        	p.u_enableToon = gl.getUniformLocation(p.prog, 'u_enableToon');
             R.prog_Ambient = p;
         });
 
@@ -137,6 +160,9 @@
             p.u_lightPos = gl.getUniformLocation(p.prog, 'u_lightPos');
             p.u_lightCol = gl.getUniformLocation(p.prog, 'u_lightCol');
             p.u_lightRad = gl.getUniformLocation(p.prog, 'u_lightRad');
+            p.u_camPos = gl.getUniformLocation(p.prog, 'u_camPos');
+            p.u_debugScissor= gl.getUniformLocation(p.prog, 'u_debugScissor');
+            p.u_specCoff  = gl.getUniformLocation(p.prog, 'u_specCoff');
             R.prog_BlinnPhong_PointLight = p;
         });
 
@@ -147,10 +173,20 @@
         });
 
         loadPostProgram('one', function(p) {
-            p.u_color    = gl.getUniformLocation(p.prog, 'u_color');
+            p.u_color = gl.getUniformLocation(p.prog, 'u_color');
+            p.u_mode = gl.getUniformLocation(p.prog, 'u_mode');
+            p.u_depth = gl.getUniformLocation(p.prog, 'u_depth');
+            p.u_previousMat = gl.getUniformLocation(p.prog, 'u_previousMat');
+            p.u_currentMat = gl.getUniformLocation(p.prog, 'u_currentMat');
             // Save the object into this variable for access later
             R.progPost1 = p;
         });
+        
+        loadPostProgram('two', function(p) {
+            p.u_color = gl.getUniformLocation(p.prog, 'u_color');
+            // Save the object into this variable for access later
+            R.progPost2 = p;
+        });
 
         // TODO: If you add more passes, load and set up their shader programs.
     };
diff --git a/js/framework.js b/js/framework.js
index bd07d47..8f25937 100644
--- a/js/framework.js
+++ b/js/framework.js
@@ -68,8 +68,13 @@ var width, height;
 
     var init = function() {
         // TODO: For performance measurements, disable debug mode!
-        var debugMode = true;
-
+    	canvas = document.getElementById('canvas');
+    	renderer = new THREE.WebGLRenderer({
+    		canvas: canvas,
+            preserveDrawingBuffer: debugMode
+    	});
+    	gl = renderer.context;
+        var debugMode = false;
         if (debugMode) {
             $('#debugmodewarning').css('display', 'block');
             var throwOnGLError = function(err, funcName, args) {
diff --git a/js/ui.js b/js/ui.js
index 05c1852..0e18aad 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -7,6 +7,8 @@ var cfg;
         // TODO: Define config fields and defaults here
         this.debugView = -1;
         this.debugScissor = false;
+        this.enableBlur = false;
+        this.enableToon = false;
         this.enableEffect0 = false;
     };
 
@@ -25,6 +27,8 @@ var cfg;
             '5 Surface normal':  5
         });
         gui.add(cfg, 'debugScissor');
+        gui.add(cfg, 'enableBlur');
+        gui.add(cfg, 'enableToon');
 
         var eff0 = gui.addFolder('EFFECT NAME HERE');
         eff0.add(cfg, 'enableEffect0');