1. Computer Graphics Group Jiří Žára

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

3. Computer Graphics Group 3X3D Web3D Consortium About 15 Working Groups (www.web3d.org): source: reference browser (Xj3D) h-anim: humanoid animation (done: ISO standard) web3d-mpeg: integration with MPEG dis: distributed interactive simulation GeoVRML, NurbsVRML (done) vrml-streams: streaming scene graph & data media: universal media (like fonts in op. systems)

4. Computer Graphics Group 4X3D X3D = Next VRML version The next generation Open Web3D standard Concerted action by key VRML browser companies (blaxxun, ParallelGraphics, Nexternet, OpenWorlds) Full compatibility with VRML97 Influence to other standards (MPEG-4, XML)

5. Computer Graphics Group 5X3D Architecture Components: Rendering, Geometry, GeoVRML, Language, Texture, Navigation, Nurbs, Scripting, Sensor, etc. Profiles (subset of components + limitations): Core – light renderers (Java applets) Base – full functionality Interactive, Immersive, …

6. Computer Graphics Group 6X3D Profiles

7. Computer Graphics Group 7X3D Features XML notation Interfaces to scripting languages Consortium registers new components (OpenGL strategy) Open source reference browser implementation

8. Computer Graphics Group 8X3D Sample code <Material DEF="MAT1" ambientIntensity="1.0“ shininess="0.2“ diffuseColor="0 0.5 0" specularColor="0 0.2 0.0"/> <IndexedFaceSet …

9. Computer Graphics Group 9X3D Specification 1)Abstract specification object oriented 2)Three notations - UTF-8 (like VRML97) - XML - Binary (like MPEG-4) 3)Scene authoring interface Java, ECMAScript, DOM

10. Computer Graphics Group X3Dom - motivation Websites (have) become Web applications Increasing interest in 3D for –Product presentation –Visualization of abstract information –Enriching experience of cultural Heritage Plugins for VRML/X3D are a nuisance –Problems with permissions, installation, security The same application for different OS –PC & mobile devices (Symbian, Android, iOS) 10X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

11. Computer Graphics Group X3Dom X3Dom – Declarative (X)3D in HTML5 11X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

12. Computer Graphics Group X3Dom X3Dom – pronounce X-Freedom Developped at Fraunhofer IGD –first stable version 1.0 – 25.3.2010 –current stable version 1.5.1 – 23.10.2013 WebGL / Flash rendering 12X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

13. Computer Graphics Group WEB - OpenGL OpenGL and GLSL in the Web: WebGL JavaScript Binding for OpenGL ES 2.0 in Web Browser –Firefox, Chrome, Safari, Opera HTML5 element provides 3D rendering context –gl=canvas.getContext(‘webgl’); API calls via GL object –X3D via X3DOM framework –http://www.x3dom.org 13X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

14. Computer Graphics Group why X3Dom not WebGL ? 14X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also Simple scene creation –Built-in Navigation and Animation –Simple scene manipulation (DOM and jQuery) Instant behaviour –Automatically split indexes if larger than 65k (webGL limit) – (huge mesh support) –Non PowerOfTwo textures

15. Computer Graphics Group X3Dom – 1 st example 3D view: 15X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also http://www.x3dom.org/x3dom/release/x3dom.csshttp://www.x3dom.org/x3dom/release/x3dom.css, http://www.x3dom.org/x3dom/release/x3dom.jshttp://www.x3dom.org/x3dom/release/x3dom.js Test it !

16. Computer Graphics Group X3Dom – 2 nd example 16X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also Test it ! All 3D objects are children of the element Every object has a …and a geometry, like e.g. a …and an with material or texture Test it ! #VRML V2.0 utf8 Shape { geometry Box {} appearance Appearance { material Material { diffuseColor 1 0 0 }}}

17. Computer Graphics Group red box X3Dom – 3 rd example 17X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also Test it ! red box Background and css styling

18. Computer Graphics Group VRML / X3D / X3Dom 18X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also basic primitives, indexed face sets materials, textures, lights background, fog interpolators, ! inlines !

19. Computer Graphics Group missing in X3Dom Newly proposed X3D profile –HTML profile, is extended X3D-Interchange profile Not supported nodes –Script It is completely replaced by browser javaScript –PROTO Can be compensate by javaScript nodes generation 19X3D

