Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Practicality of Deferred Rendering
in WebGL
CSE 595D Independent Study
Kakeru Ishii
1
Main topics
Overview of deferred rendering methods I used.
Techniques needed to use deferred rendering in WebGL.
Practi...
Background of this research
I am engaging in an open source project “jThree”
I take part in implementing renderer with W...
Geometries
Summary of deferred rendering
 Deferred rendering steps-1/3
 Position
 Normal
 Texture Coordinate
For each ...
Geometries
Summary of deferred rendering
 Deferred rendering steps-2/3
Nothing special to
do
Vertex shader
There must not...
Geometries
Summary of deferred rendering
 Deferred rendering steps-3/3
 Position
 Normal
 Texture Coordinate
For each ...
Demo
Demo
7
In case of using WebGL 1
The feature to render into multiple texture is not guaranteed to be
able to use.
Just render mu...
In case of using WebGL 1
The feature to render into multiple texture is not guaranteed to be
able to use.
Just render mu...
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 b...
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 b...
In case of using WebGL 3
 The basic texture used for output have only 32bits for each pixel.
Normal buffer needs 3 float ...
In case of using WebGL 3
If the browser supports the WebGL extension “OES_texture_float”,
It is able to use128bits per pix...
In case of using WebGL 3
If the browser supports the WebGL extension “OES_texture_float”,
It is able to use128bits per pix...
Practicality of deferred rendering in
WebGL(Conclusion)
When we use OpenGL in local environment,
We should consider about....
Practicality of deferred rendering in
WebGL(Conclusion)
When we use WebGL,
We should consider about..
Graphics board perf...
Upcoming SlideShare
Loading in …5
×

Efficacy of deferred rendering in WebGL

1,006 views

Published on

Presentation of Independent study in summer quarter.
Discuss about WebGL compatibility about using deferred shading.

Published in: Technology
  • 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

×