Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
glTF update
tony parisi
august 22, 2013
last November…
8/22/20
13
http://www.tonyparisi.com
8/22/20
13
http://www.tonyparisi.com
…now
graphics library Transmission Format
wtf is glTF?
the runtime asset format for WebGL, OpenGL ES, and OpenGL
applications
compact representation
JSON for scene ...
wtf would I care?
there is no open, comprehensive, vendor- and engine- neutral
format for publishing 3D data to web and mo...
how does glTF help?
a “JPEG for 3D”
bridges the gap between existing 3D formats/tools and
today‟s GL based APIs
compact, e...
8/22/20
13
http://www.tonyparisi.com
three.js loader
rest3d viewer
Cesium engine
MontageJS viewer
glTF in action
demo
8/22/20
13
http://www.tonyparisi.com
model from 3drt.com
comparison : glTF vs
COLLADA file sizes
8/22/20
13
http://www.tonyparisi.com
Size (Mb) Wine Rack
Super
Murdoch Virtual Cit...
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 ...
8/22/20
13
http://www.tonyparisi.com
{
…
"attributes": {
"attribute_22": {
"bufferView": "bufferView_28",
"byteOffset": 0,...
8/22/20
13
http://www.tonyparisi.com
syntax: high-level stuff
"nodes": {
"LOD3sp": {
"children": [],
"matrix": [
...
],
"m...
8/22/20
13
http://www.tonyparisi.com
glTF content pipelines
Three.js glTF loader project
8/22/20
13
http://www.tonyparisi.com
currently a branch of the glTF project on Github
https:/...
three.js glTF loader – project
status
8/22/20
13
http://www.tonyparisi.com
most glTF features are already supported
triang...
glTF status
version 1.0 – hoping for full draft spec in early 2014
v1.0 scope
node hierarchy
cameras
lights
animations – k...
glTF specification process
specification driven by COLLADA working group at
Khronos
not an official standard - yet
spec wo...
Upcoming SlideShare
Loading in …5
×

glTF Update with Tony Parisi WebGL Meetup August 2013

3,800 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
  • Be the first to comment

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

×