1 / 22

David Sedláček

David Sedláček. Contents. DOM manipulation X3D specification GeoVRML NurbsVRML. 2. DOM manipulation. DOM Manipulation: setting attributes <transform id=“ boxTR ”> <shape> <appearance> <material id=“ mat ” diffuseColor =“1 0 0”> </material> </appearance>

najila
Download Presentation

David Sedláček

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. David Sedláček

  2. Contents • DOM manipulation • X3D specification • GeoVRML • NurbsVRML 2

  3. DOM manipulation • 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=‘…’ /> • Test (valid/invalid): • document.getElementById(‘trNode’); • <ROUTE fromNode=‘o1’ fromField=‘…’ toNode=‘tr’ toField=‘…' /> • document.getElementById(‘o1’); • <ROUTE fromNode=‘p1’ fromField=‘…’ toNode=‘tr’ toField=‘…' /> • <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. Attributescont. • <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

  6. DOM mani. - jQuery • jsLibraryforsimpler DOM manipulation • http://jquery.com/ • CSS-likeselectors document.getElementById(‘mat’).getAttribute(‘diffuseColor’); $(‘#mat’).prop(‘diffuseColor’); -do not use $(‘#mat’).attr(‘diffuseColor’); document.getElementById(‘mat’).setAttribute(‘diffuseColor’,’green’); $(‘#mat’).prop(‘diffuseColor’,’green’); <shape id=‘redBoxShp’><appearance><material></material></appearance></shape> document.getElementById(‘redBox’).getElementsByTagName(‘material’)[0].getAttribute(‘diffuseColor’); $(‘#redBoxShpmaterial’).prop(‘diffuseColor’);

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

  8. Events 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

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

  10. Animation control • Similar to VRML • Time sensor • Setting time of the event (in sec) • new EventIn: pauseTime, resumeTime <timeSensorDEF='time' id='timeS' loop='true' cycleInterval='5' startTime='-1'></timeSensor> document.getElementById("timeS").setAttribute("startTime", (new Date()).getTime()/1000 ); Test it !

  11. Animation - js • Otheranimationtypes – by JavaScript anim. • setTimeOut(method,500) • do method() 500 ms from now • setInterval(method,500) • do method() every 500 msuntil stoped anim.start = function() {anim.timer= setInterval(anim.anime,20)}; anim.stop = function() {clearInterval(anim.timer);anim.timer= null;}; anim.anime= function() { h= anim.height * Math.sin(anim.iter*anim.speedFactor*Math.PI); anim.iter++; document.getElementById('boxTr').setAttribute('translation','0 '+h+' 0'); }; Test it !

  12. Animation - js • Reaction on changed values • Write own method which check time to time, that some values has changed • jQuery – watch plugin • Not working properly with X3Dom TimeSensor and Interpolators $('#boxTr').watch('translation', function() {$('#info').html( $(this).prop('translation') ); }); Test it !

  13. Followers • X3D animation nodes • Interpolates from current value to destination • DAMPERS • color, coordinate, orientation, position, position2D, texCoord • no end of transition, approach destination asymptotically but very quickly • ease-in and asymptotic ease-out • CHASERS • orientation, position, position2D, scalar • terminate after given amount of time • ease-in and ease-out Test it !

  14. Followers – cont. • Followers (abstract node) • event-in: set_destination, set_value • event-out:isActive, value_changed • fields: initialDestination, initialValue • CHASERS • field: SFTime duration [0;inf) • DAMPERS • fields: SFTime tau [0;inf), SFFloat tolerance ( -1 or [0;inf) ) <positionDamper id='pda' DEF='pdamper' tau='0.8' initialDestination='0 0 0' initialValue='0 0 -50'></positionDamper> <route fromNode='pdamper' fromField='value_changed' toNode='boxTr' toField='translation'></route> js: document.getElementById("pda").setAttribute("set_destination",pos); Test it !

  15. Prototypes – 1) • Inlined files • each inlined file has own namespace • change object properties after inline load <inline id="box1id" url="./x3d_files/colorBox.x3d" onload="box1Loaded();" nameSpaceName="box1"></inline> functionbox1Loaded() { var box = getInlinedElement('box1', 'barevnaKrychle'); box.getElementsByTagName('Material')[0].setAttribute('diffuseColor','0 0 1'); } functiongetInlinedElement(inName, id) { return document.getElementById(inName+'__'+id); } object id used in X3D file Test it !

  16. Prototypes – 2) • PROTO nodes - reinterpretation <ProtoDeclare name='colorBox'> <ProtoInterface> <fieldaccessType='initializeOnly' name='barva' type='SFColor' value='0 0.9 0'></field> </ProtoInterface> <ProtoBody> <shape><appearance> <material disffuseColor="0 1 0"> <IS><connectnodeField='diffuseColor‘ protoField='barva'> </connect></IS> </material></appearance> <box></box></shape></ProtoBody></ProtoDeclare> <colorBoxbarva='1 0 0'></colorBox> prepare interface, default values 1 0 0 document.getElementsByTagName(‘colorBox’); protoBody.getElementsByTagName(‘IS’); Test it !

  17. HUD • Heads-Up Display • Displays information as a part of user interface • HTML5 elements styled by CSS • Can be nested in X3D element • Absolute positioning • Z-index higher then scene z-index • Empty DIVs block X3Dom interaction Test it !

  18. Runtime API var e = document.getElementById('the_x3delement'); e.runtime.showAll(); • The runtime api provides programmatic live access to the system • View controls: nextView(); prevView(); showAll(); … • Projections and Picking: viewMatrix(); getWorldToCameraCoordinatesMatrix(); getViewingRay(x,y); PickRect(x1,y1,x2,y2); … • Callbacks: noBackendFound(); ready(); enterFrame(); • More at: http://x3dom.org/docs/dev/api.html

  19. Math • js object Math for trivial mathematical tasks var x=Math.PI;var y=Math.sqrt(16); • X3Dom.js - support for vectors, matrices,… • developers docs https://github.com/x3dom/x3dom 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]);

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

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

  22. … 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?) 22

More Related