X3dom declarative x 3d in html5
This presentation is the property of its rightful owner.
Sponsored Links
1 / 65

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


  • 35 Views
  • Uploaded on
  • Presentation posted in: General

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

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


X3dom declarative x 3d in html5

X3DOM – Declarative (X)3D in HTML5

Introduction and Tutorial

Yvonne Jung, Johannes Behr

FraunhoferIGD / VCSTDarmstadt, Germany


3d information inside the web

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


Virtual engineering and cultural heritage on the web

Virtual Engineering and Cultural Heritage on the Web

Titel, Ort, Datum - Vorname Name


Technology trends

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


Opengl glsl on the web webgl

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


X3dom declarative x 3d in html51

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


X3dom declarative x 3d in html52

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>


X3dom declarative x 3d in html5 c ompletes todays graphics technologies

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>


Benefits why declarative 3d in html

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


Benefits why declarative 3d in html1

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)


Excursus web based apis and dom

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)


    Short introduction of html

    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>


    First html needs to know about x 3d

    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>


    3d only works inside the x3d tag

    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>


    All 3d objects are children of the scene element

    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>


    Every object has a shape

    Every object has a <shape>

    • <body>

    • <h1>Hello X3DOM World</h1>

    • <x3dwidth="400"height="300">

    • <scene>

    • <shape>

    • <box></box>

    • </shape>

    • </scene>

    • </x3d>

    • </body>

    • </html>


    And a geometry like e g a box

    …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>


    And an appearance

    …and an <appearance>

    <x3dwidth="400"height="300">

    <scene>

    <shape>

    <appearance>

    <material diffuseColor="red">

    </material>

    </appearance>

    <box></box>

    </shape>

    </scene>

    </x3d>


    With a e g red material

    …with a (e.g. red) <material>

    <x3dwidth="400"height="300">

    <scene>

    <shape>

    <appearance>

    <materialdiffuseColor="red">

    </material>

    </appearance>

    <box></box>

    </shape>

    </scene>

    </x3d>


    Materials with specular highlights

    Materials with specular highlights

    <x3dwidth="400"height="300">

    <scene>

    <shape>

    <appearance>

    <materialdiffuseColor="red"

    specularColor="#808080">

    </material>

    </appearance>

    <box></box>

    </shape>

    </scene>

    </x3d>


    Change background colors in r g b with red green blue 0 1

    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>


    Change background now using css

    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>


    Geometric base objects

    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”>


    Defining own geometries example simple rectangle with an indexedfaceset

    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>


    Defining own geometries example simple rectangle with an indexedfaceset1

    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


    Defining own geometries example simple rectangle with an indexedfaceset2

    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


    Defining own geometries example simple rectangle with an indexedfaceset3

    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


    Dom holds structure and data more than 95 are usually unstructured data

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


    Declarative x 3d in html problem large datasets

    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


  • Declarative x 3d in html problem large datasets1

    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)


  • New geometry node types

    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>


    Vertex data encoding

    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


    Vertex data encoding1

    Vertex Data Encoding


    Light sources in x3dom are part of the scene

    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


    Other rendering effects

    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


    Parameterizing shadows

    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


    Appearance example a textured box

    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>


    Excursus the lighting model diffuse and specular reflection

    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:


    Two objects in one scene

    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

    ???


    Two objects in one scene problem both appear at same position

    Two objects in one sceneProblem: both appear at same position

    <scene>

    <shape>

    <appearance></appearance>

    <box></box>

    </shape>

    <shape>

    <appearance></appearance>

    <sphere></sphere>

    </shape>

    </scene>


    Two objects in one scene problem both appear at same position1

    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


    Excursus 2d coordinate systems object coordinates in image plane given by x y

    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


    Excursus 3d coordinate systems object coordinates in 3d space z orthogonal on x y

    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


    Two objects in one scene now with translation

    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>


    Two objects in one scene now with translation1

    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


    The scene graph grouping and transformations

    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>


    Dom manipulation node appending removal

    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’);


    How do i know which elements can be combined

    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


    How do i know which elements can be combined back to the roots vrml

    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


    Html events user interaction through dom events

    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>


    Html events user interaction through dom events v2

    HTML Events: user interaction through DOM Events - V2

    • <shape id="box">

    • <appearance>

    • <material id="mat"diffuseColor="red"></material>

    • </appearance>

    • <box></box>

    • </shape>

    • <script type="text/javascript">

    • document.onload = function() {

    • document.getElementById('box').addEventListener('click', function() {

    • document.getElementById('mat').setAttribute('diffuseColor', 'olive');

    • }, false) };

    • </script>


    Efficient picking and interaction

    Efficient Picking and Interaction

    • JS-based SG traversal slow

      • Using „picking buffer“ instead

      • WebGL limitations

        • 8 bit RGBA texture

        • No MRT in FBO

  • Single-pass render-buffer

    •  Get position, normal and object ID within one step/pass


  • Efficient picking and interaction1

    Efficient Picking and Interaction

    • Single-pass render-buffer approach

      • Distance d to camera in RG channel (16 bit)

      • Object- or per-vertex idin BA channel (16 bit)

        • Allows identifying up to 65 535 different objects

    • Normal vectors derived using 2 × 2 window

      • Important for navigation and interaction

    • Read back 4 values instead of only one

      • Calculate cross product


    Html events 3dpickevent extends dom mouseevent

    HTML Events: 3DPickEvent extends DOM MouseEvent

    • interface 3DPickEvent: MouseEvent {

    • readonly attribute float worldX; // 3d world coordinates at pick position

    • readonly attribute float worldY;

    • readonly attribute float worldZ;

    • readonly attribute float normalX; // picked surface normal

    • readonly attribute float normalY;

    • readonly attribute float normalZ;

    • }

    • <grouponmousemove="updateTrafo(event); "> … </group>

    • <transform id="trafo"><shape isPickable="false"> … </shape></transform>

    • function updateTrafo(event) {

    • vart = document.getElementById(‘trafo‘);

    • varnorm = new x3dom.fields.SFVec3f(event.normalX, event.normalY, event.normalZ);

    • varqDir = x3dom.fields.Quaternion.rotateFromTo(new x3dom.fields.SFVec3f(0, 1, 0), norm);

    • varrot = qDir.toAxisAngle();

    • t.setAttribute('rotation', rot[0].x+' '+rot[0].y+' '+rot[0].z+' '+rot[1]);

    • t.setAttribute('translation', event.worldX+' '+event.worldY+' '+event.worldZ);

    • }


    X3dom math lib

    X3DOM Math Lib

    • Quaternion

    • parseAxisAngle(str)

    • axisAngle(axis,a)

    • rotateFromTo(fromVec,toVec)

    • multiply(that)

    • toMatrix()

    • toAxisAngle()

    • angle()

    • setValue(matrix)

    • dot(that)

    • add(that)

    • subtract(that)

    • setValues(that)

    • equals(that,eps)

    • multScalar(s)

    • normalize(that)

    • negate()

    • inverse()

    • slerp(that,t)

    • toGL()

    • toString()

    • setValueByStr(str)

    • SFColor

    • parse(str)

    • colorParse(color)

    • setValues(color)

    • equals(that,eps)

    • add(that)

    • subtract(that)

    • multiply(n)

    • toGL()

    • toString()

    • setValueByStr(str)

    • SFColorRGBA

    • parse(str)

    • setValues(color)

    • equals(that,eps)

    • toGL()

    • toString()

    • setValueByStr(str)

    • SFVec3f    copy(v)
    parse(str)
    setValues(that)
    at(i)
    add(that)
    addScaled(that,s)
    subtract(that)
    negate()
    dot(that)
    cross(that)
    reflect(n)
    length()
    normalize(that)
    multComponents(that)
    multiply(n)
    divide(n)
    equals(that,eps)
    toGL()
    toString()
    setValueByStr(str)

    Titel, Ort, Datum - Vorname Name


    X3dom math lib1

    X3DOM Math Lib

    • mult(that)

    • multMatrixPnt(vec)

    • multMatrixVec(vec)

    • multFullMatrixPnt(vec)

    • transpose()

    • negate()

    • multiply(s)

    • add(that)

    • addScaled(that,s)

    • setValues(that)

    • setValue(v1,v2,v3,v4)

    • toGL()

    • at(i,j)

    • sqrt()

    • normInfinity()

    • norm1_3x3()

    • normInf_3x3()

    • adjointT_3x3()

    • equals(that)

    • getTransform(translation,

    • rotation,scaleFactor,

    • scaleOrientation,center)

    • decompose(t,r,s,so)

    • polarDecompose(Q,S)

    • spectralDecompose(SO,k)

    • log()

    • exp()

    • det3(a1,a2,a3,b1,b2,b3,

    • c1,c2,c3)

    • det()

    • inverse()

    • toString()

    • setValueByStr(str)

    • SFMatrix4f

    • copy(that)

    • identity()

    • zeroMatrix()

    • translation(vec)

    • rotationX(a)

    • rotationY(a)

    • rotationZ(a)

    • scale(vec)

    • lookAt(from,at,up)

    • parseRotation(str)

    • parse(str)

    • e0()

    • e1()

    • e2()

    • e3()

    • setTranslate(vec)

    • setScale(vec)

    Example

    Basic decomposition of x3dom.fields.SFMatrix4f

    (given as mat)

    varquat = new x3dom.fields.Quaternion(0, 0, 1, 0);

    quat.setValue(mat);

    var rotation = rot.toAxisAngle();

    var translation = mat.e3();

    Titel, Ort, Datum - Vorname Name


    Example 1 interactive car configurator

    Example 1: Interactive Car Configurator

    Interaction via standardWeb technologies (e.g. JavaScript Events etc.)

    Using HTML + JavaScript, to change color and rims

    <img src="felge1_64.jpg“ onclick="..." style="…">

    Click on <img> element…

    document.getElementById('body_color').setAttribute("diffuseColor", '#000066');

    <x3d> element

    Part of DOM/ HTML document like every other HTML element (e.g. <p>, <img> etc.)

    …causes attribute change of <texture> url(i.e., other wheel rims appear)


    Example 2 painting textures of 3d objects

    Example 2: Painting Textures of 3D Objects

    HTML5 <canvas> element

    Painted image used as texture on 3D object

    <x3d> element

    Part of DOM/ HTML document like every other HTML element

    (JavaScript implementation based on new WebGL API of HTML5 <canvas> element)

    jQuery UI (User Interface)

    jQuery JavaScript library: http://jqueryui.com/


    Application large data and picking 3d internet design review

    Application (Large Data andPicking): 3D-Internet Design Review


    Navigation m oving the virtual camera interactively

    Navigation: moving the virtual camera interactively

    • Built-in navigation modes

      • Examine, walk, fly, lookat, game, helicopter and none

      • <navigationInfotype=“any”></navigationInfo>

      • Abstract behavior dynamically maps to various user inputs: mouse, keys, multi-touch

  • Application-specific navigation

    • Use nav. type ‘none’

    • Move camera by updating positionand orientation of <viewpoint>


  • Animations css 3d transforms css animation

    AnimationsCSS 3D Transforms & CSS Animation

    • Utilized to transform and update <transform> nodes (WebKit version)

    • <style type="text/css">

    • #trans {

    • -webkit-animation: spin 8s infinite linear;

    • }

    • @-webkit-keyframes spin {

    • from { -webkit-transform: rotateY(0); }

    • to { -webkit-transform: rotateY(-360deg); }

    • }

    • </style>

    • <transform id="trans">

    • <transform style="-webkit-transform: rotateY(45deg);">


    Animations x3d timesensor and interpolator nodes

    AnimationsX3D TimeSensorand Interpolator nodes

    <scene>

    <transform id="trafo"rotation="0 1 0 0">

    <shape>

    <appearance>

    <material diffuseColor="red">

    </material>

    </appearance>

    <box></box>

    </shape>

    </transform>

    <timeSensor id="ts" loop="true" cycleInterval="2">

    </timeSensor>

    <orientationInterpolator id="oi" key="0.0 0.5 1.0"

    keyValue="0 1 0 0, 0 1 0 3.14, 0 1 0 6.28">

    </orientationInterpolator>

    <ROUTEfromNode='ts'fromField='fraction_changed'

    toNode='oi'toField='set_fraction'></ROUTE>

    <ROUTEfromNode='oi'fromField='value_changed'

    toNode='trafo'toField='set_rotation'></ROUTE>

    </scene>

    • The <timeSensor> „ts“triggers via thefirstROUTEthe <orientationInterpolator> „oi“, whichprovidesthevaluesfortherotationaroundthe y-axis (0,1,0)

    • The resultingvalueisthenROUTE‘dtothefield‘rotation’ofthe <transform> node“trafo”, whichresults in an animation


    Entry points for getting started

    Entry pointsforgettingstarted

    • Somebooks

    • “X3D: Extensible 3D Graphics for Web Authors”

    • “The Annotated VRML 97 Reference” (explains concepts)

    • X3DOM online documentationandcodeexamples

    • http://x3dom.org/docs/dev/ (tutorials and docs)

    • http://www.x3dom.org/school/ (12 simple examples)

    • http://www.x3dom.org/iX/ (7 examples with animation)

    • http://www.x3dom.org/x3dom/test/functional/ (lots of feature tests)

    • More docsandtools

    • http://www.instantreality.org/downloads/ (InstantPlayer and aopt converter)

    • http://doc.instantreality.org/documentation/getting-started/ (links to X3D)


    Conclusions

    Conclusions

    • Development costs: Web developer vs. graphics expert

    • Adaptability: Declarative material abstraction allows shading adoption per client hardware (e.g. GLSL, ray-tracing…)

    • Efficiency: UI events, culling, rendering can be implemented in native code, thus utilizes battery resources efficiently

    • Accessibility: High level navigation and interaction styles allow very late adaptations for specific use cases

    • Metadata: Allow indexing and searching content

    • Mash-ups: Asset reuse in new context

    • Security: No plugins or even direct GPU calls necessary

    •  Powerful Abstraction for Web Applications

    Titel, Ort, Datum - Vorname Name


    X3dom declarative x 3d in html53

    X3DOM – Declarative (X)3D in HTML5

    IntroductionandTutorial

    Thank You! Questions?

    http://www.x3dom.org/

    http://examples.x3dom.org/


  • Login