Declarative 3D for the Web Architecture

Web3D 2012 Workshop

Johannes Behr, Kristian Sons

Motivation

• Ease of use o Bring 3D to the Web developers (not v.v.)o Fully integrate 3D content into HTML5 documentso Interactive 3D graphics as first class DOM objectso Reuse existing Web technology wherever possibleo Do not add new concepts, unless absolutely necessaryo Easy to debug

     ► Make it easy to add 3D to Web pages

Motivation

• User generated contento 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 contento Index and search 3D content

     ► Share and experience 3D content

Motivation

• Efficiency & Platform Independenceo 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

     ► Renderer as native part of Browser

Motivation

• Industrial-strength 3D graphicso 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     ► Infrastructure          for 3D Web Applications

Declarative 3D & WebGL

• WebGL is great!o Brought us closer to ideas of Dec3Do 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 Discusso Concretizeo Show up alternativeso 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 transformo opacityo displayo 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 hierarchyo <div>, <span>, <section> ...

• Do we need a graph to link sub-graphs?o X3D and SVG have thiso Comes with issues (e.g. CSS inheritance)

4. Transformations

• Use CSS 3D Transforms 

Declarative 3D Essentials

5. Generic Data Containers

• Take modern HW into accounto Name => Type, TupleSize, Valueo Based on TypedArrayso Interface to modify using TypedArrays

6. External Data Containers

• External (binary) blobs / transmission formato Maps to generic data containerso 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 shaderso Enough for many use-caseso No timing attack issueso Can adapt to target device

•  Programmable Shaders, Shader Trees

Declarative 3D Essentials

9. Textures

• Use HTML elementso <img>, <video>, <canvas>

• Interactive textureso <svg>, <html>, <iframe>

10. 3D Geometry

• Close to OpenGL primitives• Higher semantics geometry could be solved

o Operatorso 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 Eventso contain 3D-specific context informationo 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!