1 / 14

Jiří Žára

Jiří Žára. Contents. Web3D Consortium X3D specification GeoVRML NurbsVRML. 2. X3Dom + js. DOM Manipulation: setting attributes <transform id=“ boxTR ”> <shape> <appearance> <material id=“ mat ” diffuseColor =“1 0 0”> </material> </appearance> <box id=“ redBox ”></box>

donar
Download Presentation

Jiří Žára

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Jiří Žára

  2. Contents • Web3D Consortium • X3D specification • GeoVRML • NurbsVRML 2

  3. X3Dom + js • 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” Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  4. id / DEF • If both id and DEF are set both attributes will have different values • If only DEF is given id is unset • 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=‘…' /> Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  5. X3Dom + js • 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); Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  6. X3Dom + js 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 ! Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  7. X3Dom + js 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 ! Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  8. X3Dom + js • 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 ! Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  9. AR & X3Dom ? No problem  • Video capture & display FLASH • Object detection Marker tracking FLARToolkit (Flash AR Toolkit) • 3D real-time rendering X3Dom (flash window overlay) Test it ! Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  10. AR & X3Dom ? flash Marker detector camera trigger javaScript function set_marker_transform(value) { document.getElementById(‘rootT’) .setAttribute(matrix, value); } X3Dom <x3d> <scene> <matrixtransform id=“rootT”> </matrixtransform> <transform> HUD if we want </transform> </scene> </x3d> 3D scene

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

  12. examples • 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 Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  13. howto X3Dom ? 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) Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  14. … end of this part • Todo: • Přidat ukázky animací a routování • bitLODGeometry / texture • http://www.x3dom.org/x3dom/test/functional/BVHRefiner.html • Shadery, cube map • Uděláme z toho samostatnou přednášku X3D + X3Dom • Možná další příklady X3D / VRML (vztah k 1.) • X3dom + js (interakce, prototypy, shadery, ar?) 14

More Related