370 likes | 516 Views
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
E N D
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 dis: distributed interactive simulation GeoVRML, NurbsVRML (done) vrml-streams: streaming scene graph & data media: universal media (like fonts in op. systems)
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)
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, …
Features XML notation Interfaces to scripting languages Consortium registers new components (OpenGL strategy) Open source reference browser implementation
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>
Specification Abstract specificationobject oriented Three notations- UTF-8 (like VRML97)- XML- Binary (like MPEG-4) Scene authoring interfaceJava, ECMAScript, DOM
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
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
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
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
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
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
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
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
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
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
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
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
… to X3Dom …converters Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
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
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
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
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
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
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
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
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
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
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
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
X3D editor https://savage.nps.edu/X3D-Edit/
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
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
… 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