Upload
donar
View
49
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Jiří Žára. Contents. Web3D Consortium X3D specification GeoVRML NurbsVRML. 2. X3Dom + js. DOM Manipulation: setting attributes - PowerPoint PPT Presentation
Citation preview
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?)