Embed Size (px)
Citation preview
Computer Graphics Group
Jiří Žára
Computer Graphics Group
2X3D
Contents
1. Web3D Consortium
2. X3D specification
3. GeoVRML
4. NurbsVRML
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 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)
10X3D 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
11X3D 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
12X3D 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
• HTML5 <canvas> element provides 3D rendering context– gl=canvas.getContext(‘webgl’);
• API calls via GL object– X3D via X3DOM framework
– http://www.x3dom.org
13X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
Computer Graphics Groupwhy X3Dom not WebGL ?
14X3D 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>
15X3D 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>16X3D 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
17X3D 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
18X3D 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 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
19X3D
Computer Graphics Groupnew in X3Dom
20X3D 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: only implemented for the first <directionalLight> in the scene
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
21X3D 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 Group… to X3Dom
22X3D
…converters
Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
Computer Graphics GroupVRML to X3D
23X3D 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
24X3D 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
25X3D 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
26X3D 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 GroupX3Dom + js
27X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
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”
Computer Graphics GroupX3Dom + js
28X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
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);
Computer Graphics GroupX3Dom + js
29X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
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 !
Computer Graphics GroupX3Dom + js
30X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
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 !
Computer Graphics GroupX3Dom + js
31X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
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 !
Computer Graphics GroupAR & X3Dom ?
32X3D Inspired by X3Dom talk at Fraunhofer IGD (Sep. 2012), texts and images are adapted from the talk also
No problem 1. Video capture & display
FLASH
2. Object detectionMarker tracking FLARToolkit (Flash AR Toolkit)
3. 3D real-time renderingX3Dom (flash window overlay)
Test it !
Computer Graphics GroupAR & X3Dom ?
33X3D
cameraMarker
detector
<x3d><scene>
<matrixtransform id=“rootT”>
</matrixtransform><transform> HUD if we want </transform>
</scene></x3d>
3D scene
function set_marker_transform(value) {document.getElementById(‘rootT’)
.setAttribute(matrix, value);}
flash
javaScript
X3Dom
trigger
Computer Graphics GroupX3D editor
34X3D
https://savage.nps.edu/X3D-Edit/
Computer Graphics Groupexamples
35X3D 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://x3dom.org/x3dom/example/x3dom_bmwConfig.html
• http://x3dom.org/x3dom/example/x3dom_canvas.html
Computer Graphics Grouphowto X3Dom ?
36X3D 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
37X3D
… end of this part
37
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?)
