Short introduction to deferred rendering and presentation of a skin colour authoring tool written in WebGL

1. 1
OCTOBER 2015
May 2018
David Gavilan – MeModel Eng. Manager

2. Interactive skin colour authoring
using WebGL
david@metail.com

3. Main message
● Javascript & WebGL are great for graphic tools
(not only 3D!)
○ Zero install
○ Interactive speed

4. Overview
● Context about myself
● A bit about graphics
○ Traditional rendering pipeline (forward rendering)
○ Deferred rendering overview
● Karai: Interactive skin color adjustment tool
○ Demo
○ Some code
● Q&A

5. Me before Metail: gfx engine programmer
~4 years Konami/Kojima
Productions (MGS 5)
~2 years Ninja Theory
(Infinity 3)
~2 years GREE (Mobile
games w/ Unity)
iOS indies

6. Forward rendering

7. What do we do in the shaders?

8. Lots of things to compute per vertex!
● Because all that stuff is expensive to compute,
especially lighting, we usually do it per vertex, not
per pixel => values will be linearly interpolated
when they reach the pixel shader.
● But !!
○ The more lights, the more expensive it gets
○ There’s a limit on the number of lights we can store in GPU
memory.

9. Why go deferred?
● To address the “buts”
● Hardware reasons
○ new GPU feature: Multiple Render Targets (MRT)
○ With MRT, we can output to multiple surfaces (textures) at the same time
○ PS2 was amazing for transparency, but PS3 was more “opaque”
○ Mobile following trend -- original iPhone was only good at transparency, but MRT was introduced
with the iPhone5.

10. Deferred Rendering
● Lighting & shading computation is deferred until a later stage

11. What does it mean for us?
● That “later stage” can be totally plugged out
● Our Visualisation server produces renders of albedo & normals, and we defer the
lighting computation to an interactive WebGL app
AlbedoNormalsDepth Cosine & LDPRT

12. Demo

13. May the source be with you...
● ~1000 lines of pure Javascript (no external libs)
● ~50 lines of shader code
● The only geometry you need is a quad

14. GL initialisation
● We create the quad, and lots of uniforms, for all the sliders

15. GL rendering
● Update uniforms, bind textures, draw quad!

16. Example skin variations authored with Karai

17. Wrap up...
● You don’t need to do ALL the rendering in the client. Defer
the things that need interaction (e.g. lighting)
● Javascript & WebGL are great for graphic tools (not only
3D!)
○ Zero install
○ Interactive speed
● To get started with simpler examples:
https://github.com/endavid/webGL-tests