Transcript X3D

X3DOM : Integrating 3D content
seamlessly into webpage
Professor : Yoo Kwan-Hee
Presentation by : Chheang Vuthea
Content
I.
Introduction
II. Background
III. Diverse Data Sources
IV. X3DOM Features
V. Node and component
VI. Animation and interaction between HTML 5 and X3D
VII. Demo
VIII.Conclusion
IX. References
2
Introduction
X3DOM = X3D + DOM
 Experimental open source framework and runtime for X3D

The library is written in JavaScript

Implementation was initially done for discussing integration of HTML5 and declarative 3D
content
 Goal

To have a live X3D scene that can be manipulated through HTML DOM

No plugins required when WebGL support is available

It allows web developers to build dynamic 3D content using DHTML, AJAX and existing JS-libs
like jQuery.
3
Background- X3D (Extensible 3D Graphics)
X3D is a royalty-free open standards file format and run-time architecture to represent and
communicate 3D scenes and objects using XML.
Example :
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D
3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd">
<X3D profile="Interchange" version="3.2" xmlns:xsd="http://www.w3.org/2001/XMLSchemainstance" xsd:noNamespaceSchemaLocation="http://www.web3d.org/specifications/x3d3.2.xsd"> <Scene>
<Shape>
<IndexedFaceSet coordIndex="0 1 2"> <Coordinate point="0 0 0 1 0 0 0.5 1 0"/>
</IndexedFaceSet>
</Shape>
</Scene>
</X3D>
4
Background- Workflow for building and deploying X3D Content
1.
3D Modelling: Generate 3D models and assets, compose scenes.
X3D files can be generated programmatically or edited in a text editor, but often it is easiest to 'SAVE
AS' or 'Export' directly from a GUI editing tool. The tools such as Blender, Maya Export VRML, Unity …
2.
Processing: Optimize content for Web publication
For some applications, 3D models may need to be optimized for web publication or network sharing.
This could mean reducing the mesh for faster network transmission, multiple levels-of detail or
transcoding a model to a more compact encoding.
3.
Publication: Marshal scene content and Add features for device-specific display and interaction.
X3DOM work well for adding features, animation and interaction.
5
Background- Why need to use X3D?

Open source, free, and royalty-fee ISO standard

Provides an Interactive and immersive 3D experience

Runs on many platforms

Excellent compatibility with HTML5 and other Web Standards including XML Security

Efficient compressed binary encodings for high performance

Compatible with other Standards

Archival stability that stand the test of time
6
Background- X3D Run Anywhere
X3D work smoothly on HTML5 so mobile devices that
running HTML5 browsers can display interactive 3D
objects
WebGL
7
Background- DOM (Document Object Model)
The Document Object Model (DOM) is an application programming interface (API) for valid HTML and wellformed XML documents. It defines the logical structure of documents and the way a document is accessed
and manipulated.
Document
Example :
<root>
<child_1>
Text_1
</child_1>
<child_2>
Text_2
</child_2>
<child_3>
Text_3
</child_3>
</root>
root
child_1
child_2
child_3
Text_1
Text_2
Text_3
8
Background- Applying X3D in X3DOM
When using a web browser as an X3D runtime, the focus is slightly different from the basic
profiles
 X3D defines Scene Access Interface (SAI), but web browser readily provide DOM
 Browsers also readily implement scripting capabilities (JavaScript)
 X3DOM group proposes a new X3D profile, HTML that extends X3D-Interchange profile
SAI
Browser
X3D
Browser
X3DOM integration model
DOM
X3D
9
Diverse data sources
 Geospatial data
 Terrain
 Imagery
 Buildings
 Simulation/design
 Visualization of abstract information
 Experiencing Cultural Heritage data in 3D
 Virtual Engineering
 Medical …
10
X3DOM Features
 Support for loading and displaying X3D models
 Manipulation of the scene via DOM
 HTML events (onclick, onmousemove, onmousedown or onmouseup etc.) on 3D objects
 Support for large meshes (>65k indices per mesh)
 Textures (images and movies) and sound
 Transparency, fog and shadows
 Multiple light sources (spot, point, directional)
 Animations (mesh, camera)
 We can customize X3DOM content with own CSS by overriding X3DOM’s default CSS
(External, Internal or inline) or define new id into X3DOM node.
11
Node and Component
- Node represents a certain part or aspect of the scene.
<x3d width="500px" height="500">
<scene>
<shape>
<appearance>
<material diffuseColor="1 0 0"></material>
</appearance>
<box></box>
</shape>
</scene>
</x3d>
Node
- Component is a group of nodes that serve a common purpose.
12
Animation and Interaction between HTML5 and X3D
X3DOM provides some generic interaction methods that make easy for interacting HTML5 with X3D.
Interactive Object will handled by HTML-like event. So we can handle event with JavaScript for
making object X3D to have animation and interaction.
 Navigation Mode
 Viewpoint
 Animating Objects with Routes
 Hiding and switching visible nodes
 Transformations
 Picking Objects
13
Demo
<!DOCTYPE html>
Load X3DOM Library
<html>
<head>
<title>X3DOM</title>
<script type='text/javascript' src='http://www.x3dom…'> </script>
<link rel='stylesheet' type='text/css' href='http://www.x3dom.org…'/>
</head>
<body>
<x3d width="500px" height="500">
<scene>
<shape>
<appearance>
<material diffuseColor="1 0 0"></material>
</appearance>
<box></box>
</shape>
</scene>
</x3d>
</body>
Embedded X3D Content
</html>
Result
14
Conclusion
X3DOM is a new approach and integration architecture, making declarative 3D as simple as
text, video, and sound on a web. It supports the integration of X3D content directly into the
HTML DOM tree. The architecture utilizes existing standards (WebGL) and web technologies
from the existing browser architecture.
15
References
 http://www.x3dom.org/
 http://doc.x3dom.org/
 http://www.web3d.org/
 https://en.wikipedia.org/wiki/X3D
 http://www.slideshare.net/jsalonen/x3dom-an-overview-and-examples?qid=db8b908040ef-4f8f-ae52-4e198d78da77
16