In this demo description we present X3DOM, which is an open source framework and runtime system to support the ongoing discussion in the Web3D and W3C communities how an integration of HTML5 and declarative 3D graphics can look like by including X3D elements as part of the HTML5 DOM tree. The goal here is to have a live X3D scene-graph integrated into the HTML DOM, which allows manipulating the 3D content by only adding, removing, or changing the corresponding DOM elements. No speci c plugin or plugin interface, such as the X3D-speci c SAI, is required. X3DOM also supports CSS integration as well as standard HTML events like \onclick" on 3D objects.
The X3DOM website including online examples and links to
external showcases can be found on http://www.x3dom.org/
Copyright c 2012 for the individual papers by the papers'
authors. Copying permitted only for private and academic purposes.
This volume is published and copyrighted by its editors.
Dec3D2012 workshop at WWW2012, Lyon, France
and the complete source code is o cially available at github:
https://github.com/x3dom/x3dom
One important design question here is, why we build upon
X3D [
First, they plugins are not installed by default on most
systems. Therefore, the user has to deal with installation,
security, and browser or OS incompatibility issues, not to
mention the lack of accessibility. Second, plugin-based
systems de ne an application and event model inside the plugin,
which is decoupled from the DOM content. Developers, who
try to develop integrated web applications that use both, the
DOM and the plugin-model, have to deal with small
pluginspeci c interfaces and synchronization problems.
WebGL [
Besides DOM integration, we additionally propose a new
HTML Pro le based on the current X3D [
First of all we increased the support level for the networking component to 2 to include the Inline node, which is needed to portion the 3D data. Second, we increased the support level from the grouping component also to 2 to get the Switch and StaticGroup node. The latter will be used for optimization later on. We also increased the support level for the navigation component to 2 to include Billboard and LOD. In addition, we included some further standard components such as Text/ level 1 (since text is essential for web applications), Shaders/ level 1 (we already run on a GLSL-based shader pipeline), and the Followers/ level 1 (to get the exible per-frame updates on the 3D side). 2. APPLICATION EXAMPLES In this section a few applications are exemplarily showcased to demonstrate the potential of the proposed framework. In the area of cultural heritage for instance, working with 3D scanner data for preservation is getting more and more common. Figure 1 (top left) shows an example of an interactive web application for the visualization of scanned historical 3D objects, which was implemented with the help of X3DOM and standard web technologies.
The next image shows a simple online car con gurator with a minimalistic UI. The user can choose certain colors from a given color palette or change the rims in real-time. In addition, the car can be viewed from any position, since nothing is prerendered. In contrast to today's online con gurators, which are using semi-3D presentation methods, this car is a real 3D model. Hence, even small or complex animations of the doors or other parts are possible. The communication between UI and 3D model is completely implemented in JavaScript while styling is done with CSS.
The AR application shown next uses X3DOM for hardwareaccelerated rendering of the earth globe, which hovers above the marker. Like in every AR application, a webcam and a video image is required to achieve the augmentation e ect. Because native device access is not yet possible in HTML, a Flash-based marker tracker is used instead. The top right image shows the simulation of all planets and 100,000 of the known 480,000 asteroids of the Solar System.
The two screenshots in the middle are external showcases: the left image shows a GIS application with a oodwater scenario, where the user interactively can choose the waterlevel, whereas the right image shows an e-learning scenario. The rightmost image in the middle row and the second image in the bottom row are showing two similar use-cases (both also being external showcases): the visualization of the network of twitter friends and of facebook friends respectively. The leftmost image in the bottom row of Figure 1 shows the visualization of a ow eld simulation, where the respective color can be retrieved by picking a certain 3D ow region with the mouse. This color again maps to a speci c temperature, which is obtained by inverting the original look-up value. This kind of application has a huge potential in the eld of automotive for communicating and presenting e.g. simulation results towards decision makers or consumers, without distributing a whole application while providing the user with more information than a static image or fact sheet. Figure 2 shows some screenshots of a walk-trough application realized with X3DOM. To ease the application development by excluding the vertex attribute data from the HTML le on the one hand and to compress this large geometric data set on the other hand we use so-called image geometries to represent and render vertex data by utilizing images as data containers. Within the course of this demo we will also show this new feature of X3DOM in action.