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.