part 1 - X3Dom

advertisement
X3DOM – Declarative (X)3D in HTML5
Introduction and Tutorial
Yvonne Jung, Johannes Behr
Fraunhofer IGD / VCST
Darmstadt, Germany
© Fraunhofer IGD
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
© Fraunhofer IGD
PPT_Master_IGD_v2009.200.ppt
Virtual Engineering and Cultural Heritage on the Web
3
Titel, Ort, Datum - Vorname Name
© Fraunhofer IGD
Technology Trends
Android
3D PLM
Cloud-based
Rendering
3D Printer
Touch
Table
3D Scanner
BlackBerry
3D Data and
Documents Web-based
Augmented/
Web Service
Engineering
HTML5
Linux
Mixed Reality
Architectures
Geo Data
W3C WebApps
Titanium
Chrome OS
Peper NaCI
© Fraunhofer IGD
Amazon Kindle
Divergence
of System
Platforms
Cloud
Bases
Windows
Store apps
Convergence of
Application
Platforms
PhoneGap
iOS
Mac OS
Windows
WindowsPhone
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
© Fraunhofer IGD
X3DOM – Declarative (X)3D in HTML5
© Fraunhofer IGD
•
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 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>
© Fraunhofer IGD
X3DOM – Declarative (X)3D in HTML5
Completes todays graphics technologies
2D
(Final HTML5 spec)
Declarative
Scene-graph
Part of HTML document
DOM Integration
CSS / Events
Imperative
Procedural API
Drawing context
Flexible
© Fraunhofer IGD
<canvas>
3D
(No W3C spec yet)
Benefits: Why Declarative 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
© Fraunhofer IGD
Benefits: Why Declarative 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)
© Fraunhofer IGD
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
© Fraunhofer IGD
DOM structure (example)
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>
© Fraunhofer IGD
First HTML needs to know about (X)3D
<html>
<head>
<title>My 3D page</title>
<link rel="stylesheet" type="text/css"
href="http://www.x3dom.org/x3dom/release/x3dom.css">
</link>
<script type="text/javascript"
src="http://www.x3dom.org/x3dom/release/x3dom.js">
</script>
</head>
…
© Fraunhofer IGD
3D only works inside the <X3D> tag
…
<body>
<h1>Hello X3DOM World</h1>
<p>
A blue box will soon appear.
</p>
<x3d width="400" height="300">
</x3d>
</body>
</html>
© Fraunhofer IGD
All 3D objects are children of the <scene> element
…
<body>
<h1>Hello X3DOM World</h1>
<x3d width="400" height="300">
<scene>
<shape>
<box></box>
</shape>
</scene>
</x3d>
</body>
</html>
© Fraunhofer IGD
Every object has a <shape>
…
<body>
<h1>Hello X3DOM World</h1>
<x3d width="400" height="300">
<scene>
<shape>
<box></box>
</shape>
</scene>
</x3d>
</body>
</html>
© Fraunhofer IGD
…and a geometry, like e.g. a <box>
…
<body>
<h1>Hello X3DOM World</h1>
<x3d width="400" height="300">
<scene>
<shape>
<box></box>
</shape>
</scene>
</x3d>
</body>
</html>
© Fraunhofer IGD
…and an <appearance>
<x3d width="400" height="300">
<scene>
<shape>
<appearance>
<material diffuseColor="red">
</material>
</appearance>
<box></box>
</shape>
</scene>
</x3d>
© Fraunhofer IGD
…with a (e.g. red) <material>
<x3d width="400" height="300">
<scene>
<shape>
<appearance>
<material diffuseColor="red">
</material>
</appearance>
<box></box>
</shape>
</scene>
</x3d>
© Fraunhofer IGD
Materials with specular highlights
<x3d width="400" height="300">
<scene>
<shape>
<appearance>
<material diffuseColor="red"
specularColor="#808080">
</material>
</appearance>
<box></box>
</shape>
</scene>
</x3d>
© Fraunhofer IGD
Change Background
Colors in (R,G,B) with red/green/blue  [0,1]
<scene>
<shape>
<appearance>
<material diffuseColor="red"
specularColor="#808080">
</material>
</appearance>
<box></box>
</shape>
<background skyColor="0 0 0">
</background>
</scene>
© Fraunhofer IGD
Change Background (now using CSS)
<x3d style="background-color: #00F;">
<scene>
…
</scene>
</x3d>
Change size of <x3d> element to full size
<x3d style="margin:0; padding:0; width:100%; height:100%; border:none;">
…
</x3d>
© Fraunhofer IGD
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”>
 <cone bottomRadius=“1.0” height=“2.0”>
 <torus innerRadius=“0.5” outerRadius=“1.0”>
 <plane size=“2.0 2.0” subdivision=“1 1”>
