Embed Size (px)
Citation preview
Computer Graphics Group
Jiří Žára & David Sedláček
Computer Graphics Group
2X3D
Contents
1. Web3D Consortium and X3D specification
2. GeoVRML, NurbsVRML
3. X3Dom
4. VRML to X3Dom
2
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)
Computer Graphics Group
4X3D
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)
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 functionalityInteractive, Immersive, …
Computer Graphics Group
6X3D
Profiles
Computer Graphics Group
7X3D
Features
• XML notation
• Interfaces to scripting languages
• Consortium registers new components (OpenGL strategy)
• Open source reference browser implementation
Computer Graphics Group
8X3D
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>
Computer Graphics Group
9X3D
Specification
1) Abstract specificationobject oriented
2) Three notations- UTF-8 (like VRML97)- XML- Binary (like MPEG-4)
3) Scene authoring interfaceJava, ECMAScript, DOM
Computer Graphics GroupX3D
• GeoVRML
• NurbsVRML
10X3D
Test it !
Test it !
Test it !
Computer Graphics GroupX3Dom - 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
Computer Graphics GroupX3Dom
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
Computer Graphics GroupX3Dom
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
Computer Graphics GroupWEB - 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
14X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
Computer Graphics Groupwhy 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
Computer Graphics GroupX3Dom – 1st example
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“x3dom.css”>
<script type=“text/javascript” src=“x3dom.js”></script>
</head>
<body>
<p>3D view:</p>
<x3d width=“400” height=“300”>
<scene></scene>
</x3d>
</body>
</html>
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.css, http://www.x3dom.org/x3dom/release/x3dom.js
Test it !
Computer Graphics GroupX3Dom – 2nd example
<x3d width=“400” height=“300”>
<scene>
<shape>
<box></box>
<appearance>
<material diffuseColor=“red”>
</material>
<appearance>
</shape>
</scene>
</x3d>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 <scene> element
• Every object has a <shape>• …and a geometry, like e.g. a <box>
• …and an <appearance> with material or texture
Test it !
#VRML V2.0 utf8
Shape {geometry Box {}appearance Appearance {
material Material {
diffuseColor 1 0 0} } }
Computer Graphics Group
<x3d width=“400” height=“300” style=“background-color:#000”>
<scene>
<shape>red box</shape>
</scene>
</x3d>
X3Dom – 3rd example
18X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
Test it !
<x3d width=“400” height=“300”>
<scene>
<shape>red box</shape>
</scene>
<background skyColor=“0 0 0”></background>
</x3d>
Background and css styling
Computer Graphics GroupVRML / 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 !
Computer Graphics GroupX3Dom – VRML
• LOD
• Bilboard
• DEF / USE
• Elevation grid
• Extrusion
20X3D
Test it !
<lod range='15 30 40'><tr..><shape>red box</shape></..tr>…<group></group></lod>
<shape DEF=‘obj1’ >...</shape><shape USE=‘obj1’ />
<elevationgrid xDimension= 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 !
Computer Graphics GroupX3Dom animation
• ColorInterpolator, CoordinateInter., NormalInter., OrientationInter., PositionInter., ScalarInter.
21X3D
Test it !
<scene> <transform DEF='boxTr'> <shape>green Box</shape> </transform>
<timeSensor DEF='time' loop='true' cycleInterval='5'></timeSensor>
<orientationInterpolator DEF='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> Test it !
Computer Graphics Groupmissing 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
Computer Graphics Groupnew 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'> </directionalLight >
Note: implemented 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 !
Computer Graphics Groupnew 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
<imageGeometry --some attributes--><ImageTexture containerField='coord' url='“imgeo/coordImage0.png"'/>
<ImageTexture containerField='normal' url='“imgeo/normalImage.png"'/> <ImageTexture containerField='texCoord' url='“imgeo/texCoord.png"'/></imageGeometry>
<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' >
</binaryGeometry>
• Indexed geometry is binary coded in separate files (less kB)• Browser hold data in binary format (as images) outside of DOM
Computer Graphics Groupnew 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 !
Test it !
Test it !
Test it !
Test it !
Test it !
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
Computer Graphics GroupVRML 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)
• off-line (aopt tool from Instant Reality package) – higher trans. control
• animations, scripts, and code optimizations• transcode all variants (VRML97, X3D, X3Db, X3Dom)
Computer Graphics Groupaopt 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
Computer Graphics Groupaopt 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
Computer Graphics Groupaopt 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
Computer Graphics GroupX3D editor
31X3D
https://savage.nps.edu/X3D-Edit/
Computer Graphics Groupexamples
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
Computer Graphics Grouphowto 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)
Computer Graphics Group… end of this part
• Following lecture– X3Dom scripting – DOM manipulation & jQuery– Interaction and manipulation (HUD and sensors)– PROTOs– AR in X3Dom
34X3D 34
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.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?)
