diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 856ab54..5bac232 --- a/README.md +++ b/README.md @@ -3,356 +3,67 @@ 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) +* Guan Sun +* Tested on: **Google Chrome 46.0.2490.80** on + Windows 7, i7-4770 @ 3.40GHz 16GB, NVIDIA NVS 310 (Moore 100C Lab) ### Live Online -[![](img/thumb.png)](http://TODO.github.io/Project6-WebGL-Deferred-Shading) +[![](img/thumb.png)](http://pontusun.github.io/Project6-WebGL-Deferred-Shading/) ### Demo Video +[![](img/1.png)](https://youtu.be/NqMIuMhTMnI) -[![](img/video.png)](TODO) -### (TODO: Your README) +## Project Description: +In this project, a a deferred shading pipeline and various lighting and visual effects are implemented using GLSL and WebGL. +The implemented features include, +* Effects: + * Deferred Blinn-Phong shading (diffuse + specular) for point lights + ![](img/thumb.png) + A standared Blinn-Phong sharder. Defferred means that no shading is actually performaed in the first pass of the vertex and pixel shaders, instdead shading is "deferred" untill a second pass. On the first pass, only data that is required for shading computation is gathered and put into the geometry buffer(G-buffer). Then the sharder computs the lighting at each pixel using the information. -*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. + * Bloom using post-process blur + ![](img/11.png) + Blur using a 5*5 kernal in one single pass to simulate the bloom effect. This will slightly decrease the perfomance. Possible further improvement could be use a two-pass blur, which will require less computation. -This assignment has a considerable amount of performance analysis compared -to implementation work. Complete the implementation early to leave time! - - -Instructions (delete me) -======================== - -This is due at midnight on the evening of Tuesday, October 27. - -**Summary:** In this project, you'll be introduced to the basics of deferred -shading and WebGL. You'll use GLSL and WebGL to implement a deferred shading -pipeline and various lighting and visual effects. - -**Recommendations:** -Take screenshots as you go. Use them to document your progress in your README! - -Read (or at least skim) the full README before you begin, so that you know what -to expect and what to prepare for. - -### Running the code - -If you have Python, you should be able to run `server.py` to start a server. -Then, open [`http://localhost:10565/`](http://localhost:10565/) in your browser. - -This project requires a WebGL-capable web browser with support for -`WEBGL_draw_buffers`. You can check for support on -[WebGL Report](http://webglreport.com/). - -Google Chrome seems to work best on all platforms. If you have problems running -the starter code, use Chrome or Chromium, and make sure you have updated your -browser and video drivers. - -In Moore 100C, both Chrome and Firefox work. -See below for notes on profiling/debugging tools. - -Use the screenshot button to save a screenshot. - -## Requirements - -**Ask on the mailing list for any clarifications.** - -In this project, you are given code for: - -* Loading OBJ files and color/normal map textures -* Camera control -* Partial implementation of deferred shading including many helper functions - -### Required Tasks - -**Before doing performance analysis,** you must disable debug mode by changing -`debugMode` to `false` in `framework.js`. Keep it enabled when developing - it -helps find WebGL errors *much* more easily. - -You will need to perform the following tasks: - -* Complete the deferred shading pipeline so that the Blinn-Phong and Post1 - shaders recieve the correct input. Go through the Starter Code Tour **before - continuing!** - -**Effects:** - -* Implement deferred Blinn-Phong shading (diffuse + specular) for point lights - * With normal mapping (code provided) - * For deferred shading, you want to use a lighting model for the point lights - which has a limited radius - so that adding a scissor or proxy geometry - will not cause parts of the lighting to disappear. It should look very - similar both with and without scissor/proxy optimization. Here is a - convenient lighting model, but you can also use others: - * `float attenuation = max(0.0, u_lightRad - dist_from_surface_to_light);` - -* Implement one of the following effects: - * Bloom using post-process blur (box or Gaussian) [1] * Toon shading (with ramp shading + simple depth-edge detection for outlines) - -**Optimizations:** - -* Scissor test optimization: when accumulating shading from each point - light source, only render in a rectangle around the light. - * Show a debug view for this (showing scissor masks clearly), e.g. by - modifying and using `red.frag.glsl` with additive blending and alpha = 0.1. - * Code is provided to compute this rectangle for you, and there are - comments at the relevant place in `deferredRender.js` with more guidance. - * **NOTE:** The provided scissor function is not very accurate - it is a - quick hack which results in some errors (as can be seen in the live - demo). - -* Optimized g-buffer format - reduce the number and size of g-buffers: - * Ideas: - * Pack values together into vec4s - * Use 2-component normals - * Quantize values by using smaller texture types instead of gl.FLOAT - * Reduce number of properties passed via g-buffer, e.g. by: - * Applying the normal map in the `copy` shader pass instead of - copying both geometry normals and normal maps - * Reconstructing world space position using camera matrices and X/Y/depth - * For credit, you must show a good optimization effort and record the - performance of each version you test, in a simple table. - * It is expected that you won't need all 4 provided g-buffers for a basic - pipeline - make sure you disable the unused ones. - * See mainly: `copy.frag.glsl`, `deferred/*.glsl`, `deferredSetup.js` - -### Extra Tasks - -You must do at least **10 points** worth of extra features (effects or -optimizations/analysis). - -**Effects:** - -* (3pts) The effect you didn't choose above (bloom or toon shading) - -* (3pts) Screen-space motion blur (blur along velocity direction) [3] - -* (2pts) Allow variability in additional material properties - * Include other properties (e.g. specular coeff/exponent) in g-buffers - * Use this to render objects with different material properties - * These may be uniform across one model draw call, but you'll have to show - multiple models - -**Optimizations/Analysis:** - -* (2pts) Improved screen-space AABB for scissor test - (smaller/more accurate than provided - but beware of CPU/GPU tradeoffs) - -* (3pts) Two-pass **Gaussian** blur using separable convolution (using a second - postprocess render pass) to improve bloom or other 2D blur performance - -* (4-6pts) Light proxies - * (4pts) Instead of rendering a scissored full-screen quad for every light, - render some proxy geometry which covers the part of the screen affected by - the light (e.g. a sphere, for an attenuated point light). - * A model called `sphereModel` is provided which can be drawn in the same - way as the code in `drawScene`. (Must be drawn with a vertex shader which - scales it to the light radius and translates it to the light position.) - * (+2pts) To avoid lighting geometry far behind the light, render the proxy - geometry (e.g. sphere) using an inverted depth test - (`gl.depthFunc(gl.GREATER)`) with depth writing disabled (`gl.depthMask`). - This test will pass only for parts of the screen for which the backside of - the sphere appears behind parts of the scene. - * Note that the copy pass's depth buffer must be bound to the FBO during - this operation! - * Show a debug view for this (showing light proxies) - * Compare performance of this, naive, and scissoring. - -* (8pts) Tile-based deferred shading with detailed performance comparison - * On the CPU, check which lights overlap which tiles. Then, render each tile - just once for all lights (instead of once for each light), applying only - the overlapping lights. - * The method is described very well in - [Yuqin & Sijie's README](https://github.com/YuqinShao/Tile_Based_WebGL_DeferredShader/blob/master/README.md#algorithm-details). - * This feature requires allocating the global light list and tile light - index lists as shown at this link. These can be implemented as textures. - * Show a debug view for this (number of lights per tile) - -* (6pts) Deferred shading without multiple render targets - (i.e. without WEBGL_draw_buffers). - * Render the scene once for each target g-buffer, each time into a different - framebuffer object. - * Include a detailed performance analysis, comparing with/without - WEBGL_draw_buffers (like in the - [Mozilla blog article](https://hacks.mozilla.org/2014/01/webgl-deferred-shading/)). - -* (2-6pts) Compare performance to equivalently-lit forward-rendering: - * (2pts) With no forward-rendering optimizations - * (+2pts) Coarse, per-object back-to-front sorting of geometry for early-z - * (Of course) must render many objects to test - * (+2pts) Z-prepass for early-z - -This extra feature list is not comprehensive. If you have a particular idea -that you would like to implement, please **contact us first** (preferably on -the mailing list). - -**Where possible, all features should be switchable using the GUI panel in -`ui.js`.** - -### Performance & Analysis - -**Before doing performance analysis,** you must disable debug mode by changing -`debugMode` to `false` in `framework.js`. Keep it enabled when developing - it -helps find WebGL errors *much* more easily. - -Optimize your JavaScript and/or GLSL code. Web Tracing Framework -and Chrome/Firefox's profiling tools (see Resources section) will -be useful for this. For each change -that improves performance, show the before and after render times. - -For each new *effect* feature (required or extra), please -provide the following analysis: - -* Concise overview write-up of the feature. -* Performance change due to adding the feature. - * If applicable, how do parameters (such as number of lights, etc.) - affect performance? Show data with simple graphs. -* If you did something to accelerate the feature, what did you do and why? -* How might this feature be optimized beyond your current implementation? - -For each *performance* feature (required or extra), please provide: - -* Concise overview write-up of the feature. -* Detailed performance improvement analysis of adding the feature - * What is the best case scenario for your performance improvement? What is - the worst? Explain briefly. - * Are there tradeoffs to this performance feature? Explain briefly. - * How do parameters (such as number of lights, tile size, etc.) affect - performance? Show data with graphs. - * Show debug views when possible. - * If the debug view correlates with performance, explain how. - -Note: Be aware that stats.js may give 0 millisecond frame timings in Chrome on -occasion - if this happens, you can use the FPS counter. - -### Starter Code Tour - -You'll be working mainly in `deferredRender.js` using raw WebGL. Three.js is -included in the project for various reasons. You won't use it for much, but its -matrix/vector types may come in handy. - -It's highly recommended that you use the browser debugger to inspect variables -to get familiar with the code. At any point, you can also -`console.log(some_var);` to show it in the console and inspect it. - -The setup in `deferredSetup` is already done for you, for many of the features. -If you want to add uniforms (textures or values), you'll change them here. -Therefore, it is recommended that you review the comments to understand the -process, BEFORE starting work in `deferredRender`. - -In `deferredRender`, start at the **START HERE!** comment. -Work through the appropriate `TODO`s as you go - most of them are very -small. Test incrementally (after implementing each part, instead of testing -all at once). -* (The first thing you should be doing is implementing the fullscreen quad!) -* See the note in the Debugging section on how to test the first part of the - pipeline incrementally. - -Your _next_ first goal should be to get the debug views working. -Add code in `debug.frag.glsl` to examine your g-buffers before trying to -render them. (Set the debugView in the UI to show them.) - -For editing JavaScript, you can use a simple editor with syntax highlighting -such as Sublime, Vim, Emacs, etc., or the editor built into Chrome. - -* `js/`: JavaScript files for this project. - * `main.js`: Handles initialization of other parts of the program. - * `framework.js`: Loads the scene, camera, etc., and calls your setup/render - functions. Hopefully, you won't need to change anything here. - * `deferredSetup.js`: Deferred shading pipeline setup code. - * `createAndBind(Depth/Color)TargetTexture`: Creates empty textures for - binding to frame buffer objects as render targets. - * `deferredRender.js`: Your deferred shading pipeline execution code. - * `renderFullScreenQuad`: Renders a full-screen quad with the given shader - program. - * `ui.js`: Defines the UI using - [dat.GUI](https://workshop.chromeexperiments.com/examples/gui/). - * The global variable `cfg` can be accessed anywhere in the code to read - configuration values. - * `utils.js`: Utilities for JavaScript and WebGL. - * `abort`: Aborts the program and shows an error. - * `loadTexture`: Loads a texture from a URL into WebGL. - * `loadShaderProgram`: Loads shaders from URLs into a WebGL shader program. - * `loadModel`: Loads a model into WebGL buffers. - * `readyModelForDraw`: Configures the WebGL state to draw a model. - * `drawReadyModel`: Draws a model which has been readied. - * `getScissorForLight`: Computes an approximate scissor rectangle for a - light in world space. -* `glsl/`: GLSL code for each part of the pipeline: - * `clear.*.glsl`: Clears each of the `NUM_GBUFFERS` g-buffers. - * `copy.*.glsl`: Performs standard rendering without any fragment shading, - storing all of the resulting values into the `NUM_GBUFFERS` g-buffers. - * `quad.vert.glsl`: Minimal vertex shader for rendering a single quad. - * `deferred.frag.glsl`: Deferred shading pass (for lighting calculations). - Reads from each of the `NUM_GBUFFERS` g-buffers. - * `post1.frag.glsl`: First post-processing pass. -* `lib/`: JavaScript libraries. -* `models/`: OBJ models for testing. Sponza is the default. -* `index.html`: Main HTML page. -* `server.bat` (Windows) or `server.py` (OS X/Linux): - Runs a web server at `localhost:10565`. - -### The Deferred Shading Pipeline - -See the comments in `deferredSetup.js`/`deferredRender.js` for low-level guidance. - -In order to enable and disable effects using the GUI, upload a vec4 uniform -where each component is an enable/disable flag. In JavaScript, the state of the -UI is accessible anywhere as `cfg.enableEffect0`, etc. - -**Pass 1:** Renders the scene geometry and its properties to the g-buffers. -* `copy.vert.glsl`, `copy.frag.glsl` -* The framebuffer object `pass_copy.fbo` must be bound during this pass. -* Renders into `pass_copy.depthTex` and `pass_copy.gbufs[i]`, which need to be - attached to the framebuffer. - -**Pass 2:** Performs lighting and shading into the color buffer. -* `quad.vert.glsl`, `deferred/blinnphong-pointlight.frag.glsl` -* Takes the g-buffers `pass_copy.gbufs`/`depthTex` as texture inputs to the - fragment shader, on uniforms `u_gbufs` and `u_depth`. -* `pass_deferred.fbo` must be bound. -* Renders into `pass_deferred.colorTex`. - -**Pass 3:** Performs post-processing. -* `quad.vert.glsl`, `post/one.frag.glsl` -* Takes `pass_BlinnPhong_PointLight.colorTex` as a texture input `u_color`. -* Renders directly to the screen if there are no additional passes. - -More passes may be added for additional effects (e.g. combining bloom with -motion blur) or optimizations (e.g. two-pass Gaussian blur for bloom) - -#### Debugging - -If there is a WebGL error, it will be displayed on the developer console and -the renderer will be aborted. To find out where the error came from, look at -the backtrace of the error (you may need to click the triangle to expand the -message). The line right below `wrapper @ webgl-debug.js` will point to the -WebGL call that failed. - -When working in the early pipeline (before you have a lit render), it can be -useful to render WITHOUT post-processing. To do this, you have to make sure -that there is NO framebuffer bound while rendering to the screen (that is, bind -null) so that the output will display to the screen instead of saving into a -texture. Writing to gl_FragData[0] is the same as writing to gl_FragColor, so -you'll see whatever you were storing into the first g-buffer. - -#### Changing the number of g-buffers - -Note that the g-buffers are just `vec4`s - you can put any values you want into -them. However, if you want to change the total number of g-buffers (add more -for additional effects or remove some for performance), you will need to make -changes in a number of places: - -* `deferredSetup.js`/`deferredRender.js`: search for `NUM_GBUFFERS` -* `copy.frag.glsl` -* `deferred.frag.glsl` -* `clear.frag.glsl` - + ![](img/10.png) + Toon shading using Sobel operator as an edge detector. This has minor impact on the perfomance. + + +* Optimizations: + * Scissor Test + ![](img/9.png) + When accumulating shading from each point light source, only render in a rectangle around the light. This will greatly imporve the perfomance. + + * Optimized AABB Scissor Test + ![](img/12.png) + This generates smaller bounding boxes for the scissor test, thus further improves the perfomance. + +* Debug views + * Depth + ![](img/3.png) + * Postiion + ![](img/4.png) + * Geometry normal + ![](img/5.png) + * Color map + ![](img/6.png) + * Normal map + ![](img/7.png) + * Surface normal + ![](img/8.png) + +## Performance Comparison +* No Scissor +![](img/13.png) + +* Original Scissor +![](img/14.png) + +* AABB Scissor +![](img/15.png) ## Resources @@ -361,84 +72,4 @@ changes in a number of places: * [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. + [GPU Gems 3, Ch. 27](http://http.developer.nvidia.com/GPUGems3/gpugems3_ch27.html) \ No newline at end of file diff --git a/_gitignore b/_gitignore new file mode 100755 index 0000000..e11de0a --- /dev/null +++ b/_gitignore @@ -0,0 +1,154 @@ +.orig + +# Created by https://www.gitignore.io/api/vim,emacs,sublimetext,webstorm,eclipse + +### Vim ### +[._]*.s[a-w][a-z] +[._]s[a-w][a-z] +*.un~ +Session.vim +.netrwhist +*~ + + +### Emacs ### +# -*- mode: gitignore; -*- +*~ +\#*\# +/.emacs.desktop +/.emacs.desktop.lock +*.elc +auto-save-list +tramp +.\#* + +# Org-mode +.org-id-locations +*_archive + +# flymake-mode +*_flymake.* + +# eshell files +/eshell/history +/eshell/lastdir + +# elpa packages +/elpa/ + +# reftex files +*.rel + +# AUCTeX auto folder +/auto/ + +# cask packages +.cask/ + + +### SublimeText ### +# cache files for sublime text +*.tmlanguage.cache +*.tmPreferences.cache +*.stTheme.cache + +# workspace files are user-specific +*.sublime-workspace + +# project files should be checked into the repository, unless a significant +# proportion of contributors will probably not be using SublimeText +# *.sublime-project + +# sftp configuration file +sftp-config.json + + +### WebStorm ### +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio + +*.iml + +## Directory-based project format: +.idea/ +# if you remove the above rule, at least ignore the following: + +# User-specific stuff: +# .idea/workspace.xml +# .idea/tasks.xml +# .idea/dictionaries + +# Sensitive or high-churn files: +# .idea/dataSources.ids +# .idea/dataSources.xml +# .idea/sqlDataSources.xml +# .idea/dynamic.xml +# .idea/uiDesigner.xml + +# Gradle: +# .idea/gradle.xml +# .idea/libraries + +# Mongo Explorer plugin: +# .idea/mongoSettings.xml + +## File-based project format: +*.ipr +*.iws + +## Plugin-specific files: + +# IntelliJ +/out/ + +# mpeltonen/sbt-idea plugin +.idea_modules/ + +# JIRA plugin +atlassian-ide-plugin.xml + +# Crashlytics plugin (for Android Studio and IntelliJ) +com_crashlytics_export_strings.xml +crashlytics.properties +crashlytics-build.properties + + +### Eclipse ### +*.pydevproject +.metadata +.gradle +bin/ +tmp/ +*.tmp +*.bak +*.swp +*~.nib +local.properties +.settings/ +.loadpath + +# Eclipse Core +.project + +# External tool builders +.externalToolBuilders/ + +# Locally stored "Eclipse launch configurations" +*.launch + +# CDT-specific +.cproject + +# JDT-specific (Eclipse Java Development Tools) +.classpath + +# Java annotation processor (APT) +.factorypath + +# PDT-specific +.buildpath + +# sbteclipse plugin +.target + +# TeXlipse plugin +.texlipse diff --git a/favicon.ico b/favicon.ico old mode 100644 new mode 100755 diff --git a/glsl/clear.frag.glsl b/glsl/clear.frag.glsl old mode 100644 new mode 100755 diff --git a/glsl/copy.frag.glsl b/glsl/copy.frag.glsl old mode 100644 new mode 100755 index 0f5f8f7..a1cc278 --- a/glsl/copy.frag.glsl +++ b/glsl/copy.frag.glsl @@ -12,4 +12,8 @@ varying vec2 v_uv; void main() { // TODO: copy values into gl_FragData[0], [1], etc. + gl_FragData[0] = vec4( v_position,1.0 ); + gl_FragData[1] = vec4( v_normal,1.0); + 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 old mode 100644 new mode 100755 diff --git a/glsl/deferred/ambient.frag.glsl b/glsl/deferred/ambient.frag.glsl old mode 100644 new mode 100755 index 1fd4647..ba5f280 --- a/glsl/deferred/ambient.frag.glsl +++ b/glsl/deferred/ambient.frag.glsl @@ -17,11 +17,12 @@ void main() { 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 + vec3 color = gb2.xyz; if (depth == 1.0) { gl_FragColor = vec4(0, 0, 0, 0); // set alpha to 0 return; } - gl_FragColor = vec4(0.1, 0.1, 0.1, 1); // TODO: replace this + gl_FragColor = vec4(0.1*color, 1); // TODO: replace this } diff --git a/glsl/deferred/blinnphong-pointlight.frag.glsl b/glsl/deferred/blinnphong-pointlight.frag.glsl old mode 100644 new mode 100755 index b24a54a..4ece33b --- a/glsl/deferred/blinnphong-pointlight.frag.glsl +++ b/glsl/deferred/blinnphong-pointlight.frag.glsl @@ -9,6 +9,8 @@ uniform vec3 u_lightPos; uniform float u_lightRad; uniform sampler2D u_gbufs[NUM_GBUFFERS]; uniform sampler2D u_depth; +uniform int u_toon; +uniform vec3 u_cameraPos; varying vec2 v_uv; @@ -26,14 +28,39 @@ void main() { 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 - - // If nothing was rendered to this pixel, set alpha to 0 so that the + + // If nothing was rendered to this pixel, set alpha to 0 so that the // postprocessing step can render the sky color. if (depth == 1.0) { gl_FragColor = vec4(0, 0, 0, 0); return; } + + // TODO: Extract needed properties from the g-buffers into local variables + + vec3 pos = gb0.xyz; // World-space position + 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; // The raw normal map (normals relative to the surface they're on) + vec3 nor = applyNormalMap(geomnor, normap); + + vec3 temp = u_lightPos - pos; + float dist = length(temp); + vec3 light = normalize(temp); + vec3 cam = normalize(u_cameraPos - pos); + + float att = clamp(1.0 - dist/u_lightRad, 0.0, 1.0); + + float diff = max(dot(light, nor), 0.0); + float spec = max(dot(-light + 2.0 * dot(light,nor) * nor, cam), 0.0); + spec = pow(spec, 50.0); + + if(u_toon == 1){ + diff = float(floor(diff/0.2)) * 0.2; + spec = float(floor(spec/0.2)) * 0.2; + } + + gl_FragColor = vec4( clamp((diff+spec)*att*colmap*u_lightCol, 0.0, 1.0), 1.0); - gl_FragColor = vec4(0, 0, 1, 1); // TODO: perform lighting calculations + //gl_FragColor = vec4(0, 0, 1, 1); // TODO: perform lighting calculations } diff --git a/glsl/deferred/debug.frag.glsl b/glsl/deferred/debug.frag.glsl old mode 100644 new mode 100755 index 9cbfae4..1338062 --- a/glsl/deferred/debug.frag.glsl +++ b/glsl/deferred/debug.frag.glsl @@ -28,11 +28,11 @@ void main() { float depth = texture2D(u_depth, v_uv).x; // TODO: Extract needed properties from the g-buffers into local variables // These definitions are suggested for starting out, but you will probably want to change them. - vec3 pos; // World-space position - vec3 geomnor; // Normals of the geometry as defined, without normal mapping - vec3 colmap; // The color map - unlit "albedo" (surface color) - vec3 normap; // The raw normal map (normals relative to the surface they're on) - vec3 nor; // The true normals as we want to light them - with the normal map applied to the geometry normals (applyNormalMap above) + vec3 pos = gb0.xyz; // World-space position + 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; // The raw normal map (normals relative to the surface they're on) + vec3 nor = applyNormalMap(geomnor, normap); // The true normals as we want to light them - with the normal map applied to the geometry normals (applyNormalMap above) if (u_debug == 0) { gl_FragColor = vec4(vec3(depth), 1.0); diff --git a/glsl/post/bloom.frag.glsl b/glsl/post/bloom.frag.glsl new file mode 100755 index 0000000..31b9d52 --- /dev/null +++ b/glsl/post/bloom.frag.glsl @@ -0,0 +1,38 @@ +#version 100 +precision highp float; +precision highp int; + +uniform sampler2D u_color; +varying vec2 v_uv; + +const vec4 SKY_COLOR = vec4(0.01, 0.14, 0.42, 1.0); +int samples = 25; + +void main() { + + vec4 color = texture2D(u_color, v_uv); + + if(color.a == 0.0) + { + gl_FragColor = SKY_COLOR; + return; + } + + int diff = 2;//(samples-1)/2; + vec2 sizeFactor = vec2(1.0/800.0, 1.0/600.0); + + vec4 bloom = vec4(0.0); + + for(int i= -2; i<= 2; i++){ + for(int j= -2; j<= 2; j++){ + vec2 offset = vec2(i,j) * sizeFactor; + bloom += 0.04*texture2D(u_color, v_uv + offset); + } + } + + gl_FragColor = clamp((bloom + color), 0.0, 1.0); + + //gl_FragColor = vec4(1.0); + + +} \ No newline at end of file diff --git a/glsl/post/blur.frag.glsl b/glsl/post/blur.frag.glsl new file mode 100755 index 0000000..952063b --- /dev/null +++ b/glsl/post/blur.frag.glsl @@ -0,0 +1,12 @@ +#version 100 +precision highp float; +precision highp int; + +uniform float opacity; +uniform sampler2D u_color; +varying vec2 v_uv; + +void main() { + vec4 color = texture2D( u_color, v_uv ); + gl_FragColor = opacity * color; +} diff --git a/glsl/post/blur.vect.glsl b/glsl/post/blur.vect.glsl new file mode 100755 index 0000000..16aa4a3 --- /dev/null +++ b/glsl/post/blur.vect.glsl @@ -0,0 +1,10 @@ +#version 100 +precision highp float; +precision highp int; + +varying vec2 v_uv + +void main() { + v_uv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); +} \ No newline at end of file diff --git a/glsl/post/one.frag.glsl b/glsl/post/one.frag.glsl old mode 100644 new mode 100755 diff --git a/glsl/post/toon.frag.glsl b/glsl/post/toon.frag.glsl new file mode 100755 index 0000000..72954d3 --- /dev/null +++ b/glsl/post/toon.frag.glsl @@ -0,0 +1,29 @@ +#version 100 +precision highp float; +precision highp int; + +uniform sampler2D u_color; +varying vec2 v_uv; + +const vec4 SKY_COLOR = vec4(0.01, 0.14, 0.42, 1.0); + +void main() { + vec4 color = texture2D(u_color, v_uv); + + if(color.a == 0.0) + { + gl_FragColor = SKY_COLOR; + //return; + } + + vec2 sizeFactor = vec2(1.0/800.0, 1.0/600.0); + + vec4 L1 = texture2D(u_color, v_uv + sizeFactor * vec2(-1.0,0.0)); + vec4 L2 = texture2D(u_color, v_uv + sizeFactor * vec2(-1.0,-1.0)); + vec4 L3 = texture2D(u_color, v_uv + sizeFactor * vec2(-1.0,1.0)); + vec4 R1 = texture2D(u_color, v_uv + sizeFactor * vec2(1.0,0.0)); + vec4 R2 = texture2D(u_color, v_uv + sizeFactor * vec2(1.0,-1.0)); + vec4 R3 = texture2D(u_color, v_uv + sizeFactor * vec2(1.0,1.0)); + + gl_FragColor = -L1-L2-L3+R1+R2+R3; +} diff --git a/glsl/post/toon2.frag.glsl b/glsl/post/toon2.frag.glsl new file mode 100755 index 0000000..2795ab3 --- /dev/null +++ b/glsl/post/toon2.frag.glsl @@ -0,0 +1,41 @@ +#version 100 +precision highp float; +precision highp int; + +uniform sampler2D u_color; +uniform sampler2D u_color_1; +varying vec2 v_uv; + +const vec4 SKY_COLOR = vec4(0.01, 0.14, 0.42, 1.0); + +void main() { + vec4 color = texture2D(u_color, v_uv); + vec4 color_1 = texture2D(u_color_1, v_uv); + + if(color.a == 0.0) + { + gl_FragColor = SKY_COLOR; + //return; + } + + vec2 sizeFactor = vec2(1.0/800.0, 1.0/600.0); + + vec4 T1 = texture2D(u_color, v_uv + sizeFactor * vec2(0.0,-1.0)); + vec4 T2 = texture2D(u_color, v_uv + sizeFactor * vec2(-1.0,-1.0)); + vec4 T3 = texture2D(u_color, v_uv + sizeFactor * vec2(1.0,-1.0)); + vec4 B1 = texture2D(u_color, v_uv + sizeFactor * vec2(0.0,1.0)); + vec4 B2 = texture2D(u_color, v_uv + sizeFactor * vec2(-1.0,1.0)); + vec4 B3 = texture2D(u_color, v_uv + sizeFactor * vec2(1.0,1.0)); + + vec4 blend = -T1-T2-T3+B1+B2+B3; + + blend = vec4(vec3(max(max(blend.x, blend.y), blend.z)), 1.0); + + if (blend.x <= 0.2){ + blend = vec4(vec3(0.0), 1.0); + } else { + blend = vec4(1.0); + } + + gl_FragColor = (1.0-blend) * color_1; +} diff --git a/glsl/quad.vert.glsl b/glsl/quad.vert.glsl old mode 100644 new mode 100755 diff --git a/glsl/red.frag.glsl b/glsl/red.frag.glsl old mode 100644 new mode 100755 index f8ef1ec..e41993b --- a/glsl/red.frag.glsl +++ b/glsl/red.frag.glsl @@ -3,5 +3,5 @@ precision highp float; precision highp int; void main() { - gl_FragColor = vec4(1, 0, 0, 1); + gl_FragColor = vec4(1, 0, 0, 0.1); } diff --git a/img/1.png b/img/1.png new file mode 100644 index 0000000..88723b3 Binary files /dev/null and b/img/1.png differ diff --git a/img/10.png b/img/10.png new file mode 100644 index 0000000..fab903f Binary files /dev/null and b/img/10.png differ diff --git a/img/11.png b/img/11.png new file mode 100644 index 0000000..2ff1078 Binary files /dev/null and b/img/11.png differ diff --git a/img/12.png b/img/12.png new file mode 100644 index 0000000..0928f65 Binary files /dev/null and b/img/12.png differ diff --git a/img/13.png b/img/13.png new file mode 100644 index 0000000..313f9a7 Binary files /dev/null and b/img/13.png differ diff --git a/img/14.png b/img/14.png new file mode 100644 index 0000000..60e71d7 Binary files /dev/null and b/img/14.png differ diff --git a/img/15.png b/img/15.png new file mode 100644 index 0000000..6169f3a Binary files /dev/null and b/img/15.png differ diff --git a/img/2.png b/img/2.png new file mode 100644 index 0000000..4714b73 Binary files /dev/null and b/img/2.png differ diff --git a/img/3.png b/img/3.png new file mode 100644 index 0000000..e74019b Binary files /dev/null and b/img/3.png differ diff --git a/img/4.png b/img/4.png new file mode 100644 index 0000000..777edd8 Binary files /dev/null and b/img/4.png differ diff --git a/img/5.png b/img/5.png new file mode 100644 index 0000000..8c52c78 Binary files /dev/null and b/img/5.png differ diff --git a/img/6.png b/img/6.png new file mode 100644 index 0000000..0b2d6d5 Binary files /dev/null and b/img/6.png differ diff --git a/img/7.png b/img/7.png new file mode 100644 index 0000000..c59d703 Binary files /dev/null and b/img/7.png differ diff --git a/img/8.png b/img/8.png new file mode 100644 index 0000000..bd1b63a Binary files /dev/null and b/img/8.png differ diff --git a/img/9.png b/img/9.png new file mode 100644 index 0000000..067b862 Binary files /dev/null and b/img/9.png differ diff --git a/img/Workbook1.xlsx b/img/Workbook1.xlsx new file mode 100644 index 0000000..e857b6c Binary files /dev/null and b/img/Workbook1.xlsx differ diff --git a/img/Workbook2.xlsx b/img/Workbook2.xlsx new file mode 100644 index 0000000..7f3d909 Binary files /dev/null and b/img/Workbook2.xlsx differ diff --git a/img/Workbook3.xlsx b/img/Workbook3.xlsx new file mode 100644 index 0000000..31c3761 Binary files /dev/null and b/img/Workbook3.xlsx differ diff --git a/img/thumb.png b/img/thumb.png index 9ec8ed0..90cf489 100644 Binary files a/img/thumb.png and b/img/thumb.png differ diff --git a/img/video.png b/img/video.png deleted file mode 100644 index 9ec8ed0..0000000 Binary files a/img/video.png and /dev/null differ diff --git a/index.html b/index.html old mode 100644 new mode 100755 index 9f8639c..3e0ea2a --- a/index.html +++ b/index.html @@ -19,10 +19,11 @@ + - +