1 / 20

Declarative 3D for the Web Architecture

This workshop explores the architecture of Declarative 3D for the Web, aiming to integrate fully interactive 3D graphics as first-class DOM objects in HTML5 documents. The motivation is to make it easy for developers to add 3D content to web pages and to enable users to generate, share, and experience 3D content online. The workshop also discusses the essentials of Declarative 3D, including hierarchy, transformations, data containers, shaders, textures, 3D geometry, and lights.

mjeff
Download Presentation

Declarative 3D for the Web Architecture

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Declarative 3D for the Web Architecture Web3D 2012 Workshop Johannes Behr, Kristian Sons

  2. Motivation • Ease of use • 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

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

  4. 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 • Independence: • Platform • Rendering algorithm     ►Renderer as native part of Browser

  5. 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 • Security • Fixed function: No direct GPU programs necessary  • Programmable: Indirection layer • Eases client-, server- and hybrid rendering     ►Infrastructure           for 3D Web Applications

  6. Declarative 3D & WebGL • WebGL is great! • Brought us closer to ideas of Dec3D • Allows us to emulate Dec3D • but: not everything possible from JavaScript • Most WebGL applications use abstraction layer • JavaScript scene graph (Three.js, GLGE) • HTML DOM-based scene graph (X3DOM, XML3D)

  7. Industry-strength graphics • Industry prefers declarative approach? • Industry thinks in formats, not in APIs • Community Group: • EDF, Orange FT • Industry projects: • BMW, Intel, SAP, Volkswagen, EADS, ... • SME: • Increasing number of agencies to build-up Dec3D know-how

  8. Industry-strength graphics

  9. Browser Vendors "Scene graphs never suceeded" • 3D graphics never gained broad accessibilty "Scene graphs are not flexible enough" • Not as flexible as API, but flexible enough "No baked scene graph" • Programmability can help "Too complex to handle / implement" • Closer to HTML: easier to handle

  10. 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

  11. Declarative 3D Essentials • Identified 15 key concepts of DOM-based Dec3D • Lessons learned (X3DOM & XML3D) • High-level descriptions now • Discuss • Concretize • Show up alternatives • Prioritize • http://goo.gl/AZ40m ►Present until TPAC 2012

  12. Declarative 3D Essentials 1. Start element Transition from HTML flow layout to 3D transform <div>     <dec3d style="border-style: dashed">     ...     </dec3d> </div>

  13. Declarative 3D Essentials 2. CSS integration • Use exiting CSS properties where applicable: • transform • opacity • display • color (?) • Define a set of 3D-specific CSS properties • How to handle generic properties? • As property values (CSS Shaders) ? • Needs to be supported in UAs!

  14. Declarative 3D Essentials 3. Hierarchy • HTML hierarchy • <div>, <span>, <section> ... • Do we need a graph to link sub-graphs? • X3D and SVG have this • Comes with issues (e.g. CSS inheritance) 4. Transformations  • Use CSS 3D Transforms 

  15. Declarative 3D Essentials 5. Generic Data Containers • Take modern HW into account • Name => Type, TupleSize, Value • Based on TypedArrays • Interface to modify using TypedArrays 6. External Data Containers  • External (binary) blobs / transmission format • Maps to generic data containers • Also usable for WebGL and CSS Shader

  16. Declarative 3D Essentials 7. Operators on Data Containers • Allows dynamic meshes, image processing, compression • Data driven approach • Xflow, X3D Routes, SVG Filter FX 8. Shaders  • 2-3 powerful fixed-function shaders • Enough for many use-cases • No timing attack issues • Can adapt to target device •  Programmable Shaders, Shader Trees

  17. Declarative 3D Essentials 9. Textures • Use HTML elements • <img>, <video>, <canvas> • Interactive textures • <svg>, <html>, <iframe> 10. 3D Geometry  • Close to OpenGL primitives • Higher semantics geometry could be solved • Operators • Components  

  18. 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?

  19. Declarative 3D Essentials 14. DOM Events • Support standard events  • mouseover, click, drop • 3D-specific DOM Events • contain 3D-specific context information • e.g. Extend MouseEvent with pick data 15. Interfaces & Types  • Provide IDLs for new elements • Convienence functions • Provide / use types that help to manage 3D scene • CSSMatrix, Matrix type proposed in W3C FX

  20. Thanks!

More Related