Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
http://www.tonyparisi.com 3/18/15
art pipelines for WebGL
development
tony parisi
March, 2015
http://www.tonyparisi.com 3/18/15
WHAT art pipelines?!
http://www.tonyparisi.com 3/18/15
WebGL content creation is a shaky
proposition
• The only reliable paths are through prop...
http://www.tonyparisi.com 3/18/15
Q: what file formats does WebGL
support?
http://www.tonyparisi.com 3/18/15
A: none.
http://www.tonyparisi.com 3/18/15
we need a reliable, consistent,
vendor-neutral way
to get full-featured art from 3D tool...
http://www.tonyparisi.com 3/18/15
existing standards won’t cut it
• COLLADA
– Khronos Group standard
http://www.khronos.or...
http://www.tonyparisi.com 3/18/15
graphics library Transmission Format
http://www.tonyparisi.com 3/18/15
“JPEG for 3D”
a “JPEG for 3D”
• bridges the gap between existing 3D formats/tools
and to...
http://www.tonyparisi.com 3/18/15
three.js loader
rest3d viewer
Cesium engine
MontageJS viewer
glTF in action
http://www.tonyparisi.com 3/18/15
comparison : glTF vs COLLADA
file sizes
Size (Mb) Wine Rack
Super
Murdoch Virtual City R...
http://www.tonyparisi.com 3/18/15
comparison : glTF vs COLLADA
load times
0
1
2
3
4
5
6
7
Wine Rack Razer Virtual City Sup...
http://www.tonyparisi.com 3/18/15
the glTF art pipeline
OpenCOLLADA – open-source exporter plugins for
Max and Maya,
Windo...
http://www.tonyparisi.com 3/18/15
case study: from concept to
deployment
http://www.tonyparisi.com 3/18/15
concept art
http://www.tonyparisi.com 3/18/15
the model
http://www.tonyparisi.com 3/18/15
export and convert
1. make sure OpenCOLLADA is installed and
enabled in Maya
2. export t...
http://www.tonyparisi.com 3/18/15
preview
http://www.tonyparisi.com 3/18/15
glTF project status
• working group
– P. Cozzi, T. Parisi, R. Arnaud
• moving toward off...
http://www.tonyparisi.com 3/18/15
help is on the way!
3d artists of the world thank you…
Upcoming SlideShare
Loading in …5
×

glTF and the WebGL Art Pipeline March 2015

8,980 views

Published on

My slides from the March Silicon Valley WebGL Meetup at NVIDIA GTC 2015

Published in: Technology

