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

1. http://www.tonyparisi.com 3/18/15
art pipelines for WebGL
development
tony parisi
March, 2015

2. http://www.tonyparisi.com 3/18/15
WHAT art pipelines?!

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. http://www.tonyparisi.com 3/18/15
Q: what file formats does WebGL
support?

5. http://www.tonyparisi.com 3/18/15
A: none.

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. 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. http://www.tonyparisi.com 3/18/15
graphics library Transmission Format

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. http://www.tonyparisi.com 3/18/15
three.js loader
rest3d viewer
Cesium engine
MontageJS viewer
glTF in action

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. 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. 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. http://www.tonyparisi.com 3/18/15
case study: from concept to
deployment

15. http://www.tonyparisi.com 3/18/15
concept art

16. http://www.tonyparisi.com 3/18/15
the model

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. http://www.tonyparisi.com 3/18/15
preview

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. http://www.tonyparisi.com 3/18/15
help is on the way!
3d artists of the world thank you…