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!