X3DOM Declarative (X)3D in HTML5

moonlightmidgeInternet και Εφαρμογές Web

18 Νοε 2013 (πριν από 3 χρόνια και 8 μήνες)

642 εμφανίσεις

© Fraunhofer IGD

Introduction and Tutorial

X3DOM


Declarative

(X)3D in HTML5

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

Virtual Engineering and Cultural Heritage on the Web

Titel, Ort, Datum
-

Vorname Name

3

PPT_Master_IGD_v2009.200.ppt

© Fraunhofer IGD

Technology Trends

3D Data and

Documents

3D Printer

3D Scanner

Geo

Data

3D PLM

Web
-
based

Engineering

Cloud
-
based


Rendering

Augmented
/
Mixed Reality

Convergence of

Application

Platforms

HTML5

Titanium

Peper

NaCI

Windows
Store
apps

W3C
WebApps

Chrome OS

PhoneGap

Divergence

of System

Platforms

Touch
Table

Android

BlackBerry

Linux

Cloud

Bases

WindowsPhone

Mac OS

Amazon
Kindle

Windows

iOS

Web Service
Architectures

© Fraunhofer IGD

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



X3DOM := X3D + DOM


DOM
-
based integration
framework for declarative
3D graphics in HTML5


Seamless integration of
3D contents in Web
Browser

© Fraunhofer IGD

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


E
mbed

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

C
ompletes todays graphics technologies

Declarative

Scene
-
graph

Part of HTML document

DOM Integration

CSS / Events



<
canvas
>

Imperative

Procedural API

Drawing context

Flexible

2D

(Final HTML5 spec)


3D

(
No W3C spec yet)




© Fraunhofer IGD

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

DOM structure (example)

© Fraunhofer IGD

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


嬰ⰱ[

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


Important building blocks


The vertices of a Polygon
(here

face

), given as
<coordinate>


The index to a vertex, given
as list:

coordIndex


x

y

1

1

5

5

(2, 2, 0)

(7, 2, 0)

(2, 5, 0)

(7, 5, 0)

z

1

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


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

x

y

1

1

5

5

(2, 2, 0)

(7, 2, 0)

(2, 5, 0)

(7, 5, 0)

z

1

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


The indices (except

-
1

) refer
to the array position of a 3D
coordinate in
<coordinate>

The coordinates of a certain
polygon are listed
counterclockwise

x

y

1

1

5

5

(2, 2, 0)

(7, 2, 0)

(2, 5, 0)

(7, 5, 0)

z

1

0

1

3

2

© Fraunhofer IGD

DOM holds structure
and data

More than 95% are usually unstructured data

© Fraunhofer IGD


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

29

Declarative (X)3D in HTML

Problem:
Large Datasets

© Fraunhofer IGD

30

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. 2
16

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)

© Fraunhofer IGD

New
Geometry

node

types

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

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

© 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


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

32

PPT_Master_IGD_v2009.200.ppt

© Fraunhofer IGD

Vertex Data Encoding

© Fraunhofer IGD

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

>

D
irectional

light

Point light

Spot light

© Fraunhofer IGD

Other rendering effects


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

fog

textures

shadows

© 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
:


shadowCascades

(default 1),
shadowSplitOffset

(default 0.1
),

shadowSplitFactor

(default 1)


0 equidistant splitting, 1 logarithmic

Titel, Ort, Datum
-

Vorname Name

36

PPT_Master_IGD_v2009.200.ppt

© 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)


Final color
I

:= ambient material + diffuse material *
(N∙L)

+ specular material *
(N∙H)

s


