DOM Manipulation and Animation in X3D: A Comprehensive Overview

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

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

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

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’);

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

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

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

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 !

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 !

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 !

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 !

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 !

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 !

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 !

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 !

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

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]);

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

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

… 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

DOM Manipulation and Animation in X3D: A Comprehensive Overview