x3dom declarative x 3d in html5 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
X3DOM – Declarative (X)3D in HTML5 PowerPoint Presentation
Download Presentation
X3DOM – Declarative (X)3D in HTML5

Loading in 2 Seconds...

play fullscreen
1 / 65

X3DOM – Declarative (X)3D in HTML5 - PowerPoint PPT Presentation


  • 113 Views
  • Uploaded on

X3DOM – Declarative (X)3D in HTML5. Introduction and Tutorial. Yvonne Jung, Johannes Behr Fraunhofer IGD / VCST Darmstadt, Germany. 3D Information inside the Web. Websites (have) become Web applications Increasing interest in 3D for Product presentation

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

X3DOM – Declarative (X)3D in HTML5


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
    Presentation Transcript
    1. X3DOM – Declarative (X)3D in HTML5 Introduction and Tutorial Yvonne Jung, Johannes Behr FraunhoferIGD / VCSTDarmstadt, Germany

    2. 3D Information inside the Web • Websites (have) become Web applications • Increasing interest in 3D for • Product presentation • Visualization of abstract information • Experiencing Cultural Heritage data etc. • Supporting decision making, e.g. in Virtual Engineering • Enhancing user experience with more sophisticated visualizations • Yesterday: Flash-based site with videos • Today: Immersive 3D inside Browsers

    3. Virtual Engineering and Cultural Heritage on the Web Titel, Ort, Datum - Vorname Name

    4. Technology Trends 3D Data and Documents Convergence of ApplicationPlatforms 3D PLM HTML5 Cloud-basedRendering 3D Printer W3C WebApps 3D Scanner Web Service Architectures Windows Store apps Web-based Engineering Titanium Augmented/ Mixed Reality Chrome OS PhoneGap PeperNaCI Geo Data Divergence of System Platforms iOS Android Touch Table Amazon Kindle Windows Mac OS BlackBerry Linux WindowsPhone CloudBases

    5. OpenGL + GLSL on the Web: WebGL • JavaScript Binding for OpenGL ES 2.0 in Web Browser •  Firefox, Chrome, Safari, Opera • Only GLSL shader based, no fixed function pipeline • No variables from GL state • No Matrix stack, etc. • HTML5 <canvas>element provides 3D rendering context • gl = canvas.getContext(’webgl’); • API calls via GL object • X3D via X3DOM framework • http://www.x3dom.org

    6. X3DOM – Declarative (X)3D in HTML5 • X3DOM := X3D + DOM • DOM-based integration framework for declarative 3D graphics in HTML5 • Seamless integration of 3D contents in Web Browser

    7. X3DOM – Declarative (X)3D in HTML5 • Brings together both, • declarative content design as known from web design • “old-school” imperative approaches known from game engine development • Allows utilizing well-known JavaScript and DOM infrastructure for 3D • Embed a live scene-graph in the DOM <html> <body> <h1>Hello X3DOM World</h1> <x3d> <scene> <shape> <box></box> </shape> </scene> </x3d> </body> </html>

    8. X3DOM – Declarative (X)3D in HTML5Completes todays graphics technologies 3D (No W3C spec yet) 2D (Final HTML5 spec) • Declarative • Scene-graph • Part of HTML document • DOM Integration • CSS / Events Imperative Procedural API Drawing context Flexible <canvas>

    9. Benefits: WhyDeclarative 3D in HTML? • Native Web Browser integration • Plug-in/ App free • No issues with user permissions, installation, and security • OS independent, especially on mobile devices • Cluttered: Windows Phone, Android, iOS, Symbian… • Web Browsers for most devices available • Browser already provides complete deployment structure • Eases proliferation of technology and accessibility of content • No special APIs (such as in game engines) • No expert knowledge required (OpenGL, mathematics, …) • Integrates with standard Web techniques (e.g. DHTML, Ajax) • Rapid application development

    10. Benefits: WhyDeclarative 3D in HTML? • Declarative, open, human-readable (wraps low-level graphics) • Utilizing standard Web APIs for integrating content and user interactions • Open architectures (also for authoring) and ease of access • Integration into HTML document instead of closed systems • Metadata: index and search “content” on WebGL apps? • Allows “mash-ups” (i.e. recombination of existing contents) • Open formats enable automated connection of existing data (e.g., geo-information, Flickr) with 3D content • Unify 2D and 3D media development • Declarative content description • Flexible content (cultural heritage, industry,…) • Interoperability: Write once, run anywhere (web/ desktop/ mobile)

    11. Excursus: Web-based APIs and DOM • Browser provides complete deployment structure • DOM (Document Object Model) is standardized interface that allows manipulating content, structure and style of (X)HTML/ XML documents • Document is structured as tree with nodes • document.getElementById(„myID“); • Nodes/ tags and attributes can be added, removed and modified (usually with JavaScript) • document.createElement(), appendChild(), removeChild() • setAttribute(), getAttribute() • UI events (e.g. ‘mouseover’) can be attached to most elements (e.g. <img>, <a>, <div>, etc.) • Separation of style and content via CSS DOM structure (example)

    12. Short introduction of HTML <html> <head> <title>My 3D page</title> </head> <body> <h1>Hello X3DOM World</h1> <p> A blue box will soon appear. </p> </body> </html>

    13. First HTML needs to know about (X)3D • <html> • <head> • <title>My 3D page</title> • <linkrel="stylesheet"type="text/css" • href="http://www.x3dom.org/x3dom/release/x3dom.css"> • </link> • <scripttype="text/javascript" • src="http://www.x3dom.org/x3dom/release/x3dom.js"> • </script> • </head> • …

    14. 3D only works inside the <X3D> tag • … • <body> • <h1>Hello X3DOM World</h1> • <p> • A blue box will soon appear. • </p> • <x3dwidth="400"height="300"> • </x3d> • </body> • </html>

    15. All 3D objects are children of the <scene> element • … • <body> • <h1>Hello X3DOM World</h1> • <x3dwidth="400"height="300"> • <scene> • <shape> • <box></box> • </shape> • </scene> • </x3d> • </body> • </html>

    16. Every object has a <shape> • … • <body> • <h1>Hello X3DOM World</h1> • <x3dwidth="400"height="300"> • <scene> • <shape> • <box></box> • </shape> • </scene> • </x3d> • </body> • </html>

    17. …and a geometry, like e.g. a <box> • … • <body> • <h1>Hello X3DOM World</h1> • <x3dwidth="400"height="300"> • <scene> • <shape> • <box></box> • </shape> • </scene> • </x3d> • </body> • </html>

    18. …and an <appearance> <x3dwidth="400"height="300"> <scene> <shape> <appearance> <material diffuseColor="red"> </material> </appearance> <box></box> </shape> </scene> </x3d>

    19. …with a (e.g. red) <material> <x3dwidth="400"height="300"> <scene> <shape> <appearance> <materialdiffuseColor="red"> </material> </appearance> <box></box> </shape> </scene> </x3d>

    20. Materials with specular highlights <x3dwidth="400"height="300"> <scene> <shape> <appearance> <materialdiffuseColor="red" specularColor="#808080"> </material> </appearance> <box></box> </shape> </scene> </x3d>

    21. Change BackgroundColors in (R,G,B) with red/green/blue  [0,1] <scene> <shape> <appearance> <material diffuseColor="red" specularColor="#808080"> </material> </appearance> <box></box> </shape> <backgroundskyColor="0 0 0"> </background> </scene>

    22. Change Background (now using CSS) <x3d style="background-color: #00F;"> <scene> … </scene> </x3d> • Change sizeof<x3d> elementtofullsize <x3d style="margin:0; padding:0; width:100%; height:100%; border:none;"> … </x3d>

    23. Geometric base objects • See screenshot – from left to right: • <sphere radius=“1.0”> • <cylinder radius=“1.0” height=“2.0”> • <box size=“2.0 2.0 2.0”> • <conebottomRadius=“1.0” height=“2.0”> • <torusinnerRadius=“0.5”outerRadius=“1.0”> • <plane size=“2.0 2.0” subdivision=“1 1”>

    24. Defining own geometriesExample: simple rectangle with an <indexedFaceSet> • <scene> • <shape> • <appearance> • <material diffuseColor="salmon"> • </material> • </appearance> • <indexedFaceSetcoordIndex="0 1 2 3 -1"> • <coordinate point="2 2 0, 7 2 0, 7 5 0, 2 5 0"> • </coordinate> • </indexedFaceSet> • </shape> • <viewpoint position="0 0 15"></viewpoint> • </scene>

    25. Defining own geometriesExample: simple rectangle with an <indexedFaceSet> • <indexedFaceSetcoordIndex="0 1 2 3 -1"> • <coordinatepoint="2 2 0, 7 2 0, 7 5 0, 2 5 0"></coordinate> • </indexedFaceSet> • Important building blocks • The vertices of a Polygon (here “face”), given as <coordinate> • The index to a vertex, given as list: “coordIndex” y (2, 5, 0) (7, 5, 0) 5 (2, 2, 0) (7, 2, 0) 1 x 1 5 1 z

    26. Defining own geometriesExample: simple rectangle with an <indexedFaceSet> • <indexedFaceSetcoordIndex="0 1 2 3 -1"> • <coordinate point="2 2 0, 7 2 0, 7 5 0, 2 5 0"></coordinate> • </indexedFaceSet> • The end of one polygon and the begin of a new one is marked as “-1” in the index array • This way arbitrarily complex 3D objects can be created y (2, 5, 0) (7, 5, 0) 5 (2, 2, 0) (7, 2, 0) 1 x 1 5 1 z

    27. Defining own geometriesExample: simple rectangle with an <indexedFaceSet> • <indexedFaceSetcoordIndex="0 1 2 3 -1"> • <coordinatepoint="2 2 0, 7 2 0, 7 5 0, 2 5 0"></coordinate> • </indexedFaceSet> • The indices (except “-1”) refer to the array position of a 3D coordinate in <coordinate> • The coordinates of a certain polygon are listed counterclockwise y (2, 5, 0) (7, 5, 0) 5 3 2 0 1 (2, 2, 0) (7, 2, 0) 1 x 1 5 1 z

    28. DOM holds structure and dataMore than 95% are usually unstructured data

    29. Declarative (X)3D in HTMLProblem: Large Datasets • Real 3D applications lead to huge HTML files • DOM holds structure and data • More than 95% are usually unstructured data • Unpleasant non-interactive user experience • Browsers not built to hold Gigabytes of DOM attribute data • Possible solutions • Reference external sub trees (e.g. X3D Inline) • Binary XML decompression (e.g. X3DB format) • Separate structure from raw data • Khronos: 3D Transmission Format • http://www.perey.com/ARStandards/Notes_during_Transmission_Format_Requirements_Session_Nov_9_2012.pdf

    30. Declarative (X)3D in HTMLProblem: Large Datasets • Separation of structure and data • Structure in DOM, attributes in binary containers • J. Behr, Y. Jung, T. Franke, T. Sturm: Using images and explicit binary container for efficient and incremental delivery of declarative 3D scenes on the Web. Web3D 2012 • Batching draw calls by merging geometries • Subdivision into meshes with max. 216 vertices • Compact vertex data encoding • Improve transmission (over Web and CPU  GPU) • No decoding, just transfer as-is to GPU memory • (Client-/server-based approaches)

    31. New Geometrynodetypes • Data transcoding (example with input file „model.ply“) • Without mesh restructuring • aopt -imodel.ply -G binGeo/:sac -N model.html • With mesh/graph optimization (cleanup, patching, and binary creation) • aopt -imodel.ply-F Scene:"cacheopt(true)” -G binGeo/:sac -N model.html <binaryGeometryvertexCount='1153083' primType='"TRIANGLES"' position='19.811892 -57.892578 -1.699294' size='92.804482 159.783081 26.479685' coord='binGeo/BG0_interleaveBinary.bin#0+24'coordType='Int16' normal='binGeo/BG0_interleaveBinary.bin#8+24' normalType='Int16‘ color='binGeo/BG0_interleaveBinary.bin#16+24‘ colorType='Int16' > </binaryGeometry>

    32. Vertex Data Encoding • Compact encoding of vertex attribute data • Using 16 bit (pos, texCoord) or 8 (normal, color) • Required number of bits for pixel-level accuracy for viewport of size w × h, with N := max(w, h), is: • No expensive CPU-based decoding required • Optionally normals as spherical coords in pos.w • Simplified conversion to Cartesian coords for mobile shaders • aopt -i model.x3d -F Scene:”maxtris(20000)” -G binGeo/:sacp -N model.html • Ensure 32 bit alignment for rendering speed Titel, Ort, Datum - Vorname Name

    33. Vertex Data Encoding

    34. Light sources in X3DOM…are part of the <scene> <directionalLight direction='0 0 -1' intensity='1'> </directionalLight > <pointLight location='0 0 0' intensity='1'> </pointLight > <spotLight direction='0 0 -1' location='0 0 0' intensity='1'> </spotLight > Directionallight Point light Spot light

    35. Other rendering effects • <directionalLight direction='0 0 -1' intensity='1' shadowIntensity='0.7'> • </directionalLight> <fogvisibilityRange='1000'></fog> • <imageTextureurl=“myTextureMap.jpg“></ imageTexture> • Note: like <material> only as child node of <appearance> possible! shadows fog textures

    36. Parameterizing shadows • Implemented as post-process, thus transparent to user-defined shaders • Additional fields in all light nodes: • shadowIntensity(default 0), shadowMapSize (default 1024),shadowFilterSize(default 0), shadowOffset(default 0), and – very rarely needed: zNear (default -1), zFar (default -1) • Fields in Directional- and SpotLight: • shadowCascades (default 1), shadowSplitOffset (default 0.1),shadowSplitFactor (default 1) – 0 equidistant splitting, 1 logarithmic Titel, Ort, Datum - Vorname Name

    37. Appearanceexample: a textured box • <x3d width="500px" height="400px"> • <scene> • <shape> • <appearance> • <imageTextureurl="logo.png"></imageTexture> • </appearance> • <box></box> • </shape> • </scene> • </x3d> • Interesting alternative – using a video as texture: • <movieTextureurl=’”foo.mp4″,”foo.ogv”‘></movieTexture>

    38. Excursus: the lighting model(diffuse and specular reflection) • Final color I := ambient material + diffuse material * (N·L) + specular material * (N·H)s • For more light sources:

    39. Two objects in one scene (?!) • <scene> • <shape> • <appearance> • <material diffuseColor='red'></material> • </appearance> • <box></box> • </shape> • <shape> • <appearance> • <material diffuseColor='blue'></material> • </appearance> • <sphere></sphere> • </shape> • </scene> • … OK ???

    40. Two objects in one sceneProblem: both appear at same position <scene> <shape> <appearance></appearance> <box></box> </shape> <shape> <appearance></appearance> <sphere></sphere> </shape> </scene>

    41. Two objects in one sceneProblem: both appear at same position <scene> <shape> <appearance></appearance> <box></box> </shape> <shape> <appearance></appearance> <sphere></sphere> </shape> </scene> Reason: 3D objects are usually created in coordinate origin and need to be repositioned afterwards y 1 x 1 3 1 z

    42. Excursus: (2D) coordinate systemsObject coordinates in image plane (given by x & y) y (2, 5) (7, 5) 5 (2, 2) (7, 2) 1 x 1 5

    43. Excursus: (3D) coordinate systemsObject coordinates in 3D space (z orthogonal on x & y) y (2, 5, 0) (7, 5, 0) 5 (2, 2, 0) (7, 2, 0) 1 x 1 5 1 z

    44. Two objects in one sceneNow with translation • <transform translation="-2 0 0"> • <shape> • <appearance> • <material diffuseColor="red"></material> • </appearance> • <box></box> • </shape> • </transform> • <transformtranslation="2 0 0"> • <shape> • <appearance> • <material diffuseColor="blue"></material> • </appearance> • <sphere></sphere> • </shape> • </transform>

    45. Two objects in one sceneNow with translation • <transform translation="-2 0 0"> • <shape> • <appearance> • <material diffuseColor="red"></material> • </appearance> • <box></box> • </shape> • </transform> • <transformtranslation="2 0 0"> • <shape> • <appearance> • <material diffuseColor="blue"></material> • </appearance> • <sphere></sphere> • </shape> • </transform> y 1 x 1 3 1 z

    46. The scene graph: Grouping and transformations • 3D elements are usually organized hierarchically • Starting from the root node (i.e. from <scene> element) all 3D elements (e.g. <shape>, <box> etc.) are inserted into the “tree” (scene graph) as child or sibling elements • Note: tree ≠ graph • <group> and <transform> elements help to group and reposition objects: • <transformtranslation="0 0 0"rotation="0 1 0 0"scale="1 1 1">…</transform>

    47. DOM Manipulation: Node appending / removal • HTML/X3D code: • <group id=‘root’></group> • … • JS script to add nodes: • root = document.getElementById(‘root’); • trans = document.createElement('Transform'); • trans.setAttribute(‘translation’, ‘1 2 3’ ); • root.appendChild(trans); • JS script to remove nodes: • root.removeChild(trans); • JS script with setAttribute() (also useful for libs like jQuery): • document.getElementById(‘mat’).setAttribute(‘diffuseColor’,’red’);

    48. How do I know, which elements can be combined? • <Transform translation='4 2 1'> • <Shape> • <Appearance> • <MaterialdiffuseColor='1 1 0'> • </Material> • </Appearance> • <IndexedFaceSetcoordIndex='0 1 2 3 -1 3 2 1 0 -1'> • <Coordinate point='0 0 0 1 0 0 1 1 0 0 1 0'> • </Coordinate> • </IndexedFaceSet> • </Shape> • </Transform> Titel, Ort, Datum - Vorname Name

    49. How do I know, which elements can be combined? Back to the roots: VRML • Transform{ • translation 4 2 1 • children [ • Shape { • appearanceAppearance { • materialMaterial { • diffuseColor 1 1 0 • } • } • geometryIndexedFaceSet { • coordCoordinate { • point [ 0 0 0, 1 0 0, 1 1 0, 0 1 0 ] • } • coordIndex [ 0 1 2 3 -1, 3 2 1 0 -1 ] • } • } • ] • } http://doc.instantreality.org/tools/x3d_encoding_converter/ Titel, Ort, Datum - Vorname Name

    50. HTML Events: user interaction through DOM Events • <shape> • <appearance> • <material id="mat"diffuseColor="red"> • </material> • </appearance> • <box onclick="document.getElementById('mat').setAttribute('diffuseColor', 'green');" > • </box> • </shape> • …