artists only
DESCRIPTION
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.TRANSCRIPT
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.