gltf update with tony parisi webgl meetup august 2013
DESCRIPTION
My talk for the August 2013 San Francisco WebGL Meetup - an Update on the glTF file formatTRANSCRIPT
glTF updatetony parisi
august 22, 2013
04/08/2023
http://www.tonyparisi.com
last November…
04/08/2023
http://www.tonyparisi.com
…now
graphics library Transmission Format
04/08/2023
http://www.tonyparisi.com
wtf is glTF?
the runtime asset format for WebGL, OpenGL ES, and OpenGL applications
compact representationJSON 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 neutralcan be used by any app or runtime – initial target is for WebGL-accelerated applications
open specification; open processKhronos Group initiative within the COLLADA working group
F. Robinet (lead), R. Arnaud, P. Cozzi, T. Parisi
http://gltf.gl/
04/08/2023
http://www.tonyparisi.com
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 3000developers 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
04/08/2023
http://www.tonyparisi.com
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 setGL native data types require no additional processingalso includes common 3D constructs (hierarchy, cameras, lights, common materials, animation )
reduces duplicated effort in content pipeline
a common publishing format for content tools
04/08/2023
http://www.tonyparisi.com
three.js loader
rest3d viewer
Cesium engine
MontageJS viewer
glTF in action
04/08/2023
http://www.tonyparisi.com
demo
model from 3drt.com
04/08/2023
http://www.tonyparisi.com
comparison : glTF vs COLLADA file sizes
Size (Mb) Wine RackSuper
Murdoch Virtual City Razer RamblerglTF JSON + .bin 0.58 0.85 2.6 5.1 12.7COLLADA (.dae) 0.79 1.8 5.5 7.5 31.6% reduction 27% 53% 53% 32% 60%
Wine Rack Super Murdoch
Virtual City Razer Rambler0
5
10
15
20
25
30
35
40
45
50
COLLADA (.dae)glTF JSON + .bin
04/08/2023
http://www.tonyparisi.com
comparison : glTF vs COLLADA load times
Wine Rack Razer Virtual City Super Murdoch
Rambler0
1
2
3
4
5
6
7
COLLADA (.dae)glTFglTF w BufferGeometry
Wine Rack Razer Virtual City Super Murdoch RamblerglTF w BufferGeometry 0.06 0.08 0.09 0.21 0.69glTF 0.08 0.36 0.15 0.27 1.86COLLADA (.dae) 0.18 1.34 1.05 0.55 3.88%reduction 67% 94% 91% 62% 82%
04/08/2023
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 stuffdeclaring vertex attributes
accessing external binary data via buffers and buffer
views
04/08/2023
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
04/08/2023
http://www.tonyparisi.com
glTF content pipelines
04/08/2023
http://www.tonyparisi.com
Three.js glTF loader project
currently a branch of the glTF project on Githubhttps://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
04/08/2023
http://www.tonyparisi.com
three.js glTF loader – project status
most glTF features are already supportedtriangle 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
animationKey frame/articulated only
shadersuses “common profile” techniques - lighting models such as Phong and Lambert, and their parameters, are mapped to existing Three.js material types
features TBD, in progressskinned animations and morphs
arbitrary GLSL shaders (via THREE.ShaderMaterial)
04/08/2023
http://www.tonyparisi.com
glTF status
version 1.0 – hoping for full draft spec in early 2014
v1.0 scopenode 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
04/08/2023
http://www.tonyparisi.com
glTF specification process
specification driven by COLLADA working group at Khronosnot an official standard - yet
spec work being done completely in the open
all features backed up by multiple implementations in code
specificationhttps://github.com/KhronosGroup/glTF/blob/master/specification/README.md
glTF repo with sample code and specification JSON schemahttps://github.com/KhronosGroup/glTF