20. Computer Graphics Group new in X3Dom 20X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also shadows <directionalLight direction='0 0 -1' intensity='1‘ shadowIntensity='0.7'> Note: only implemented for the first in the scene Test it ! Indexed triangle set faster for viewing -> viewer do not run tesselator any -1 in index attribute DOM holds structure and data More than 95% are usually unstructured data !

21. Computer Graphics Group new in X3Dom 21X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also New Geometry Node Types <binaryGeometry vertexCount='1153083' primType='"TRIANGLES"' position='19.811892 -57.892578 -1.699294' size='92.804482 159.783081 26.479685' coord='binGeo/BG0_interleaveBinary.bin#0+24' coordType='Int16' normal='binGeo/BG0_interleaveBinary.bin#8+24' normalType='Int16‘ color='binGeo/BG0_interleaveBinary.bin#16+24‘ colorType='Int16' > Indexed geometry is binary coded in separate files (less kB) Browser hold data in binary format (as images) outside of DOM

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

23. Computer Graphics Group VRML to X3D 23X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also By HAND in text editor Using converter of third sides (lossy) Meshlab, Deep Exploration, Accutrans,… VRML to X3D can be TRANSCODED on-line (instant reality encoding converter)instant reality encoding converter off-line (aopt tool from Instant Reality package) – higher trans. control animations, scripts, and code optimizations transcode all variants ( VRML97, X3D, X3Db, X3Dom )

24. Computer Graphics Group aopt tool 1 24X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also Basic transcoding output parameters: aopt –i foo.wrl –x foo.x3d aopt –i foo.wrl –b foo.x3db aopt –i foo.x3d –N foo.html aopt –i foo.x3d –M foo.xhtml aopt –i foo.x3d –u -N foo.html -u : optimization build DEF/USE aopt –i foo.x3d –v foo.wrl

25. Computer Graphics Group aopt tool 2 25X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also Output optimization (binary geometry): similarly for geometry images (-g) mkdir bingeo aopt –i foo.wrl –G “bingeo/:is” –x foo.x3d 4 bin files (coord, index, normal, texCoord/color) aopt –i foo.wrl –G “bingeo/:saI” –x foo.x3d 1 bin file, interleaved values (coord, normal, color/texCoord) Parameters: i : index s : trianglestrip a : autoindex (coordIndex have to be smaller than 16bit = 65.535) c : compact (16bit representation for vertex attributes) p : normal in spherical coordinates I : interleaved (16bit interleaved vertex data) Most compact option ? sacp

26. Computer Graphics Group aopt tool 3 26X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also Huge mesh optimization (binary geometry): aopt –i model.wrl –u –b model-clean.x3db Model cleanup (-u) + binary output for smaller files (-b) aopt –i model-clean.x3db –F Scene –b model-opt.x3d Mesh patching (geo. is splitted for 16bit indices) for specified node aopt –i model-opt.x3d –G “bingeo/:saI” –N model.html Final optimisation with binGeo for HTML/X3Dom aopt can work with VRML/X3D files and possibly with others (.ply,.obj, …) oopt is better for converting other formats to x3d and than use aopt for optimization

27. Computer Graphics Group X3Dom + js 27X3D 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”

28. Computer Graphics Group X3Dom + js 28X3D 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);

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

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

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

32. Computer Graphics Group AR & X3Dom ? 32X3D 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 !

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

34. Computer Graphics Group X3D editor 34X3D https://savage.nps.edu/X3D-Edit/

35. Computer Graphics Group examples 35X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also http://examples.x3dom.org/IG/syn/index-inline.html http://www.3dcoform.eu/x3dom/ http://x3dom.org/x3dom/example/x3dom_bmwConfig.html http://x3dom.org/x3dom/example/x3dom_canvas.html

36. Computer Graphics Group howto X3Dom ? 36X3D 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 –http://x3dom.org/docs/dev/ (tutorials and docs) –http://www.x3dom.org/school/ (12 simple examples) –http://www.x3dom.org/iX/ (7 examples with animation) –http://www.x3dom.org/x3dom/test/functional/ (lots of feature tests) More docs and tools –http://www.instantreality.org/downloads/ (InstantPlayer and aopt converter) –http://doc.instantreality.org/documentation/getting-started/ (links to X3D)

37. Computer Graphics Group 37X3D … end of this part 37 Todo: 1.Přidat ukázky animací a routování 1.bitLODGeometry / texture 2.http://www.x3dom.org/x3dom/test/functional/BVHRefiner.htmlhttp://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?)