glTF and the WebGL Art Pipeline March 2015

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

WHAT art pipelines?!

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

Q: what file formats does WebGL
support?

A: none.

we need a reliable, consistent,
vendor-neutral way
to get full-featured art from 3D tools
into WebGL applications

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

graphics library Transmission Format

“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

three.js loader
rest3d viewer
Cesium engine
MontageJS viewer
glTF in action

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

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%

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…

case study: from concept to
deployment

concept art

the model

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

preview

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

help is on the way!
3d artists of the world thank you…

glTF and the WebGL Art Pipeline March 2015

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (12)

Similaire à glTF and the WebGL Art Pipeline March 2015

Similaire à glTF and the WebGL Art Pipeline March 2015 (20)

Plus de Tony Parisi

Plus de Tony Parisi (20)

Dernier

Dernier (20)

glTF and the WebGL Art Pipeline March 2015