David Sedláček
description
Transcript of David Sedláček
Computer Graphics Group
David Sedláček
Computer Graphics Group
2X3D
Contents
1. DOM manipulation
2. X3D specification
3. GeoVRML
4. NurbsVRML
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’);
protoBody.getElementsByTagName(‘IS’);
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
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 GroupAR & X3Dom ?
20X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
No problem 1. Video capture & display
FLASH
2. Object detectionMarker tracking FLARToolkit (Flash AR Toolkit)
3. 3D real-time renderingX3Dom (flash window overlay)
Test it !
Computer Graphics GroupAR & X3Dom ?
21X3D
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
22X3D
… end of this part
22
Todo:
1. Přidat ukázky animací a routování
1. bitLODGeometry / texture
2. http://www.x3dom.org/x3dom/test/functional/BVHRefiner.html
3. Shadery, cube map
2. Uděláme z toho samostatnou přednášku X3D + X3Dom
3. Možná další příklady X3D / VRML (vztah k 1.)
4. X3dom + js (interakce, prototypy, shadery, ar?)