Artists Only

professional art paths for WebGL

development

tony parisimay 15, 2013

artists only:

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

NO lights.

NO scene hierarchy.

NO animations.

you’re F!@#$ED…

NO cameras.

programmers do the lighting.

programmersdo the animations.

programmers set up thecameras.

programmerslay out the scene.

by typingNUMBERS.

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

it’s time to put art creationback where it belongs

COLLADA - 3D asset exchange schema

• Khronos Group standardhttp://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 and WebGL

• three.s implementation buggy and incomplete…

until now.https://github.com/mrdoob/three.js/commit/1f0f08d3f72daabb6383e84eb15b3d9458fe239b

image courtesy of Symantec and Neumatic, Inc.

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

glTF preview

the glTF content pipeline

OpenCOLLADA – open-source exporter plugins for Max and Maya, Windows, Linux and Mac OSX http://collada.org/mediawiki/index.php/

OpenCOLLADACOLLADA2GLTF converter under development

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

leave art to the artists, and coding to the programmers

(Maya|Max) + COLLADA + glTF + WebGL ==

!(f!@#$ed) == team_happy;

we thank you.