Computer Graphics Group

Jiří Žára

Computer Graphics Group

2X3D

Contents

1. Web3D Consortium

2. X3D specification

3. GeoVRML

4. NurbsVRML

2

Computer Graphics GroupX3Dom + js

3X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

DOM Manipulation: setting attributes<transform id=“boxTR”>

<shape><appearance>

<material id=“mat” diffuseColor=“1 0 0”></material>

</appearance><box id=“redBox”></box><inline id=“inID” url=“nic.x3d”></inline>

</shape></transform>

JS manipulation:

document.getElementById(‘mat’).setAttribute(‘diffuseColor’,’green’);document.getElementById(‘redBox’).setAttribute(‘size’,’1 2 3’);document.getElementById(‘boxTR’).setAttribute(‘rotation’,’1 0 0 -3’);document.getElementById(“inID”).setAttribute(“url”,”path/model.x3d”);

- This cause replacing of inlined geometry “immediately”

Computer Graphics Groupid / DEF

4X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

1. If both id and DEF are set both attributes will have different values

2. If only DEF is given id is unset3. If only id is given DEF and id will be set

<Transform id=‘trNode’ DEF=‘tr’> … </Transform><PositionInterpolator id=‘p1’ DEF=‘p1’ key=‘…’ keyValue=‘…’ /><OrientationInterpolator DEF=‘o1’ key=‘…’ keyValue=‘…’ />

Valid:document.getElementById(‘trNode’);<ROUTE fromNode=‘o1’ fromField=‘…’ toNode=‘tr’ toField=‘…' /><ROUTE fromNode=‘p1’ fromField=‘…’ toNode=‘tr’ toField=‘…' />

Invalid:document.getElementById(‘o1’);<ROUTE fromNode=‘p1’ fromField=‘…’ toNode=‘trNode’ toField=‘…'

/>

Computer Graphics GroupX3Dom + js

5X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

DOM Manipulation: Node appending / removal

<group id=‘root’></group>

JS to add nodes:root = document.getElementById(‘root’);trans = document.createElement(‘Transform’);trans.setAttribute(‘translation’, ‘1 2 3’);root.appendChild(trans);

JS to remove nodes:root.removeChild(trans);

Computer Graphics GroupX3Dom + js

6X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

HTML Events: User Interaction through DOM Events<transform id=“boxTR”>

<shape><appearance>

<material id=“mat” diffuseColor=“1 0 0”></material>

</appearance><box id=“redBox”

onclick=“document.getElementById(‘mat’).setAttribute(‘diffuseColor’,’green’);” >

</box></shape>

</transform>

Test it !

Computer Graphics GroupX3Dom + js

7X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

HTML Events: User Interaction through DOM Events2<transform id=“boxTR”>

<shape><appearance>

<material id=“mat”></material></appearance><box id=“redBox”></box>

</shape></transform>

<script type="text/javascript">document.onload = function() {

document.getElementById(‘redBox').addEventListener('click', function() {document.getElementById('mat').setAttribute('diffuseColor', ‘green');

}, false) };</script> Test it !

Computer Graphics GroupX3Dom + js

8X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

HTML Events: Ultimate DOM manipulation<transform id=“boxTR”>

<shape><box id=“redBox”></box>

</shape><inline id=“inID” url=“nic.x3d” nameSpaceName="carusel"></inline>

</transform>

How to read attribute ?document.getElementById(‘redBox’).getAttribute(‘size’);

How to access inlined elements ?• Define nameSpaceName• To access nodes nameSpaceName.”__”.inlinedNodeID (two

underscores)

document.getElementById(‘carusel__mat’).getAttribute(‘…’);

Test it !

Computer Graphics GroupAR & X3Dom ?

9X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

No problem 1. Video capture & display

FLASH

2. Object detectionMarker tracking FLARToolkit (Flash AR Toolkit)

3. 3D real-time renderingX3Dom (flash window overlay)

Test it !

Computer Graphics GroupAR & X3Dom ?

10X3D

cameraMarker

detector

<x3d><scene>

<matrixtransform id=“rootT”>

</matrixtransform><transform> HUD if we want </transform>

</scene></x3d>

3D scene

function set_marker_transform(value) {document.getElementById(‘rootT’)

.setAttribute(matrix, value);}

flash

javaScript

X3Dom

trigger

Computer Graphics GroupX3D editor

11X3D

https://savage.nps.edu/X3D-Edit/

Computer Graphics Groupexamples

12X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

• http://examples.x3dom.org/IG/syn/index-inline.html• http://www.3dcoform.eu/x3dom/

• http://x3dom.org/x3dom/example/x3dom_bmwConfig.html• http://x3dom.org/x3dom/example/x3dom_canvas.html

Computer Graphics Grouphowto X3Dom ?

13X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

Entry points for getting started

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

Computer Graphics Group

14X3D

… end of this part

14

Todo:

1. Přidat ukázky animací a routování

1. bitLODGeometry / texture

2. http://www.x3dom.org/x3dom/test/functional/BVHRefiner.html

3. Shadery, cube map

2. Uděláme z toho samostatnou přednášku X3D + X3Dom

3. Možná další příklady X3D / VRML (vztah k 1.)

4. X3dom + js (interakce, prototypy, shadery, ar?)