Declarative 3D for the Web
Architecture
Web3D 2012 Workshop
Johannes Behr, Kristian Sons
Motivation
• Ease of use
o
o
o
o
o
o
Bring 3D to the Web developers (not v.v.)
Fully integrate 3D content into HTML5 documents
Interactive 3D graphics as first class DOM objects
Reuse existing Web technology wherever possible
Do not add new concepts, unless absolutely necessary
Easy to debug
► Make it easy to add 3D to Web pages
Motivation
• User generated content
User generated has shaped the Internet (Wiki, Facebook,
YouTube)
o Imagine:
 Post a 3D model to a blog
 Send 3D scene via email
o Create new content from existing content
o Index and search 3D content
o
► Share and experience 3D content
Motivation
• Efficiency & Platform Independence
Enables highly efficient native implementation:
 Utilizes all (battery) resources efficiently
 Leverage heterogeneous HW
 Use CPU time for application, not for rendering,
collision, traversal, scene-housekeeping, ...
 Critical for mobile platforms
o Independence:
 Platform
 Rendering algorithm
o
► Renderer as native part of Browser
Motivation
• Industrial-strength 3D graphics
3D is part of the HTML document:
 Generate 3D content from databases
 Gather 3D content from multiple sources
 Ajax, RESTful
 Use existing web development tools
o Security
 Fixed function: No direct GPU programs necessary
 Programmable: Indirection layer
o Eases client-, server- and hybrid rendering
o
► Infrastructure
for 3D Web Applications
Declarative 3D & WebGL
• WebGL is great!
o Brought us closer to ideas of Dec3D
o Allows us to emulate Dec3D
 but: not everything possible from JavaScript
• Most WebGL applications use abstraction layer
o JavaScript scene graph (Three.js, GLGE)
o HTML DOM-based scene graph (X3DOM, XML3D)
Industry-strength graphics
• Industry prefers declarative approach?
o Industry thinks in formats, not in APIs
• Community Group:
o EDF, Orange FT
• Industry projects:
o BMW, Intel, SAP, Volkswagen, EADS, ...
• SME:
o Increasing number of agencies to build-up
Dec3D know-how
Industry-strength graphics
Browser Vendors
"Scene graphs never suceeded"
o 3D graphics never gained broad accessibilty
"Scene graphs are not flexible enough"
o Not as flexible as API, but flexible enough
"No baked scene graph"
o Programmability can help
"Too complex to handle / implement"
o Closer to HTML: easier to handle
Discussion
<div style="transform: scale3d(2, 2, 2)">
<div style="transform: translate3d(-5, 2, 12.5)">
...
</div>
</div>
• Dec3D as bridge between WebGL and 3D Transforms?
• Can we reach Dec3D incrementally?
• What's missing, starting from here?
► Dec3D Essentials
Declarative 3D Essentials
• Identified 15 key concepts of DOM-based Dec3D
• Lessons learned (X3DOM & XML3D)
• High-level descriptions now
o
o
o
o
Discuss
Concretize
Show up alternatives
Prioritize
• http://goo.gl/AZ40m
► Present until TPAC 2012
Declarative 3D Essentials
1. Start element
Transition from HTML flow layout to 3D transform
<div>
<dec3d style="border-style: dashed">
...
</dec3d>
</div>
Declarative 3D Essentials
2. CSS integration
• Use exiting CSS properties where applicable:
o transform
o opacity
o display
o color (?)
• Define a set of 3D-specific CSS properties
• How to handle generic properties?
o As property values (CSS Shaders) ?
o Needs to be supported in UAs!
Declarative 3D Essentials
3. Hierarchy
• HTML hierarchy
o <div>, <span>, <section> ...
• Do we need a graph to link sub-graphs?
o X3D and SVG have this
o Comes with issues (e.g. CSS inheritance)
4. Transformations

• Use CSS 3D Transforms
Declarative 3D Essentials
5. Generic Data Containers
• Take modern HW into account
o Name => Type, TupleSize, Value
o Based on TypedArrays
o Interface to modify using TypedArrays
6. External Data Containers

• External (binary) blobs / transmission format
o Maps to generic data containers
o Also usable for WebGL and CSS Shader
Declarative 3D Essentials
7. Operators on Data Containers
• Allows dynamic meshes, image processing, compression
• Data driven approach
o Xflow, X3D Routes, SVG Filter FX
8. Shaders

• 2-3 powerful fixed-function shaders
o Enough for many use-cases
o No timing attack issues
o Can adapt to target device
• Programmable Shaders, Shader Trees
Declarative 3D Essentials
9. Textures
• Use HTML elements
o <img>, <video>, <canvas>
• Interactive textures
o <svg>, <html>, <iframe>
10. 3D Geometry

• Close to OpenGL primitives
• Higher semantics geometry could be solved
o Operators
o Components
Declarative 3D Essentials
11. Lights
• Shader parameters in GL
• Intuitive way to define lights
• Don't obstruct future concepts
12. Viewpoints

• Link to viewpoints (intra and inter-document)
13. Camera navigation
• Pre-defined navigation modes?
Declarative 3D Essentials
14. DOM Events
• Support standard events
o mouseover, click, drop
• 3D-specific DOM Events
o contain 3D-specific context information
o e.g. Extend MouseEvent with pick data
15. Interfaces & Types

• Provide IDLs for new elements
o Convienence functions
• Provide / use types that help to manage 3D scene
o CSSMatrix, Matrix type proposed in W3C FX
Thanks!