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

1. glTF update
tony parisi
august 22, 2013

2. last November…
8/22/20
13
http://www.tonyparisi.com

3. 8/22/20
13
http://www.tonyparisi.com
…now
graphics library Transmission Format

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. 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. 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. 8/22/20
13
http://www.tonyparisi.com
three.js loader
rest3d viewer
Cesium engine
MontageJS viewer
glTF in action

8. demo
8/22/20
13
http://www.tonyparisi.com
model from 3drt.com

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. 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. 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. 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. 8/22/20
13
http://www.tonyparisi.com
glTF content pipelines

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