glTF and the WebGL Art Pipeline March 2015

  1. 1. http://www.tonyparisi.com 3/18/15 art pipelines for WebGL development tony parisi March, 2015
  2. 2. http://www.tonyparisi.com 3/18/15 WHAT art pipelines?!
  3. 3. http://www.tonyparisi.com 3/18/15 WebGL content creation is a shaky proposition • The only reliable paths are through proprietary tools – Goo Create – Unity3D and Unreal via Emscripten – Verold Studio… going open source soon? – PlayCanvas is open source, but if you’re not building a game, it’s a sledgehammer – … all tied to somebody’s engine and using different file formats for the data • Open source libraries (Three.js, Babylon.js etc.) have half-baked art paths and each defines a different file format : so a lot of times teams roll their own tools for a new project
  4. 4. http://www.tonyparisi.com 3/18/15 Q: what file formats does WebGL support?
  5. 5. http://www.tonyparisi.com 3/18/15 A: none.
  6. 6. http://www.tonyparisi.com 3/18/15 we need a reliable, consistent, vendor-neutral way to get full-featured art from 3D tools into WebGL applications
  7. 7. http://www.tonyparisi.com 3/18/15 existing standards won’t cut it • COLLADA – Khronos Group standard http://www.khronos.org/collada/ – well-supported by professional tools… at least it was for a while • industry support has waned in the last few years – feature-rich • meshes, materials, textures, scene hierarchy, cameras, lights, animations… COLLADA has big issues for use with WebGL • files are text-based XML, big to download and slow to parse in a browser or mobile application • Wavefront OBJ, STL, … – Single-model formats don’t support many features e.g. lights, cameras, animations, scene hierarchy
  8. 8. http://www.tonyparisi.com 3/18/15 graphics library Transmission Format
  9. 9. http://www.tonyparisi.com 3/18/15 “JPEG for 3D” a “JPEG for 3D” • bridges the gap between existing 3D formats/tools and today’s GL based APIs (WebGL, OpenGL ES) • compact representation – efficient to download • loads quickly into memory – GL native data types require no additional parsing • full-featured – includes common 3D constructs (hierarchy, cameras, lights, common materials, animation) – full support for shaders and arbitrary materials • reduces duplicated effort in content pipeline • a common publishing format for content tools
  10. 10. http://www.tonyparisi.com 3/18/15 three.js loader rest3d viewer Cesium engine MontageJS viewer glTF in action
  11. 11. http://www.tonyparisi.com 3/18/15 comparison : glTF vs COLLADA file sizes Size (Mb) Wine Rack Super Murdoch Virtual City Razer Rambler glTF JSON + .bin 0.58 0.85 2.6 5.1 12.7 COLLADA (.dae) 0.79 1.8 5.5 7.5 31.6 % reduction 27% 53% 53% 32% 60% 0 5 10 15 20 25 30 35 40 45 50 Wine Rack Super Murdoch Virtual City Razer Rambler COLLADA (.dae) glTF JSON + .bin
  12. 12. http://www.tonyparisi.com 3/18/15 comparison : glTF vs COLLADA load times 0 1 2 3 4 5 6 7 Wine Rack Razer Virtual City Super Murdoch Rambler COLLADA (.dae) glTF glTF w BufferGeometry Wine Rack Razer Virtual City Super Murdoch Rambler glTF w BufferGeometry 0.06 0.08 0.09 0.21 0.69 glTF 0.08 0.36 0.15 0.27 1.86 COLLADA (.dae) 0.18 1.34 1.05 0.55 3.88 %reduction 67% 94% 91% 62% 82%
  13. 13. http://www.tonyparisi.com 3/18/15 the glTF art pipeline OpenCOLLADA – open-source exporter plugins for Max and Maya, Windows, Linux and Mac OSX http://collada.org/mediawiki/index. php/OpenCOLLADA COLLADA2GLTF converter under development https://github.com/KhronosGroup/glTF/wiki/C onverter-builds FBX-glTF converter being developed by Autodesk!!! https://github.com/cyrillef/FBX-glTF NEW NEW NEW! ALSO: T. Parisi/Dave Arendash working on Unity exporter…
  14. 14. http://www.tonyparisi.com 3/18/15 case study: from concept to deployment
  15. 15. http://www.tonyparisi.com 3/18/15 concept art
  16. 16. http://www.tonyparisi.com 3/18/15 the model
  17. 17. http://www.tonyparisi.com 3/18/15 export and convert 1. make sure OpenCOLLADA is installed and enabled in Maya 2. export the scene with textures 3. run collada2gltf command-line converter
  18. 18. http://www.tonyparisi.com 3/18/15 preview
  19. 19. http://www.tonyparisi.com 3/18/15 glTF project status • working group – P. Cozzi, T. Parisi, R. Arnaud • moving toward official Khronos specification 04/06 – Full draft 04/20 - Public review of draft 1.0 06/01 - Submit draft 1.0 to Khronos for ratification 08/09 - glTF 1.0 release at SIGGRAPH • design being done in the open https://github.com/KhronosGroup/glTF • Cesium and Three.js viewers under active development – https://github.com/AnalyticalGraphicsInc/cesium – https://github.com/mrdoob/three.js/ (Tony needs to update to latest spec rev) • FBX-glTF converter under active development
  20. 20. http://www.tonyparisi.com 3/18/15 help is on the way! 3d artists of the world thank you…

×