1 / 37

Jiří Žára

Jiří Žára. Contents. Web3D Consortium X3D specification GeoVRML NurbsVRML. 2. 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

kevin-long
Download Presentation

Jiří Žára

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Jiří Žára

  2. Contents • Web3D Consortium • X3D specification • GeoVRML • NurbsVRML 2

  3. 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. X3D = Next VRML version The next generationOpen Web3D standard Concerted action by keyVRML browser companies(blaxxun, ParallelGraphics,Nexternet, OpenWorlds) Full compatibility with VRML97 Influence to other standards (MPEG-4, XML)

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

  6. Profiles

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

  8. Sample code <?xml version="1.0" encoding="UTF-8"?> <X3D profile='Interactive'> <Scene> <Transform DEF=“myObject1" translation=“0 -7 0.5“scale="2 2 2"> <Shape> <Appearance> <Material DEF="MAT1" ambientIntensity="1.0“ shininess="0.2“ diffuseColor="0 0.5 0" specularColor="0 0.2 0.0"/> </Appearance> <IndexedFaceSet … </IndexedFaceSet> </Shape> </Transform> </Scene> </X3D>

  9. Specification Abstract specificationobject oriented Three notations- UTF-8 (like VRML97)- XML- Binary (like MPEG-4) Scene authoring interfaceJava, ECMAScript, DOM

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

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

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

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

  14. whyX3Dom not WebGL ? • 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 Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  15. X3Dom – 1st example <html> <head> <linkrel=“stylesheet” type=“text/css” href=“x3dom.css”> <script type=“text/javascript” src=“x3dom.js”></script> </head> <body> <p>3D view:</p> <x3dwidth=“400” height=“300”> <scene></scene> </x3d> </body> </html> Test it ! http://www.x3dom.org/x3dom/release/x3dom.css, http://www.x3dom.org/x3dom/release/x3dom.js Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  16. X3Dom – 2nd example <x3d width=“400” height=“300”> <scene> <shape> <box></box> <appearance> <material diffuseColor=“red”> </material> <appearance> </shape> </scene> </x3d> • All 3D objects are children of the <scene>element • Every object has a <shape> • …and a geometry, like e.g. a <box> Test it ! • …and an <appearance> with material or texture Test it ! #VRML V2.0 utf8 Shape { geometry Box {} appearance Appearance { material Material { diffuseColor1 0 0 } } } Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  17. X3Dom – 3rd example Background and css styling <x3d width=“400” height=“300”> <scene> <shape>redbox</shape> </scene> <backgroundskyColor=“0 0 0”></background> </x3d> <x3d width=“400” height=“300” style=“background-color:#000”> <scene> <shape>redbox</shape> </scene> </x3d> Test it ! Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

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

  19. 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

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

  21. new in X3Dom • New Geometry Node Types • <imageGeometry--some attributes--> • <ImageTexturecontainerField='coord' url='“imgeo/coordImage0.png"'/> <ImageTexturecontainerField='normal' url='“imgeo/normalImage.png"'/> <ImageTexturecontainerField='texCoord' url='“imgeo/texCoord.png"'/> • </imageGeometry> • <binaryGeometryvertexCount='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' > • </binaryGeometry> • Indexed geometry is binary coded in separate files (less kB) • Browser hold data in binary format (as images) outside of DOM Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

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

  23. VRML to X3D • 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) • off-line (aopt tool from Instant Reality package) – higher trans. control • animations, scripts, and code optimizations • transcode all variants (VRML97, X3D, X3Db, X3Dom) Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

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

  25. aopt tool 2 • Output optimization (binary geometry): • similarly for geometry images (-g) • mkdirbingeo • aopt –ifoo.wrl –G “bingeo/:is” –xfoo.x3d • 4 bin files (coord, index, normal, texCoord/color) • aopt –ifoo.wrl –G “bingeo/:saI” –xfoo.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 Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

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

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

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

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

  30. X3Dom + js HTML Events: User Interaction through DOM Events2 <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 ! Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  31. X3Dom + js • HTML Events: Ultimate DOM manipulation • <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 ! Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  32. AR & X3Dom ? No problem  • Video capture & display FLASH • Object detection Marker tracking FLARToolkit (Flash AR Toolkit) • 3D real-time rendering X3Dom (flash window overlay) Test it ! Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also

  33. AR & X3Dom ? flash Marker detector camera trigger javaScript function set_marker_transform(value) { document.getElementById(‘rootT’) .setAttribute(matrix, value); } X3Dom <x3d> <scene> <matrixtransform id=“rootT”> </matrixtransform> <transform> HUD if we want </transform> </scene> </x3d> 3D scene

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

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

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

  37. … end of this part • Todo: • Přidat ukázky animací a routování • bitLODGeometry / texture • http://www.x3dom.org/x3dom/test/functional/BVHRefiner.html • Shadery, cube map • Uděláme z toho samostatnou přednášku X3D + X3Dom • Možná další příklady X3D / VRML (vztah k 1.) • X3dom + js (interakce, prototypy, shadery, ar?) 37

More Related