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

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 tools
into WebGL applications

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

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

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

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%

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…

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 the scene with textures
3. run collada2gltf command-line converter

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

http://www.tonyparisi.com 3/18/15
help is on the way!
3d artists of the world thank you…