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

More Related Content

Similar to Metail Skin Colour Authoring Tool

GPU Programming: CocoaConf Atlanta
GPU Programming: CocoaConf AtlantaGPU Programming: CocoaConf Atlanta
GPU Programming: CocoaConf AtlantaJanie Clayton
 
PSGL (PlayStation Graphics Library)
PSGL (PlayStation Graphics Library)PSGL (PlayStation Graphics Library)
PSGL (PlayStation Graphics Library)Slide_N
 
Gpu Programming With GPUImage and Metal
Gpu Programming With GPUImage and MetalGpu Programming With GPUImage and Metal
Gpu Programming With GPUImage and MetalJanie Clayton
 
GPU Programming: Chicago CocoaConf 2015
GPU Programming: Chicago CocoaConf 2015GPU Programming: Chicago CocoaConf 2015
GPU Programming: Chicago CocoaConf 2015Janie Clayton
 
Castle Game Engine and the joy of making and using a custom game engine
Castle Game Engine and the joy  of making and using a custom game engineCastle Game Engine and the joy  of making and using a custom game engine
Castle Game Engine and the joy of making and using a custom game engineMichalis Kamburelis
 
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門Unity Technologies Japan K.K.
 
GDCE 2015: Blueprint Components to C++
GDCE 2015: Blueprint Components to C++GDCE 2015: Blueprint Components to C++
GDCE 2015: Blueprint Components to C++Gerke Max Preussner
 
Bindless Deferred Decals in The Surge 2
Bindless Deferred Decals in The Surge 2Bindless Deferred Decals in The Surge 2
Bindless Deferred Decals in The Surge 2Philip Hammer
 
DevCon Summit 2014: Trends in iOS Development by Allen Tan
DevCon Summit 2014: Trends in iOS Development by Allen TanDevCon Summit 2014: Trends in iOS Development by Allen Tan
DevCon Summit 2014: Trends in iOS Development by Allen TanDEVCON
 
Drupal 3D - Intro to Using Web 3D with Drupal
Drupal 3D - Intro to Using Web 3D with DrupalDrupal 3D - Intro to Using Web 3D with Drupal
Drupal 3D - Intro to Using Web 3D with DrupalBrian Hay
 
Google I/O 2014 Recap
Google I/O 2014 Recap Google I/O 2014 Recap
Google I/O 2014 Recap Trey Robinson
 
Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...
Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...
Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...Ontico
 
id-objc: GLKit and Overview on OpengGL
id-objc: GLKit and Overview on OpengGLid-objc: GLKit and Overview on OpengGL
id-objc: GLKit and Overview on OpengGLDidiet Noor
 
Shader Programming With Unity
Shader Programming With UnityShader Programming With Unity
Shader Programming With UnityMindstorm Studios
 
Glimworm 21-11-2013
Glimworm 21-11-2013Glimworm 21-11-2013
Glimworm 21-11-2013relayr
 
Summer Internship Project - Remote Render
Summer Internship Project - Remote RenderSummer Internship Project - Remote Render
Summer Internship Project - Remote RenderYen-Kuan Wu
 
Glimworm 21 11-13 (1)
Glimworm 21 11-13 (1)Glimworm 21 11-13 (1)
Glimworm 21 11-13 (1)Paul Hopton
 
Shaders and the black magic
Shaders and the black magicShaders and the black magic
Shaders and the black magicRaju Kandasamy
 

Similar to Metail Skin Colour Authoring Tool (20)

GPU Programming: CocoaConf Atlanta
GPU Programming: CocoaConf AtlantaGPU Programming: CocoaConf Atlanta
GPU Programming: CocoaConf Atlanta
 
PSGL (PlayStation Graphics Library)
PSGL (PlayStation Graphics Library)PSGL (PlayStation Graphics Library)
PSGL (PlayStation Graphics Library)
 
Gpu Programming With GPUImage and Metal
Gpu Programming With GPUImage and MetalGpu Programming With GPUImage and Metal
Gpu Programming With GPUImage and Metal
 