© Fraunhofer IGD
Defining own geometries
Example: simple rectangle with an <indexedFaceSet>
<scene>
<shape>
<appearance>
<material diffuseColor="salmon">
</material>
</appearance>
<indexedFaceSet coordIndex="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>
© Fraunhofer IGD
Defining own geometries
Example: simple rectangle with an <indexedFaceSet>
<indexedFaceSet
coordIndex="0 1 2 3 -1">
<coordinate point=
"2 2 0, 7 2 0, 7 5 0, 2 5 0">
</coordinate>
</indexedFaceSet>
y
(2, 5, 0)
(7, 5, 0)
(2, 2, 0)
(7, 2, 0)
5
1
Important building blocks
1
 The vertices of a Polygon
(here “face”), given as
<coordinate>
 The index to a vertex, given
as list: “coordIndex”
© Fraunhofer IGD
1
z
5
x
Defining own geometries
Example: simple rectangle with an <indexedFaceSet>
<indexedFaceSet
coordIndex="0 1 2 3 -1">
<coordinate point=
"2 2 0, 7 2 0, 7 5 0, 2 5 0">
</coordinate>
</indexedFaceSet>
y
(2, 5, 0)
(7, 5, 0)
(2, 2, 0)
(7, 2, 0)
5
1
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
© Fraunhofer IGD
1
1
z
5
x
Defining own geometries
Example: simple rectangle with an <indexedFaceSet>
<indexedFaceSet
coordIndex="0 1 2 3 -1">
<coordinate point=
"2 2 0, 7 2 0, 7 5 0, 2 5 0">
</coordinate>
</indexedFaceSet>
y
(2, 5, 0)
5
(7, 5, 0)
3
2
0
1
(2, 2, 0)
(7, 2, 0)
1
The indices (except “-1”) refer
to the array position of a 3D
coordinate in <coordinate>
The coordinates of a certain
polygon are listed
counterclockwise
© Fraunhofer IGD
1
1
z
5
x
DOM holds structure and data
More than 95% are usually unstructured data
© Fraunhofer IGD
Declarative (X)3D in HTML
Problem: 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
29
 http://www.perey.com/ARStandards/Notes_during_
Transmission_Format_Requirements_Session_Nov_9_2012.pdf
© Fraunhofer IGD
Declarative (X)3D in HTML
Problem: 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
30
 (Client-/server-based approaches)
© Fraunhofer IGD
New Geometry node types
<binaryGeometry vertexCount='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>
Data transcoding (example with input file „model.ply“)
Without mesh restructuring
aopt -i model.ply -G binGeo/:sac -N model.html
With mesh/graph optimization (cleanup, patching, and binary creation)
aopt -i model.ply -F Scene:"cacheopt(true)” -G binGeo/:sac -N model.html
© Fraunhofer IGD
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
PPT_Master_IGD_v2009.200.ppt
 aopt -i model.x3d -F Scene:”maxtris(20000)” -G binGeo/:sacp -N model.html
32
 Ensure 32 bit alignment for rendering speed
