Computer Graphics Group

David Sedláček

Computer Graphics Group

2X3D

Contents

1. DOM manipulation

2. Events

3. Animation

4. Prototypes

5. Augmented Reality

2

Computer Graphics GroupDOM manipulation

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=‘…’ />

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=‘…'

/>

Computer Graphics GroupAttributes cont.

5X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

<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 GroupDOM mani. - jQuery

• js Library for simpler DOM manipulation– 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’);

<shape id=‘redBoxShp’><appearance><material></material></appearance></shape>

document.getElementById(‘redBox’).getElementsByTagName(‘material’)[0].getAttribute(‘diffuseColor’);

$(‘#redBoxShp material’).prop(‘diffuseColor’);

6X3D

Computer Graphics GroupDOM manipulation

7X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

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 GroupEvents

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

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

9X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

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

Computer Graphics GroupAnimation control

• Similar to VRML– Time sensor– Setting time of the event (in sec)– new EventIn: pauseTime, resumeTime

<timeSensor DEF='time' id='timeS' loop='true' cycleInterval='5' startTime='-1'></timeSensor>

document.getElementById("timeS").setAttribute("startTime",

(new Date()).getTime()/1000

);

10X3D

Test it !

Computer Graphics GroupAnimation - 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 !

Computer Graphics GroupAnimation - 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 !

Computer Graphics GroupFollowers

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

Computer Graphics GroupFollowers – 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);

14X3D

Test it !

Computer Graphics GroupPrototypes – 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>

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 !

Computer Graphics GroupPrototypes – 2)

• PROTO nodes - reinterpretation<ProtoDeclare name='colorBox'>

<ProtoInterface>

<field accessType='initializeOnly' name='barva' type='SFColor' value='0 0.9 0'></field>

</ProtoInterface>

<ProtoBody>

<shape><appearance>

<material disffuseColor="0 1 0">

<IS><connect nodeField='diffuseColor‘ protoField='barva'> </connect></IS>

</material></appearance>

<box></box></shape></ProtoBody></ProtoDeclare>

<colorBox barva='1 0 0'></colorBox>

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 !

Computer Graphics GroupHUD

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

Computer Graphics GroupRuntime 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

18X3D

Test it !

Computer Graphics GroupMath

• js object Math for trivial mathematical tasksvar 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]);

19X3D

Computer Graphics GroupX3DOM Math Lib

SFVec3fcopy(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)

Computer Graphics GroupX3DOM 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();

Computer Graphics GroupAR & 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 detectionMarker tracking JSARToolkit (JavaScript AR Toolkit)

3. 3D real-time renderingX3Dom

Test it !

Computer Graphics GroupAR & X3Dom ?

23X3D

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 Group

24X3D

… end of this part

24

David SedláčekNovember 2013