GPU Programming: Chicago CocoaConf 2015
GPU Programming: Chicago CocoaConf 2015GPU Programming: Chicago CocoaConf 2015
GPU Programming: Chicago CocoaConf 2015
 
VR Optimization Techniques
VR Optimization Techniques VR Optimization Techniques
VR Optimization Techniques
 
Castle Game Engine and the joy of making and using a custom game engine
Castle Game Engine and the joy  of making and using a custom game engineCastle Game Engine and the joy  of making and using a custom game engine
Castle Game Engine and the joy of making and using a custom game engine
 
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門
【Unite 2018 Tokyo】スクリプタブルレンダーパイプライン入門
 
GDCE 2015: Blueprint Components to C++
GDCE 2015: Blueprint Components to C++GDCE 2015: Blueprint Components to C++
GDCE 2015: Blueprint Components to C++
 
Bindless Deferred Decals in The Surge 2
Bindless Deferred Decals in The Surge 2Bindless Deferred Decals in The Surge 2
Bindless Deferred Decals in The Surge 2
 
DevCon Summit 2014: Trends in iOS Development by Allen Tan
DevCon Summit 2014: Trends in iOS Development by Allen TanDevCon Summit 2014: Trends in iOS Development by Allen Tan
DevCon Summit 2014: Trends in iOS Development by Allen Tan
 
Drupal 3D - Intro to Using Web 3D with Drupal
Drupal 3D - Intro to Using Web 3D with DrupalDrupal 3D - Intro to Using Web 3D with Drupal
Drupal 3D - Intro to Using Web 3D with Drupal
 
Ping Pong Pad
Ping Pong PadPing Pong Pad
Ping Pong Pad
 
Google I/O 2014 Recap
Google I/O 2014 Recap Google I/O 2014 Recap
Google I/O 2014 Recap
 
Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...
Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...
Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Li...
 
id-objc: GLKit and Overview on OpengGL
id-objc: GLKit and Overview on OpengGLid-objc: GLKit and Overview on OpengGL
id-objc: GLKit and Overview on OpengGL
 
Shader Programming With Unity
Shader Programming With UnityShader Programming With Unity
Shader Programming With Unity
 
Glimworm 21-11-2013
Glimworm 21-11-2013Glimworm 21-11-2013
Glimworm 21-11-2013
 
Summer Internship Project - Remote Render
Summer Internship Project - Remote RenderSummer Internship Project - Remote Render
Summer Internship Project - Remote Render
 
Glimworm 21 11-13 (1)
Glimworm 21 11-13 (1)Glimworm 21 11-13 (1)
Glimworm 21 11-13 (1)
 
Shaders and the black magic
Shaders and the black magicShaders and the black magic
Shaders and the black magic
 

Recently uploaded

Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024Primacy Infotech
 
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...OnePlan Solutions
 
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAGAI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAGAlluxio, Inc.
 
CompTIA Security+ (Study Notes) for cs.pdf
CompTIA Security+ (Study Notes) for cs.pdfCompTIA Security+ (Study Notes) for cs.pdf
CompTIA Security+ (Study Notes) for cs.pdfFurqanuddin10
 
Crafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM IntegrationCrafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM IntegrationWave PLM
 
Microsoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdfMicrosoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdfMarkus Moeller
 
Naer Toolbar Redesign - Usability Research Synthesis
Naer Toolbar Redesign - Usability Research SynthesisNaer Toolbar Redesign - Usability Research Synthesis
Naer Toolbar Redesign - Usability Research Synthesisparimabajra
 
The Impact of PLM Software on Fashion Production
The Impact of PLM Software on Fashion ProductionThe Impact of PLM Software on Fashion Production
The Impact of PLM Software on Fashion ProductionWave PLM
 
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Andrea Goulet
 
how-to-download-files-safely-from-the-internet.pdf
how-to-download-files-safely-from-the-internet.pdfhow-to-download-files-safely-from-the-internet.pdf
how-to-download-files-safely-from-the-internet.pdfMehmet Akar
 
