1. Computer Graphics Group David Sedláček

2. Computer Graphics Group 2X3D Contents 1.DOM manipulation 2.Events 3.Animation 4.Prototypes 5.Augmented Reality 2

3. Computer Graphics Group DOM manipulation 3X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also DOM Manipulation: setting attributes 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”

4. Computer Graphics Group id / 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 unset 3.If only id is given DEF and id will be set … Test (valid/invalid): document.getElementById(‘trNode’); document.getElementById(‘o1’);

5. Computer Graphics Group Attributes cont. 5X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also 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 !

6. Computer Graphics Group DOM mani. - jQuery js Library for simpler DOM manipulation –http://jquery.com/http://jquery.com/ –CSS-like selectors document.getElementById(‘mat’).getAttribute(‘diffuseColor’); $(‘#mat’).prop(‘diffuseColor’); -do not use $(‘#mat’).attr(‘diffuseColor’); document.getElementById(‘mat’).setAttribute(‘diffuseColor’,’green’); $(‘#mat’).prop(‘diffuseColor’,’green’); document.getElementById(‘redBox’).getElementsByTagName(‘material’)[0].getAttribute(‘diffuseColor’); $(‘#redBoxShp material’).prop(‘diffuseColor’); 6X3D

7. Computer Graphics Group DOM manipulation 7X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also Node appending / removal 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);

8. Computer Graphics Group Events 8X3D 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 <box id=“redBox” onclick=“document.getElementById(‘mat’). setAttribute(‘diffuseColor’,’green’);” > Test it !

9. Computer Graphics Group Events cont. 9X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also document.onload = function() { document.getElementById(‘redBox').addEventListener('click', function() { document.getElementById('mat').setAttribute('diffuseColor', ‘green'); }, false) }; Test it !

10. Computer Graphics Group Animation control Similar to VRML –Time sensor –Setting time of the event (in sec) –new EventIn: pauseTime, resumeTime document.getElementById("timeS").setAttribute("startTime", (new Date()).getTime()/1000 ); 10X3D Test it !

11. Computer Graphics Group Animation - js Other animation types – by JavaScript anim. – setTimeOut(method,500) do method() 500 ms from now – setInterval(method,500) do method() every 500 ms until 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'); }; 11X3D Test it !

12. Computer Graphics Group 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') ); }); 12X3D Test it !

13. Computer Graphics Group 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 13X3D Test it !

14. Computer Graphics Group 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) ) js: document.getElementById("pda").setAttribute("set_destination",pos); 14X3D Test it !

15. Computer Graphics Group 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"> function box1Loaded() { var box = getInlinedElement('box1', 'barevnaKrychle'); box.getElementsByTagName('Material')[0].setAttribute('diffuseColor','0 0 1'); } function getInlinedElement(inName, id) { return document.getElementById(inName+'__'+id); } 15X3D object id used in X3D file Test it !

16. Computer Graphics Group Prototypes – 2) PROTO nodes - reinterpretation 16X3D Test it ! prepare interface, default values 1 0 0 document.getElementsByTagName(‘colorBox’); element.getElementsByTagName(‘IS’); element = protoBody.child[i].cloneNode(true); protoInstance.parentNode.appendChild(element); Test it !

17. Computer Graphics Group 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 17X3D Test it !

18. Computer Graphics Group 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.htmlhttp://x3dom.org/docs/dev/api.html 18X3D Test it !

19. Computer Graphics Group 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 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]); 19X3D

20. Computer Graphics Group X3DOM Math Lib SFVec3f copy(v) parse(str) setValues(that) at(i) add(that) addScaled(that,s) subtract(that) negate() dot(that) cross(that) reflect(n) length() normalize(that) multComponents(that) multiply(n) divide(n) equals(that,eps) toGL() toString() setValueByStr(str) Titel, Ort, Datum - Vorname Name 20 Quaternion parseAxisAngle(str) axisAngle(axis,a) rotateFromTo(fromVec,toVec) multiply(that) toMatrix() toAxisAngle() angle() setValue(matrix) dot(that) add(that) subtract(that) setValues(that) equals(that,eps) multScalar(s) normalize(that) negate() inverse() slerp(that,t) toGL() toString() setValueByStr(str) SFColor parse(str) colorParse(color) setValues(color) equals(that,eps) add(that) subtract(that) multiply(n) toGL() toString() setValueByStr(str) SFColorRGBA parse(str) setValues(color) equals(that,eps) toGL() toString() setValueByStr(str)

21. Computer Graphics Group X3DOM Math Lib SFMatrix4f copy(that) identity() zeroMatrix() translation(vec) rotationX(a) rotationY(a) rotationZ(a) scale(vec) lookAt(from,at,up) parseRotation(str) parse(str) e0() e1() e2() e3() setTranslate(vec) setScale(vec) Titel, Ort, Datum - Vorname Name 21 mult(that) multMatrixPnt(vec) multMatrixVec(vec) multFullMatrixPnt(vec) transpose() negate() multiply(s) add(that) addScaled(that,s) setValues(that) setValue(v1,v2,v3,v4) toGL() at(i,j) sqrt() normInfinity() norm1_3x3() normInf_3x3() adjointT_3x3() equals(that) getTransform(translation, rotation,scaleFactor, scaleOrientation,center) decompose(t,r,s,so) polarDecompose(Q,S) spectralDecompose(SO,k) log() exp() det3(a1,a2,a3,b1,b2,b3, c1,c2,c3) det() inverse() toString() setValueByStr(str) Example Basic decomposition of x3dom.fields.SFMatrix4f (given as mat) var quat = new x3dom.fields.Quaternion(0, 0, 1, 0); quat.setValue(mat); var rotation = rot.toAxisAngle(); var translation = mat.e3(); Example Basic decomposition of x3dom.fields.SFMatrix4f (given as mat) var quat = new x3dom.fields.Quaternion(0, 0, 1, 0); quat.setValue(mat); var rotation = rot.toAxisAngle(); var translation = mat.e3();

22. Computer Graphics Group AR & X3Dom ? 22X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also No problem 1.Video capture & display WebRTC MediaStream API 2.Object detection Marker tracking JSARToolkit (JavaScript AR Toolkit) 3.3D real-time rendering X3Dom Test it !

23. Computer Graphics Group AR & X3Dom ? 23X3D camera Marker detector HUD if we want 3D scene function set_marker_transform(value) { document.getElementById(‘rootT’).setAttribute(matrix, value); } flash javaScript X3Dom trigger

24. Computer Graphics Group 24X3D … end of this part 24 David Sedláček November 2013