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

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

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.

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/XMLSchema-instance" xsd:noNamespaceSchemaLocation="http://www.web3d.org/specifications/x3d-3.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>

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.

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

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

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

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

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

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.

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.

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

Demo Result Load X3DOM Library Embedded X3D Content <!DOCTYPE html> <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> </html> Result Embedded X3D Content

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.

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=db8b9080-40ef-4f8f-ae52-4e198d78da77