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 RackSuper

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/Converter-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…