State of the content pipeline for WebGL Development. Not perfect but it's going in the right direction with improved COLLADA integration and a new file format, glTF, in the works.

1. professional art
paths for WebGL
development
tony parisi
may 15, 2013
artists only:

2. export OBJ.1
convert to Three.js.2
today’s WebGL art path
write code. lots of code.3
prepared to be F!@#$ED.4

3. NO lights.
NO scene hierarchy.
NO animations.
you’re F!@#$ED…
NO cameras.
programmers
do the lighting.
programmers
do the animations.
programmers
set up the
cameras.
programmers
lay out the
scene.
by typing
NUMBERS.

4. // CAMERAS
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
// SCENE
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
// LIGHTS
var ambient = new THREE.AmbientLight( 0x050505 );
scene.add( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
directionalLight.position.set( 2, 1.2, 10 ).normalize();
scene.add( directionalLight );
directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( -2, 1.2, -10 ).normalize();
scene.add( directionalLight );
pointLight = new THREE.PointLight( 0xffaa00, 2 );
pointLight.position.set( 2000, 1200, 10000 );
scene.add( pointLight );
… well and truly.

5. it’s time to put art creation
back where it belongs

6. COLLADA - 3D asset exchange
schema
• 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…

7. COLLADA and WebGL
• three.s implementation buggy and incomplete…
until now.
https://github.com/mrdoob/three.js/commit/1f0f08d3f72d
aabb6383e84eb15b3d9458fe239b
image courtesy of
Symantec and
Neumatic, Inc.

8. glTF – the gl transmission format
• COLLADA has issues for use with WebGL
– files are text-based XML, big to download and slow to parse in a
browser or mobile application
• the COLLADA working group is designing glTF, a
new, JSON+binary-based format for use in WebGL
and OpenGL ES mobile applications
• glTF bridges the gap between common 3D formats
and gl-based APIs
– mesh and animation data in compact .bin files that directly load
into WebGL data structures without additional processing
– scene structure/properties, materials, cameras, lights in JSON
files that are quick and easy to parse

9. glTF preview

10. the glTF content pipeline
OpenCOLLADA – open-source exporter plugins for Max and Maya,
Windows, Linux and Mac OSX http://collada.org/mediawiki/index.php/Open
COLLADA
COLLADA2GLTF converter under development

11. glTF project status
• working group initiative, not an official spec (yet)
• work in progress
– next milestones for SIGGRAPH 2013
– draft spec by end of 2013
• design being done in the open
https://github.com/KhronosGroup/glTF

12. leave art to the artists, and
coding to the programmers
(Maya|Max) + COLLADA + glTF +
WebGL ==
!(f!@#$ed) == team_happy;
we thank you.