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
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.
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
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
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