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 documents o Interactive 3D graphics as first class DOM objects o Reuse existing Web technology wherever possible o Do not add new concepts, unless absolutely necessary o Easy to debug ► Make it easy to add 3D to Web pages

Motivation User generated content o User generated has shaped the Internet (Wiki, Facebook, YouTube) o Imagine:  Post a 3D model to a blog  Send 3D scene via o Create new content from existing content o Index and search 3D content ► Share and experience 3D content

Motivation Efficiency & Platform Independence o 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 graphics o 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 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... 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 Discuss o Concretize o Show up alternatives o Prioritize ► Present until TPAC 2012

Declarative 3D Essentials 1. Start element Transition from HTML flow layout to 3D transform...

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,,... 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,, Interactive textures o,, 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!