1. Computer Graphics Group Jiří Žára & David Sedláček

2. Computer Graphics Group 2X3D Contents 1.Web3D Consortium and X3D specification 2.GeoVRML, NurbsVRML 3.X3Dom 4.VRML to X3Dom 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 X3D GeoVRML NurbsVRML 10X3D Test it !

11. 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) 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 – Declarative (X)3D in HTML5 12X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

13. 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 13X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

14. 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, Internet Explorer 11 HTML5 element provides 3D rendering context –gl=canvas.getContext(‘webgl’); API calls via GL object –X3D via X3DOM framework –http://www.x3dom.org 14X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

15. Computer Graphics Group why X3Dom not WebGL ? 15X3D 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

16. Computer Graphics Group X3Dom – 1 st example 3D view: 16X3D 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 !

17. Computer Graphics Group X3Dom – 2 nd example 17X3D 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 }}}

18. Computer Graphics Group red box X3Dom – 3 rd example 18X3D 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

19. Computer Graphics Group VRML / X3D / X3Dom 19X3D 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 !

20. Computer Graphics Group X3Dom – VRML LOD Bilboard DEF / USE Elevation grid Extrusion 20X3D Test it ! red box …... <elevationgrid xDimension= zDimension= xSpacing= zSpacing= height=‘ array of scalars ’ > <extrusion creaseAngle=‘.9’ crossSection=‘array of 2f’ orientation=‘array of 4f’ scale=‘array of 2f’ spine=‘array of 3f’> Test it !

21. Computer Graphics Group X3Dom animation ColorInterpolator, CoordinateInter., NormalInter., OrientationInter., PositionInter., ScalarInter. 21X3D Test it ! green Box <orientationInterpolator DEF='rotace' key='0 0.5 1' keyValue=' 0 0 1 0 0 0 1 3.14 0 0 1 6.28 '> <route fromNode='time' fromField='fraction_changed' toNode='rotace' toField='set_fraction'> <route fromNode='rotace' fromField='value_changed‘ toNode='boxTr‘ toField='set_rotation'> Test it !

22. 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 22X3D

23. Computer Graphics Group new in X3Dom 23X3D 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: i mplemented for all three light types 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 !

24. Computer Graphics Group new in X3Dom 24X3D 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

25. Computer Graphics Group new in X3Dom LOD –VRML approach –PopGeometry - progressive streaming Shaders –Predefined Normal mapping Displacement mapping … –User defined vertex and fragment shaders (in X3Dom file) 25X3D Test it !

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

27. Computer Graphics Group VRML to X3D 27X3D 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 )

28. Computer Graphics Group aopt tool 1 28X3D 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

29. Computer Graphics Group aopt tool 2 29X3D 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

30. Computer Graphics Group aopt tool 3 30X3D 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

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

32. Computer Graphics Group examples 32X3D 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://leyfi.felk.cvut.cz/courses/mvr/gocar/ http://x3dom.org/x3dom/example/x3dom_bmwConfig.html http://x3dom.org/x3dom/example/x3dom_canvas.html

33. Computer Graphics Group howto X3Dom ? 33X3D 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)

34. Computer Graphics Group … end of this part Following lecture –X3Dom scripting – DOM manipulation & jQuery –Interaction and manipulation (HUD and sensors) –PROTOs –AR in X3Dom 34X3D34

35. Computer Graphics Group 35X3D … end of this part 35 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?)