A Guideline to Zendesk to Re:amaze Data Migration
A Guideline to Zendesk to Re:amaze Data MigrationA Guideline to Zendesk to Re:amaze Data Migration
A Guideline to Zendesk to Re:amaze Data MigrationHelp Desk Migration
 
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
KLARNA -  Language Models and Knowledge Graphs: A Systems ApproachKLARNA -  Language Models and Knowledge Graphs: A Systems Approach
KLARNA - Language Models and Knowledge Graphs: A Systems ApproachNeo4j
 
AI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in MichelangeloAI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in MichelangeloAlluxio, Inc.
 
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...naitiksharma1124
 
OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024Shane Coughlan
 
Lessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdfLessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdfSrushith Repakula
 
Malaysia E-Invoice digital signature docpptx
Malaysia E-Invoice digital signature docpptxMalaysia E-Invoice digital signature docpptx
Malaysia E-Invoice digital signature docpptxMok TH
 
OpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCAOpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCAShane Coughlan
 
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdfThe Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdfkalichargn70th171
 

Recently uploaded (20)

Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
Odoo vs Shopify: Why Odoo is Best for Ecommerce Website Builder in 2024
 
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
Optimizing Operations by Aligning Resources with Strategic Objectives Using O...
 
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAGAI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
 
CompTIA Security+ (Study Notes) for cs.pdf
CompTIA Security+ (Study Notes) for cs.pdfCompTIA Security+ (Study Notes) for cs.pdf
CompTIA Security+ (Study Notes) for cs.pdf
 
Crafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM IntegrationCrafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM Integration
 
Microsoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdfMicrosoft365_Dev_Security_2024_05_16.pdf
Microsoft365_Dev_Security_2024_05_16.pdf
 
Naer Toolbar Redesign - Usability Research Synthesis
Naer Toolbar Redesign - Usability Research SynthesisNaer Toolbar Redesign - Usability Research Synthesis
Naer Toolbar Redesign - Usability Research Synthesis
 
The Impact of PLM Software on Fashion Production
The Impact of PLM Software on Fashion ProductionThe Impact of PLM Software on Fashion Production
The Impact of PLM Software on Fashion Production
 
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
Entropy, Software Quality, and Innovation (presented at Princeton Plasma Phys...
 
how-to-download-files-safely-from-the-internet.pdf
how-to-download-files-safely-from-the-internet.pdfhow-to-download-files-safely-from-the-internet.pdf
how-to-download-files-safely-from-the-internet.pdf
 
A Guideline to Zendesk to Re:amaze Data Migration
A Guideline to Zendesk to Re:amaze Data MigrationA Guideline to Zendesk to Re:amaze Data Migration
A Guideline to Zendesk to Re:amaze Data Migration
 
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
KLARNA -  Language Models and Knowledge Graphs: A Systems ApproachKLARNA -  Language Models and Knowledge Graphs: A Systems Approach
KLARNA - Language Models and Knowledge Graphs: A Systems Approach
 
AI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in MichelangeloAI/ML Infra Meetup | ML explainability in Michelangelo
AI/ML Infra Meetup | ML explainability in Michelangelo
 
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
COMPUTER AND ITS COMPONENTS PPT.by naitik sharma Class 9th A mittal internati...
 
OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024OpenChain @ LF Japan Executive Briefing - May 2024
OpenChain @ LF Japan Executive Briefing - May 2024
 
Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024Top Mobile App Development Companies 2024
Top Mobile App Development Companies 2024
 
Lessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdfLessons Learned from Building a Serverless Notifications System.pdf
Lessons Learned from Building a Serverless Notifications System.pdf
 
Malaysia E-Invoice digital signature docpptx
Malaysia E-Invoice digital signature docpptxMalaysia E-Invoice digital signature docpptx
Malaysia E-Invoice digital signature docpptx
 
OpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCAOpenChain Webinar: AboutCode and Beyond - End-to-End SCA
OpenChain Webinar: AboutCode and Beyond - End-to-End SCA
 
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdfThe Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
The Evolution of Web App Testing_ An Ultimate Guide to Future Trends.pdf
 

Metail Skin Colour Authoring Tool

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