Titel, Ort, Datum - Vorname Name
© Fraunhofer IGD
Vertex Data Encoding
© Fraunhofer IGD
Light sources in X3DOM
…are part of the <scene>
Directional light
Point light
Spot light
<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 >
© Fraunhofer IGD
Other rendering effects
shadows
fog
textures
<directionalLight direction='0 0 -1' intensity='1' shadowIntensity='0.7'>
</directionalLight>
<fog visibilityRange='1000'></fog>
<imageTexture url=“myTextureMap.jpg“></ imageTexture>
 Note: like <material> only as child node of <appearance> possible!
© Fraunhofer IGD
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:
PPT_Master_IGD_v2009.200.ppt
 shadowCascades (default 1), shadowSplitOffset (default 0.1),
shadowSplitFactor (default 1) – 0 equidistant splitting, 1 logarithmic
36
Titel, Ort, Datum - Vorname Name
© Fraunhofer IGD
Appearance example: a textured box
<x3d width="500px" height="400px">
<scene>
<shape>
<appearance>
<imageTexture url="logo.png"></imageTexture>
</appearance>
<box></box>
</shape>
</scene>
</x3d>
Interesting alternative – using a video as texture:
<movieTexture url=’”foo.mp4″,”foo.ogv”‘></movieTexture>
© Fraunhofer IGD
Excursus: the lighting model
(diffuse and specular reflection)
I diff
 
 max( 0 , N  L )  max( 0 , cos  )
I spec

 s
s
 ( N  H )  cos 

 
 
H  (L  V ) / | L  V |
Final color I := ambient material + diffuse material * (N·L) + specular material * (N·H) s
For more light sources:
I ges  a glob  m amb  m em 
c
k
© Fraunhofer IGD
k
spot
( I amb  d ( I diff  I spec ))
k
k
k
k
Two objects in one scene (?!)
<scene>
<shape>
<appearance>
<material diffuseColor='red'></material>
</appearance>
<box></box>
</shape>
<shape>
OK
<appearance>
<material diffuseColor='blue'></material>
</appearance>
<sphere></sphere>
</shape>
</scene>
…
© Fraunhofer IGD
???
Two objects in one scene
Problem: both appear at same position
<scene>
<shape>
<appearance></appearance>
<box></box>
</shape>
<shape>
<appearance></appearance>
<sphere></sphere>
</shape>
</scene>
© Fraunhofer IGD
Two objects in one scene
Problem: both appear at same position
<scene>
<shape>
<appearance></appearance>
<box></box>
y
</shape>
<shape>
1
<appearance></appearance>
<sphere></sphere>
1
1
</shape>
</scene>
z
Reason: 3D objects are usually created
in coordinate origin and need to be
repositioned afterwards
© Fraunhofer IGD
3
x
Excursus: (2D) coordinate systems
Object coordinates in image plane (given by x & y)
y
(2, 5)
(7, 5)
(2, 2)
(7, 2)
5
1
1
© Fraunhofer IGD
5
x
Excursus: (3D) coordinate systems
Object coordinates in 3D space (z orthogonal on x & y)
y
(2, 5, 0)
(7, 5, 0)
(2, 2, 0)
(7, 2, 0)
5
1
1
1
z
© Fraunhofer IGD
5
x
Two objects in one scene
Now with translation
<transform translation="-2 0 0">
<shape>
<appearance>
<material diffuseColor="red"></material>
</appearance>
<box></box>
</shape>
</transform>
<transform translation="2 0 0">
<shape>
<appearance>
<material diffuseColor="blue"></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
© Fraunhofer IGD
Two objects in one scene
Now with translation
<transform translation="-2 0 0">
<shape>
<appearance>
<material diffuseColor="red"></material>
</appearance>
<box></box>
y
</shape>
</transform>
1
<transform translation="2 0 0">
<shape>
1
<appearance>
1
<material diffuseColor="blue"></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
© Fraunhofer IGD
z
3
x
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:
 <transform translation="0 0 0"
