Computer Graphics Group Jiří Žára

Computer Graphics Group 2X3D Contents 1.Web3D Consortium 2.X3D specification 3.GeoVRML 4.NurbsVRML 2

Computer Graphics Group X3Dom + js 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’,’ ’); document.getElementById(“inID”).setAttribute(“url”,”path/model.x3d”) ; - This cause replacing of inlined geometry “immediately”

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 … Valid: document.getElementById(‘trNode’); Invalid: document.getElementById(‘o1’);

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

Computer Graphics Group X3Dom + js 6X3D 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 !

Computer Graphics Group X3Dom + js 7X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also HTML Events: User Interaction through DOM Events2 document.onload = function() { document.getElementById(‘redBox').addEventListener('click', function() { document.getElementById('mat').setAttribute('diffuseColor', ‘green'); }, false) }; Test it !

Computer Graphics Group X3Dom + js 8X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also HTML Events: Ultimate DOM manipulation 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 Group AR & X3Dom ? 9X3D 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 detection Marker tracking FLARToolkit (Flash AR Toolkit) 3.3D real-time rendering X3Dom (flash window overlay) Test it !

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

Computer Graphics Group X3D editor 11X3D

Computer Graphics Group examples 12X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

Computer Graphics Group howto X3Dom ? 13X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also Entry points for getting started X3DOM online documentation and code examples – (tutorials and docs) – (12 simple examples) – (7 examples with animation) – (lots of feature tests) More docs and tools – (InstantPlayer and aopt converter) – (links to X3D)

Computer Graphics Group 14X3D … end of this part 14 Todo: 1.Přidat ukázky animací a routování 1.bitLODGeometry / texture 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?)