For more light sources:

)
cos
,
0
max(
)
,
0
max(




L
N
I
diff


|
|
/
)
(
cos
)
(
V
L
V
L
H
H
N
I
s
s
spec














))
(
(
k
spec
k
diff
k
k
amb
k
k
spot
em
amb
glob
ges
I
I
d
I
c
m
m
a
I







© Fraunhofer IGD

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

???

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


</shape>


<shape>


<appearance></appearance>


<sphere></sphere>


</shape>

</scene>


Reason:

3D objects are usually created
in coordinate origin and need to be
repositioned afterwards

x

y

1

1

3

z

1

© Fraunhofer IGD

Excursus: (2D) coordinate systems

Object coordinates in image plane (given by x & y)

x

y

1

1

5

5

(2, 2)

(7, 2)

(2, 5)

(7, 5)

© Fraunhofer IGD

Excursus: (3D) coordinate systems

Object coordinates in 3D space (z orthogonal on x & y)

x

y

1

1

5

5

(2, 2, 0)

(7, 2, 0)

(2, 5, 0)

(7, 5, 0)

z

1

© Fraunhofer IGD

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>


</shape>


</transform>


<transform

translation
=
"2 0 0"
>


<shape>


<appearance>


<material
diffuseColor
=
"blue"
></material>


</appearance>


<sphere></sphere>


</shape>


</transform>

x

y

1

1

3

z

1

© Fraunhofer IGD

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



</
Coordinate
>


</
IndexedFaceSet
>


</
Shape
>

<
/
Transform
>

Titel, Ort, Datum
-

Vorname Name

48

PPT_Master_IGD_v2009.200.ppt

© Fraunhofer IGD

How do I know, which elements can be combined?



Back to the roots: VRML


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 ]


}


}


]

}

Titel, Ort, Datum
-

Vorname Name

49

PPT_Master_IGD_v2009.200.ppt

http://
doc.instantreality.org
/
tools
/x3d_encoding_converter/

© 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


Calculate cross product

(x,

y-t
)
(x,

y)
(x+t
,

y)
d
high
d
low
id
high
id
low
© Fraunhofer IGD

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
;




}


<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

X3DOM Math Lib

SFVec3f


copy(v
)


parse(
s
tr
)


setValues
(that)


at(
i
)


add(that)


addScale
d
(
that,s
)


subtract(that)



negate()


dot(that)


c
ross(that)


reflect(n)


l
ength()


normalize(that)


multComponents
(that)



multiply(n)


divide(n)



equals(
that,eps
)


toGL
()


toString
()


setValueB
yStr
(
str
)

Titel, Ort, Datum
-

Vorname Name

55

PPT_Master_IGD_v2009.200.ppt

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
)

© Fraunhofer IGD

X3DOM Math Lib

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
)

Titel, Ort, Datum
-

Vorname Name

56

PPT_Master_IGD_v2009.200.ppt





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
)

Example



Basic decomposition of x3dom.fields.SFMatrix4f



(given as mat)


var

quat

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

quat.setValue
(mat);


var

rotation =
rot.toAxisAngle
();

var

translation = mat.e3();


© Fraunhofer IGD

<x3d> element


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

<img src="felge1_64.jpg



onclick="..." style="…">

document.getElementById
('
body_color
').


setAttribute
("
diffuseColor
", '#000066');

Click on <
img
> element…

Interaction via standard

Web technologies (e.g.
JavaScript Events etc.)

…causes attribute
change of <texture
>
url

(i.e.,
other
wheel rims
appear)

Example 1: Interactive Car Configurator

Using HTML + JavaScript, to change color and rims

© Fraunhofer IGD

Example 2: Painting Textures of 3D Objects

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

HTML5 <canvas> element


Painted image used as texture on 3D object

© Fraunhofer IGD

Application

(Large Data
and

Picking
):

3D
-
Internet Design Review

59

© Fraunhofer IGD

Navigation:
m
oving the virtual camera interactively



Built
-
in
n
avigation 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’


M
ove

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>


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


<
ROUTE

fromNode
=
'
ts
'

fromField
='
fraction_changed
'


toNode
=
'
oi
'

toField
='
set_fraction
'></
ROUTE
>


<
ROUTE

fromNode
=
'
oi
'

fromField
='
value_changed
'


toNode
=
'
trafo
'

toField
='
set_rotation
'></
ROUTE
>

</scene>


The <t
imeSensor
>

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


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

64

PPT_Master_IGD_v2009.200.ppt

© Fraunhofer IGD

X3DOM


Declarative

(X)3D in HTML5

Introduction

and

Tutorial

Thank You! Questions?


http
://www.x3dom.org/

http://examples.x3dom.org/