rotation="0 1 0 0" scale="1 1 1">
…
</transform>
© Fraunhofer IGD
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’);
© Fraunhofer IGD
How do I know, which elements can be combined?
<Transform translation='4 2 1'>
<Shape>
<Appearance>
<Material diffuseColor='1 1 0'>
</Material>
</Appearance>
<IndexedFaceSet coordIndex='0 1 2 3 -1 3 2 1 0 -1'>
<Coordinate point='0 0 0 1 0 0 1 1 0 0 1 0'>
PPT_Master_IGD_v2009.200.ppt
</Coordinate>
48
</IndexedFaceSet>
</Shape>
</Transform>
Titel, Ort, Datum - Vorname Name
© Fraunhofer IGD
PPT_Master_IGD_v2009.200.ppt
How do I know, which elements can be combined?
 Back to the roots: VRML
49
Transform {
translation 4 2 1
children [
Shape {
appearance Appearance {
material Material {
diffuseColor 1 1 0
}
}
geometry IndexedFaceSet {
coord Coordinate {
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
© Fraunhofer IGD
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>
…
© Fraunhofer IGD
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>
© Fraunhofer IGD
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
© Fraunhofer IGD
Efficient Picking and Interaction
 Single-pass render-buffer approach
 Distance d to camera in RG channel (16 bit)
 Object- or per-vertex id in 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
(x, y-t)
 Calculate cross product
d high
© Fraunhofer IGD
d low
id high
id low
(x, y)
(x+t, y)
HTML Events: 3DPickEvent extends DOM MouseEvent
interface 3DPickEvent : MouseEvent {
readonly attribute float worldX;
readonly attribute float worldY;
readonly attribute float worldZ;
readonly attribute float normalX;
readonly attribute float normalY;
readonly attribute float normalZ;
…
}
// 3d world coordinates at pick position
// picked surface normal
<group onmousemove="updateTrafo(event); "> … </group>
<transform id="trafo"><shape isPickable="false"> … </shape></transform>
function updateTrafo(event) {
var t = document.getElementById(‘trafo‘);
var norm = new x3dom.fields.SFVec3f(event.normalX, event.normalY, event.normalZ);
var qDir = x3dom.fields.Quaternion.rotateFromTo(new x3dom.fields.SFVec3f(0, 1, 0), norm);
var rot = 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);
}
© Fraunhofer IGD
PPT_Master_IGD_v2009.200.ppt
X3DOM Math Lib
55
SFColor
SFVec3f
copy(v)
parse(s Quaternion
parse(str)
tr)
setValues(that)
at( parseAxisAngle(str)
axisAngle(axis,a)
colorParse(color)
i)
add(that)
addScale
rotateFromTo(fromVec,toVec)
setValues(color)
d(that,s)
subtract(that)
multiply(that)
equals(that,eps)
negate()
dot(that)
c
toMatrix()
add(that)
ross(that)
reflect(n)
l
toAxisAngle()
subtract(that)
ength()
normalize(that)
angle()
multiply(n)
multComponents(that)
setValue(matrix)
toGL()
multiply(n)
divide(n)
dot(that)
toString()
equals(that,eps)
toGL()
add(that)
setValueByStr(str)
toString()
setValueB
subtract(that)
yStr(str)
setValues(that)
SFColorRGBA
equals(that,eps)
parse(str)
multScalar(s)
setValues(color)
normalize(that)
equals(that,eps)
negate()
toGL()
inverse()
toString()
slerp(that,t)
setValueByStr(str)
toGL()
toString()
setValueByStr(str)
Titel, Ort, Datum - Vorname Name
© Fraunhofer IGD
X3DOM Math Lib
SFMatrix4f
mult(that)
equals(that)
copy(that)
multMatrixPnt(vec)
getTransform(translation,
identity()
multMatrixVec(vec)
rotation,scaleFactor,
zeroMatrix()
multFullMatrixPnt(vec)
scaleOrientation,center)
translation(vec)
transpose()
decompose(t,r,s,so)
rotationX(a)
negate()
polarDecompose(Q,S)
rotationY(a)
multiply(s)
spectralDecompose(SO,k)
rotationZ(a)
add(that)
log()
scale(vec)
addScaled(that,s)
exp()
lookAt(from,at,up)
setValues(that)
Basic decomposition of x3dom.fields.SFMatrix4f
det3(a1,a2,a3,b1,b2,b3,
parseRotation(str)
setValue(v1,v2,v3,v4)
c1,c2,c3)
parse(str)
(given as mat)
toGL()
det()
e0()
at(i,j)
inverse()
e1()
var quat = new x3dom.fields.Quaternion(0,
0,
1, 0);
sqrt()
toString()
e2()
quat.setValue(mat);
normInfinity()
setValueByStr(str)
e3()
norm1_3x3()
setTranslate(vec)
normInf_3x3()
setScale(vec)
var rotation = rot.toAxisAngle();
adjointT_3x3()
PPT_Master_IGD_v2009.200.ppt
Example
56
var translation = mat.e3();
Titel, Ort, Datum - Vorname Name
© Fraunhofer IGD
Example 1: Interactive Car Configurator
Interaction via standard
Web 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');
…causes attribute
change of <texture> url
(i.e., other wheel rims
appear)
© Fraunhofer IGD
<x3d> element
Part of DOM/ HTML
document like every other
HTML element (e.g. <p>,
<img> etc.)
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)
© Fraunhofer IGD
jQuery UI (User
Interface)
jQuery JavaScript library:
http://jqueryui.com/
59
Application (Large Data and Picking):
3D-Internet Design Review
© Fraunhofer IGD
Navigation: moving the virtual camera interactively
 Built-in navigation modes
 Examine, walk, fly, lookat, game, helicopter and none

<navigationInfo type=“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 position and orientation of
<viewpoint>
© Fraunhofer IGD
Animations
CSS 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);">
© Fraunhofer IGD
Animations
X3D TimeSensor and Interpolator nodes
<scene>
<transform id="trafo" rotation="0 1 0 0">
<shape>
<appearance>
<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">
<material diffuseColor="red">
</orientationInterpolator>
</material>
<ROUTE fromNode='ts' fromField='fraction_changed'
</appearance>
<box></box>
</shape>
</transform>
toNode='oi' toField='set_fraction'></ROUTE>
<ROUTE fromNode='oi' fromField='value_changed'
toNode='trafo' toField='set_rotation'></ROUTE>
</scene>
 The <timeSensor> „ts“ triggers via the first ROUTE the <orientationInterpolator> „oi“,
which provides the values for the rotation around the y-axis (0,1,0)
 The resulting value is then ROUTE‘d to the field ‘rotation’ of the <transform> node
“trafo”, which results in an animation
© Fraunhofer IGD
Entry points for getting started
Some books
“X3D: Extensible 3D Graphics for Web Authors”
“The Annotated VRML 97 Reference” (explains concepts)
X3DOM online documentation and code examples
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 docs and tools
http://www.instantreality.org/downloads/ (InstantPlayer and aopt converter)
http://doc.instantreality.org/documentation/getting-started/ (links to X3D)
© Fraunhofer IGD
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
PPT_Master_IGD_v2009.200.ppt
 Mash-ups: Asset reuse in new context
64
 Security: No plugins or even direct GPU calls necessary
  Powerful Abstraction for Web Applications
Titel, Ort, Datum - Vorname Name
© Fraunhofer IGD
X3DOM – Declarative (X)3D in HTML5
Introduction and Tutorial
Thank You! Questions?
http://www.x3dom.org/
http://examples.x3dom.org/
© Fraunhofer IGD
Download