html5-img
1 / 35

Jiří Žára & David Sedláček

Jiří Žára & David Sedláček. Contents. Web3D Consortium and X3D specification GeoVRML , NurbsVRML X3Dom VRML to X3Dom. 2. Web3D Consortium. About 15 Working Groups ( www.web3d.org ) : source : reference browser (Xj3D) h-anim : humanoid animation (done: ISO standard)

zada
Download Presentation

Jiří Žára & David Sedláček

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& David Sedláček

  2. Contents • Web3D Consortium and X3D specification • GeoVRML, NurbsVRML • X3Dom • VRML to X3Dom 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. X3D • GeoVRML • NurbsVRML Test it ! Test it ! Test it !

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

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

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

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

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

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

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

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

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

  20. X3Dom – VRML • LOD • Bilboard • DEF / USE • Elevation grid • Extrusion • <lodrange='15 30 40'> • <tr..><shape>redbox</shape></..tr> • … • <group></group> • </lod> Test it ! <shape DEF=‘obj1’ >...</shape> <shape USE=‘obj1’ /> <elevationgridxDimension= zDimension= xSpacing= zSpacing= height=‘ array of scalars ’ > <color color=‘ array of colors ’ /> </elevationgrid> <extrusion creaseAngle=‘.9’ crossSection=‘array of 2f’ orientation=‘array of 4f’ scale=‘array of 2f’ spine=‘array of 3f’></extrusion> Test it !

  21. X3Dom animation <scene> <transform DEF='boxTr'> <shape>green Box</shape> </transform> <timeSensor DEF='time' loop='true' cycleInterval='5'></timeSensor> <orientationInterpolatorDEF='rotace' key='0 0.5 1' keyValue='0 0 1 0 0 0 1 3.14 0 0 1 6.28'></orientationInterpolator> <ROUTE fromNode='time' fromField='fraction_changed' toNode='rotace' toField='set_fraction'></ROUTE> <ROUTE fromNode='rotace' fromField='value_changed‘toNode='boxTr‘ toField='set_rotation'></ROUTE> </scene> • ColorInterpolator, CoordinateInter., NormalInter., OrientationInter., PositionInter., ScalarInter. Test it ! Test it !

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

  23. new in X3Dom shadows <directionalLight direction='0 0 -1' intensity='1‘ shadowIntensity='0.7'> </directionalLight > Note: implemented forallthreelighttypes 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

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

  25. new in X3Dom • LOD • VRML approach • PopGeometry -progressive streaming • Shaders • Predefined • Normalmapping • Displacementmapping • … • User defined vertex and fragment shaders (in X3Dom file) Test it ! Test it ! Test it ! Test it ! Test it ! Test it !

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

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

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

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

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

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

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

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

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

  35. … 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?) 35

More Related