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
 
【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
 
Solving IoT Hardware Issues With Docker
Solving IoT Hardware Issues With DockerSolving IoT Hardware Issues With Docker
Solving IoT Hardware Issues With DockerWill Hall
 

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
 
【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
 
Solving IoT Hardware Issues With Docker
Solving IoT Hardware Issues With DockerSolving IoT Hardware Issues With Docker
Solving IoT Hardware Issues With Docker
 

Recently uploaded

AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsJaydeep Chhasatia
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageDista
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxJoão Esperancinha
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Incrobinwilliams8624
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 

Recently uploaded (20)

AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
Salesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptxSalesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptx
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptx
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Inc
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.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