Successfully reported this slideshow.
Upcoming SlideShare
×

# Efficacy of deferred rendering in WebGL

1,006 views

Published on

Presentation of Independent study in summer quarter.

Published in: Technology
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

### Efficacy of deferred rendering in WebGL

1. 1. Practicality of Deferred Rendering in WebGL CSE 595D Independent Study Kakeru Ishii 1
2. 2. Main topics Overview of deferred rendering methods I used. Techniques needed to use deferred rendering in WebGL. Practicality to use deferred rendering in WebGL? 2
3. 3. Background of this research I am engaging in an open source project “jThree” I take part in implementing renderer with WebGL. This presentation contents are based on these experience I had during this development. jThre e 3
4. 4. Geometries Summary of deferred rendering  Deferred rendering steps-1/3  Position  Normal  Texture Coordinate For each vertex. Transform vertices by multiplying matrices Vertex shader Invisible fragment will be reduced here. Rasterizer Encode the data needed later steps into color Fragment shader Depth texture Normal texture 4
5. 5. Geometries Summary of deferred rendering  Deferred rendering steps-2/3 Nothing special to do Vertex shader There must not be invisible fragment in this step. Rasterizer Calculate and sum light color for each fragment Fragment shader Just a square geometry Depth texture Normal texture • Light position • Light direction • Light color and.. Shader inputs Depth texture Normal texture Light accumulation texture 5
6. 6. Geometries Summary of deferred rendering  Deferred rendering steps-3/3  Position  Normal  Texture Coordinate For each vertex. Transform vertices by multiplying matrices Vertex shader Invisible fragment will be reduced here. Rasterizer Calculate color with material colors and light accumulation. Fragment shader Result • Material colors ( diffuse, specular, ambient) • And.. Shader inputs Light accumulation texture 6
7. 7. Demo Demo 7
8. 8. In case of using WebGL 1 The feature to render into multiple texture is not guaranteed to be able to use. Just render multiple times into single texture. (In this case, needs 2 times for the first step) If the browser supports the WebGL extension “WEBGL_draw_buffers”, It is able to use multiple texture output for a rendering step. 8
9. 9. In case of using WebGL 1 The feature to render into multiple texture is not guaranteed to be able to use. Just render multiple times into single texture. (In this case, needs 2 times for the first step) If the browser supports the WebGL extension “WEBGL_draw_buffers”, It is able to use multiple texture output for a rendering step. 9
10. 10. In case of using WebGL 2 The feature to render into depth texture is not guaranteed to be able to use. I can use color buffer, but it needs little bit complex compression. If the browser supports the WebGL extension “WEBGL_depth_texture”, It is able to use depth texture to render depth buffer directly. 10
11. 11. In case of using WebGL 2 The feature to render into depth texture is not guaranteed to be able to use. I can use color buffer, but it needs little bit complex compression. If the browser supports the WebGL extension “WEBGL_depth_texture”, It is able to use depth texture to render depth buffer directly. 11
12. 12. In case of using WebGL 3  The basic texture used for output have only 32bits for each pixel. Normal buffer needs 3 float values each pixel, thus 1 value have only 10 bits or less.(It is difficult to encode float value into 10 bits, thus it might be 8 bits)  It can be reduced into 2 elements because normal vector is guaranteed to be normalized(it means the length is 1).  𝐶 𝑥𝑦 = 𝑁 𝑥𝑦 𝑁 𝑥𝑦 𝑁𝑧 ∗ 1 2 + 1 2 (Compose)  𝑁z = 𝐶 𝑥𝑦 ∗ 2 − 1 , 𝑁xy = 𝐶 𝑥𝑦 𝐶 𝑥𝑦 ∗ 1 − 𝑁𝑧 2 (Decompose) 12
13. 13. In case of using WebGL 3 If the browser supports the WebGL extension “OES_texture_float”, It is able to use128bits per pixel. (It means 32bit float for 4 elements for each pixel) 13
14. 14. In case of using WebGL 3 If the browser supports the WebGL extension “OES_texture_float”, It is able to use128bits per pixel. (It means 32bit float for 4 elements for each pixel) 14
15. 15. Practicality of deferred rendering in WebGL(Conclusion) When we use OpenGL in local environment, We should consider about.. Graphics board performance Which GL version is supported or not 15
16. 16. Practicality of deferred rendering in WebGL(Conclusion) When we use WebGL, We should consider about.. Graphics board performance Which GL version is supported or not Which WebGL extensions is supported or not for a browser (like CSS or Javascript feature). 16