=Paper=
{{Paper
|id=None
|storemode=property
|title=Declarative (X)3D in HTML5
|pdfUrl=https://ceur-ws.org/Vol-869/Dec3D2012_01.pdf
|volume=Vol-869
|dblpUrl=https://dblp.org/rec/conf/www/JungKB12
}}
==Declarative (X)3D in HTML5==
https://ceur-ws.org/Vol-869/Dec3D2012_01.pdf
Demo: X3DOM – Declarative (X)3D in HTML5
Yvonne Jung Jens Keil Johannes Behr
Fraunhofer IGD Fraunhofer IGD Fraunhofer IGD
Fraunhoferstrasse 5 Fraunhoferstrasse 5 Fraunhoferstrasse 5
64283 Darmstadt, Germany 64283 Darmstadt, Germany 64283 Darmstadt, Germany
yjung@igd.fhg.de jkeil@igd.fhg.de jbehr@igd.fhg.de
ABSTRACT and the complete source code is officially available at github:
In this demo description we present X3DOM, which is an https://github.com/x3dom/x3dom
open source framework and runtime system to support the
ongoing discussion in the Web3D and W3C communities One important design question here is, why we build upon
how an integration of HTML5 and declarative 3D graph- X3D [4]. The open ISO standard X3D provides interactive
ics can look like by including X3D elements as part of the 3D graphics for the web and is the only standardized 3D
HTML5 DOM tree. The goal here is to have a live X3D deployment format. It differs from other 3D formats like
scene-graph integrated into the HTML DOM, which allows the interchange format Collada [1] in that it also includes
manipulating the 3D content by only adding, removing, or the scene’s runtime behavior. However, X3D is still bound to
changing the corresponding DOM elements. No specific plu- a plugin-based integration model and, like all plugin-based
gin or plugin interface, such as the X3D-specific SAI, is re- systems, has two major drawbacks [2, 3].
quired. X3DOM also supports CSS integration as well as
standard HTML events like “onclick” on 3D objects. First, they plugins are not installed by default on most sys-
tems. Therefore, the user has to deal with installation,
Categories and Subject Descriptors security, and browser or OS incompatibility issues, not to
mention the lack of accessibility. Second, plugin-based sys-
I.3.6 [Methodology and Techniques]: Standards—Lan-
tems define an application and event model inside the plugin,
guages; I.3.7 [Computer Graphics]: Three-Dimensional
which is decoupled from the DOM content. Developers, who
Graphics and Realism—Virtual Reality
try to develop integrated web applications that use both, the
DOM and the plugin-model, have to deal with small plugin-
Keywords specific interfaces and synchronization problems.
HTML5, CSS3, WebGL, DOM, X3D, Web Integration
WebGL [5], Flash 11 with Stage3D [7], and Silverlight 5
1. MOTIVATION AND CONCEPT [6] now all provide access to the native GPU layer in the
Within this demo we like to showcase X3DOM, an open browser without a complicated plugin installation process,
source framework and runtime system that supports the on- but the issue of the missing DOM integration still exists.
going discussion in the Web3D and W3C communities how Thus, what is still missing is a better integration with open
an integration of HTML5 and declarative 3D graphics can architectures, which integrate well with existing web tech-
look like. The idea is to have a live X3D scene-graph in- nologies like CSS3, HTML5, JavaScript, DOM scripting and
tegrated into the HTML DOM by including X3D elements Ajax. In this regard, the X3DOM project presents a DOM-
as part of the DOM tree similar to the SVG HTML inte- based integration model for declarative (X)3D in HTML5
gration. This allows manipulating the 3D content by only [2, 3], that allows a seamless integration of 3D contents into
adding, removing, or changing the corresponding DOM ele- the HTML document model by utilizing standard web APIs
ments without the need for specific plugins or plugin inter- for integrating content and interactions.
faces like the X3D-specific SAI. X3DOM also supports CSS
integration as well as standard HTML events on 3D objects. Besides DOM integration, we additionally propose a new
HTML Profile based on the current X3D [4] standard, which
The X3DOM website including online examples and links to extends the X3D Interchange profile. Therefore, this profile
external showcases can be found on http://www.x3dom.org/ does not include X3D-specific concepts like internal Script
nodes, pointing device sensors or support for PROTO types.
Application developers are supposed to script and partition
the content from the DOM/HTML side.
First of all we increased the support level for the networking
component to 2 to include the Inline node, which is needed to
Copyright c 2012 for the individual papers by the papers’ au- portion the 3D data. Second, we increased the support level
thors. Copying permitted only for private and academic purposes. from the grouping component also to 2 to get the Switch
This volume is published and copyrighted by its editors. and StaticGroup node. The latter will be used for optimiza-
Dec3D2012 workshop at WWW2012, Lyon, France
Figure 2: Architectural walk-through model of Hall
11 of the Fair of Frankfurt – represented and ren-
dered using our new image geometry approach for
fast content delivery and data compression.
scenario, where the user interactively can choose the water-
Figure 1: Some early examples of X3DOM-based level, whereas the right image shows an e-learning scenario.
Web applications (e.g., the top left image shows a The rightmost image in the middle row and the second image
line-up of laser scanned Cultural Heritage artifacts. in the bottom row are showing two similar use-cases (both
also being external showcases): the visualization of the net-
work of twitter friends and of facebook friends respectively.
tion later on. We also increased the support level for the
navigation component to 2 to include Billboard and LOD. The leftmost image in the bottom row of Figure 1 shows the
In addition, we included some further standard components visualization of a flow field simulation, where the respective
such as Text/ level 1 (since text is essential for web appli- color can be retrieved by picking a certain 3D flow region
cations), Shaders/ level 1 (we already run on a GLSL-based with the mouse. This color again maps to a specific tem-
shader pipeline), and the Followers/ level 1 (to get the flex- perature, which is obtained by inverting the original look-up
ible per-frame updates on the 3D side). value. This kind of application has a huge potential in the
field of automotive for communicating and presenting e.g.
simulation results towards decision makers or consumers,
2. APPLICATION EXAMPLES without distributing a whole application while providing the
In this section a few applications are exemplarily showcased user with more information than a static image or fact sheet.
to demonstrate the potential of the proposed framework. In
the area of cultural heritage for instance, working with 3D Figure 2 shows some screenshots of a walk-trough applica-
scanner data for preservation is getting more and more com- tion realized with X3DOM. To ease the application develop-
mon. Figure 1 (top left) shows an example of an interactive ment by excluding the vertex attribute data from the HTML
web application for the visualization of scanned historical 3D file on the one hand and to compress this large geometric
objects, which was implemented with the help of X3DOM data set on the other hand we use so-called image geome-
and standard web technologies. tries to represent and render vertex data by utilizing images
as data containers. Within the course of this demo we will
The next image shows a simple online car configurator with also show this new feature of X3DOM in action.
a minimalistic UI. The user can choose certain colors from a
given color palette or change the rims in real-time. In addi- 3. REFERENCES
tion, the car can be viewed from any position, since nothing [1] R. Arnaud and M. Barnes. Collada. AK Peters, 2006.
is prerendered. In contrast to today’s online configurators,
[2] J. Behr, Y. Jung, T. Drevensek, and A. Aderhold.
which are using semi-3D presentation methods, this car is
Dynamic and interactive aspects of X3DOM. In
a real 3D model. Hence, even small or complex animations
Proceedings Web3D 2011, pages 81–87, New York,
of the doors or other parts are possible. The communica-
USA, 2011. ACM Press.
tion between UI and 3D model is completely implemented
in JavaScript while styling is done with CSS. [3] J. Behr, Y. Jung, J. Keil, T. Drevensek, P. Eschler,
M. Zöllner, and D. W. Fellner. A scalable architecture
The AR application shown next uses X3DOM for hardware- for the HTML5/ X3D integration model X3DOM. In
accelerated rendering of the earth globe, which hovers above S. Spencer, editor, Proceedings Web3D 2010, pages
the marker. Like in every AR application, a webcam and a 185–193, New York, USA, 2010. ACM Press.
video image is required to achieve the augmentation effect. [4] W. Consortium. Extensible 3d (X3D), 2011.
Because native device access is not yet possible in HTML, http://www.web3d.org/x3d/specifications/.
a Flash-based marker tracker is used instead. The top right [5] C. Marrin. Webgl specification, 2011.
image shows the simulation of all planets and 100,000 of the https://www.khronos.org/registry/webgl/specs/1.0/.
known 480,000 asteroids of the Solar System. [6] Microsoft. Silverlight, 2011.
http://www.microsoft.com/SILVERLIGHT/.
The two screenshots in the middle are external showcases: [7] A. Systems. Flash, 2011.
the left image shows a GIS application with a floodwater http://www.adobe.com/products/flashplayer.html.