1. X3DOM : Integrating 3D content seamlessly into webpage
Professor : Yoo Kwan-Hee
Presentation by : Chheang Vuthea

2. Content Introduction Background Diverse Data Sources X3DOM Features
Node and component
Animation and interaction between HTML 5 and X3D
Demo
Conclusion
References

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

4. 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" "
<X3D profile="Interchange" version="3.2" xmlns:xsd=" xsd:noNamespaceSchemaLocation=" <Scene>
<Shape>
<IndexedFaceSet coordIndex="0 1 2"> <Coordinate point=" "/> </IndexedFaceSet>
</Shape>
</Scene>
</X3D>

5. Background- Workflow for building and deploying X3D Content
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 …
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.
Publication: Marshal scene content and Add features for device-specific display and interaction. X3DOM work well for adding features, animation and interaction.

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

7. Background- X3D Run Anywhere
X3D work smoothly on HTML5 so mobile devices that running HTML5 browsers can display interactive 3D objects
WebGL

8. Background- DOM (Document Object Model)
The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed 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

9. 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
Browser
X3D
Browser
X3D
SAI
DOM
X3DOM integration model

10. Diverse data sources Geospatial data Terrain Imagery Buildings
Simulation/design
Visualization of abstract information
Experiencing Cultural Heritage data in 3D
Virtual Engineering
Medical …

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

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

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

14. Demo Result Load X3DOM Library Embedded X3D Content
<!DOCTYPE html>
<html>
<head>
<title>X3DOM</title>
<script type='text/javascript' src=' </script>
<link rel='stylesheet' type='text/css' href='
</head>
<body>
<x3d width="500px" height="500">
<scene>
<shape>
<appearance>
<material diffuseColor="1 0 0"></material>
</appearance>
<box></box>
</shape>
</scene>
</x3d>
</body>
</html>
Result
Embedded X3D Content

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

16. References http://www.x3dom.org/ http://doc.x3dom.org/