Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Metail Skin Colour Authoring Tool

1 918 vues

Publié le

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

Publié dans : Logiciels
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Metail Skin Colour Authoring Tool

  1. 1. 1 OCTOBER 2015 May 2018 David Gavilan – MeModel Eng. Manager
  2. 2. Interactive skin colour authoring using WebGL david@metail.com
  3. 3. Main message ● Javascript & WebGL are great for graphic tools (not only 3D!) ○ Zero install ○ Interactive speed
  4. 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. 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. 6. Forward rendering
  7. 7. What do we do in the shaders?
  8. 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. 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. 10. Deferred Rendering ● Lighting & shading computation is deferred until a later stage
  11. 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. 12. Demo
  13. 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. 14. GL initialisation ● We create the quad, and lots of uniforms, for all the sliders
  15. 15. GL rendering ● Update uniforms, bind textures, draw quad!
  16. 16. Example skin variations authored with Karai
  17. 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