glTF Update with Tony Parisi WebGL Meetup August 2013

3,200 views

Published on

My talk for the August 2013 San Francisco WebGL Meetup - an Update on the glTF file format

Published in: Technology, Art & Photos
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,200
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
36
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

glTF Update with Tony Parisi WebGL Meetup August 2013

  1. 1. glTF update tony parisi august 22, 2013
  2. 2. last November… 8/22/20 13 http://www.tonyparisi.com
  3. 3. 8/22/20 13 http://www.tonyparisi.com …now graphics library Transmission Format
  4. 4. wtf is glTF? the runtime asset format for WebGL, OpenGL ES, and OpenGL applications compact representation JSON for scene structure and other high-level constructs binary mesh and animation data - little or no processing to drop glTF data into client application runtime neutral can be used by any app or runtime – initial target is for WebGL- accelerated applications open specification; open process Khronos Group initiative within the COLLADA working group F. Robinet (lead), R. Arnaud, P. Cozzi, T. Parisi http://gltf.gl/ 8/22/20 13 http://www.tonyparisi.com
  5. 5. wtf would I care? there is no open, comprehensive, vendor- and engine- neutral format for publishing 3D data to web and mobile apps COLLADA not designed for runtime delivery – bulky, XML- based, intended for interchange, not playback Autodesk FBX – proprietary VRML, X3D, others - out of the mainstream and out of date engine-specific formats (e.g. Three.js) on their own trajectories WebGL content creation a.k.a. DEATHMATCH 3000 developers scramble to find exporters and importers, often build custom pipeline tools per-project – film production approach on web schedules and budgets technical directors spend an inordinate amount of time hand- coding basic features (cameras and lighting) that could and should be done by artists in a 3D tool 8/22/20 13 http://www.tonyparisi.com
  6. 6. how does glTF help? a “JPEG for 3D” bridges the gap between existing 3D formats/tools and today‟s GL based APIs compact, efficient to load representation balanced, pragmatic feature set GL native data types require no additional processing also includes common 3D constructs (hierarchy, cameras, lights, common materials, animation ) reduces duplicated effort in content pipeline a common publishing format for content tools 8/22/20 13 http://www.tonyparisi.com
  7. 7. 8/22/20 13 http://www.tonyparisi.com three.js loader rest3d viewer Cesium engine MontageJS viewer glTF in action
  8. 8. demo 8/22/20 13 http://www.tonyparisi.com model from 3drt.com
  9. 9. comparison : glTF vs COLLADA file sizes 8/22/20 13 http://www.tonyparisi.com 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
  10. 10. comparison : glTF vs COLLADA load times 8/22/20 13 http://www.tonyparisi.com 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%
  11. 11. 8/22/20 13 http://www.tonyparisi.com { … "attributes": { "attribute_22": { "bufferView": "bufferView_28", "byteOffset": 0, "byteStride": 12, "count": 2399, "max": [ 96.1799, 163.97, 53.9252 ], "min": [ -69.2985, 9.92937, -61.3282 ], "type": "FLOAT_VEC3" }, … "bufferViews": { "bufferView_28": { "buffer": "duck.bin", "byteLength": 76768, "byteOffset": 0, "target": "ARRAY_BUFFER" }, "bufferView_29": { "buffer": "duck.bin", "byteLength": 25272, "byteOffset": 76768, "target": "ELEMENT_ARRAY_BUFFER" } }, "buffers": { "duck.bin": { "byteLength": 102040, "path": "duck.bin" } }, syntax: low-level stuff declaring vertex attributes accessing external binary data via buffers and buffer views
  12. 12. 8/22/20 13 http://www.tonyparisi.com syntax: high-level stuff "nodes": { "LOD3sp": { "children": [], "matrix": [ ... ], "meshes": [ "LOD3spShape-lib" ], "name": "LOD3sp" }, "camera1": { "camera": "camera_0", "children": [], "matrix": [ ... ], "name": "camera1" }, "meshes": { "LOD3spShape-lib": { "name": "LOD3spShape", "primitives": [ { "indices": "indices_20", "material": "material.0", "primitive": "TRIANGLES", "semantics": { "NORMAL": "attribute_24", "POSITION": "attribute_22", "TEXCOORD_0": "attribute_26" } } ] } }, declaring meshes primitives define the mesh shapes attributes reference binary data sources scene graph structure defined as hierarchy of nodes
  13. 13. 8/22/20 13 http://www.tonyparisi.com glTF content pipelines
  14. 14. Three.js glTF loader project 8/22/20 13 http://www.tonyparisi.com currently a branch of the glTF project on Github https://github.com/KhronosGroup/glTF Branch „threejsloader‟ designed to be compatible with other Three.js example loaders such as OBJ and COLLADA e.g. http://threejs.org/examples/webgl_loader_collada.html no external dependencies other than official glTF parser (webgl-tf- loader.js) demo version at SIGGRAPH expect v1.0 feature complete in October after completion, will submit a Github pull request for inclusion with Three.js distribution
  15. 15. three.js glTF loader – project status 8/22/20 13 http://www.tonyparisi.com most glTF features are already supported triangle meshes optionally uses THREE.BufferGeometry for faster loading materials – diffuse, specular, emissive, ambient, textures, environment maps cameras – perspective and orthographic lights – ambient, spot, point, directional matrix transforms scene structure animation Key frame/articulated only shaders uses “common profile” techniques - lighting models such as Phong and Lambert, and their parameters, are mapped to existing Three.js material types features TBD, in progress skinned animations and morphs arbitrary GLSL shaders (via THREE.ShaderMaterial)
  16. 16. glTF status version 1.0 – hoping for full draft spec in early 2014 v1.0 scope node hierarchy cameras lights animations – key frames, skinning, morphs common material techniques – Blinn, Phong, Lambert user-defined shaders external media (images & videos) mesh compression as extensions post v1.0 multi-pass considered 8/22/20 13 http://www.tonyparisi.com
  17. 17. glTF specification process specification driven by COLLADA working group at Khronos not an official standard - yet spec work being done completely in the open all features backed up by multiple implementations in code specification https://github.com/KhronosGroup/glTF/blob/master/specificati on/README.md glTF repo with sample code and specification JSON schema https://github.com/KhronosGroup/glTF 8/22/20 13 http://www.tonyparisi.com

×