=Paper=
{{Paper
|id=None
|storemode=property
|title=XML3D - Interactive 3D Graphics for the Web
|pdfUrl=https://ceur-ws.org/Vol-869/Dec3D2012_02.pdf
|volume=Vol-869
|dblpUrl=https://dblp.org/rec/conf/www/SonsS12
}}
==XML3D - Interactive 3D Graphics for the Web==
https://ceur-ws.org/Vol-869/Dec3D2012_02.pdf
Demo: XML3D – Interactive 3D Graphics for the Web
Kristian Sons Philipp Slusallek
DFKI DFKI
Saarbrücken, Germany Saarbrücken, Germany
ABSTRACT Web Technologies such as HTML, DOM and CSS was au-
XML3D is a extension to HTML5 to support interactive 3D tonomous. Thus X3D comes with its own run-time and event
graphics in the Browser. XML3D is designed to integrate model and includes concepts unknown in the DOM/HTML
and inter-operate well with ubiquitous W3C standards such world. A possible approach to these problems is to stream-
as DOM, CSS, and others. Embedding XML3D into this line X3D and to extend it with features such as event at-
family of standards brings many benefits: It allows millions tributes and CSS. This has been shown in [1].
of exiting web programmers to directly apply their existing
knowledge also to interactive 3D graphics. The XML3D The pervasiveness of HTML, CSS and DOM technologies
proposal and its implementations serve as a demonstrator is much higher than for any 3D graphics format. That’s
platform for the W3C Community Group ”Declarative 3D the main reason why we rated the compatibility to HTML
for the Web Architecture”. In this demo description, we and CSS higher than backwards compatibility to a specific
present a selection of features of XML3D, that demonstrate existing format.
the advantages of a web-based declarative approach to 3D
graphics. Recently two low-level graphics APIs for the Web popped
up, namely WebGL and Stage3D, which provide a wide
Categories and Subject Descriptors spread of 3D capabilities in the Browser. However, opposed
to a declarative approach, it’s not possible to develop 3D web
I.3.6 [Methodology and Techniques]: Standards—Lan-
application without a basic understanding of the rasteriza-
guages; I.3.7 [Computer Graphics]: Three-Dimensional
tion pipeline. In our demos we want to show the similarity
Graphics and Realism—Virtual Reality
in developing a XML3D enhanced web application compared
to standard web development.
Keywords
HTML5, CSS3, XML3D, WebGL, DOM, Web Integration
2. DEMOS
In the following section we will describe a selection of demos
1. INTRODUCTION that demonstrate the capabilities of XML3D. The focus for
Within the proposed demo we would like to demonstrate the selection was integration into HTML, interaction meth-
XML3D [3] and the XML3D implementations. In all demos, ods, debugging of 3D scenes and building Mash-ups. The
the 3D scene description is embedded inside an XHTML web demos are online at http://www.xml3d.org/.
page and thus available in the DOM. This means, the scene
is fully modifiable through the DOM. All interaction with
the scene are performed using DOM manipulation, DOM 2.1 Integration and Interaction
Events and JavaScript. The first simple demo is a XML3D scene integrated into a
HTML5 web page. It shows a Rubik’s cube (s. Figure 1).
An important design question is why we decided to design a The 3D geometry is described using the XML3D format. It
new description rather than using an existing format. Only was exported from a 3D modeling application. To integrate
few platform and rendering independent 3D description ex- this XML3D export into a web page, the web author has just
ist. The probably most well-known is X3D, the succes- to copy the content into an exiting web page. To add inter-
sor of VRML. Though there is an integration model into action to this scene, the author can e.g. add onmouseover
HTML via plug-ins, the development of VRML/X3D and and onmouseout event attributes to the groups or meshes in
the scene and execute some arbitrary JavaScript code. The
example shows highlighting of the faces changing material
attributes. The faces are also configured with onclick at-
tributes. If the users clicks on a face of the cube, a direction
selection widget is made visible and positioned in the right
place. Then again, this widgets has event listeners to finally
start rotating one layer of the cube via an animation.
Copyright c 2012 for the individual papers by the papers’ authors. Copy-
ing permitted only for private and academic purposes. This volume is pub-
lished and copyrighted by its editors. All these actions are simple DOM manipulation tasks and do
Dec3D2012 workshop at WWW2012, Lyon, France not require a deep understanding of the 3D graphics pipeline,
Figure 1: Interactive Rubik’s cube embedded in HTML (left), 3D world map displaying data from the World
Bank database (middle), and debugging a 3D scene using standard web development tools (right).
shaders etc. The DOM manipulations tasks can even be service to visualize data from external sources. Each coun-
simplified using libraries such as jQuery. This demo uses try in the 3D world map is named by it’s ISO country code.
the JS/WebGL implementation of XML3D and runs in every The user can get the full English country name by hover-
WebGL-capable Browser. ing over the country, again using simple onmouseover and
onmouseout events in combination with jQuery UI pop-ups.
2.2 Rendering independence and Debugging
The user can select a topic, an indicator and a time range
of scenes from three selection menus. These menus are populated dy-
The second demo shows three aspects of XML3D: At first, namically by querying the World Bank database for available
XML3D is not tied to a certain graphics API. For the demo, data sets. Once the user has selected a data set, the World
we use our native XML3D implementation, a modified ver- Bank is queried for the data sets for all available countries.
sion of the Chromium Browser that supports OpenGL ren- The result is displayed by adapting the height of the coun-
dering as well as real-time ray tracing to display the inter- tries and their color.
active Virtual Museum scene.
Information visualization is a good use-case for declarative
Debugging of 3D scenes is still a major issue in all visualiza- 3D. Often, no real, but pseudo-3D is required for a good
tion systems. In the native implementations of XML3D, we representation of the data. But the development of such
can use the development tools that come with the Browser visualizations is often easier using real 3D data, because
to debug the scene. We use the Inspector to select an object then the projection to 2D is automatically correct.
in the 3D scene and the inspector highlights the represen-
tation in the DOM. It also possible can (de)activate CSS In this simple demo, the XML3D elements in the DOM are
assignments interactively. Web developers can debug their hard-wired with the database entries from the World Bank
3D web application using the tools they already know from using the ISO country codes. Imagine using RDFa to anno-
standard web development. Again, this is possible because tate the geometry representation of the countries. Combin-
XML3D is integrated so tight into HTML and and related ing semantic Web technologies and semantic services with
technologies. XML3D has already been done in ISReal [2].
2.3 Drag and drop and Textures from cross- 3. REFERENCES
domains [1] Johannes Behr, Peter Eschler, Yvonne Jung, and
In the same demo scene, we show that drag and drop is Michael Zöllner. X3DOM: a DOM-based HTML5/X3D
supported in XML3D. The usage is in the same way as integration model. In Proceedings of the 14th
web developer know it from standard HTML elements. We International Conference on 3D Web Technology,
show this by dropping an image from a Google Image Search Web3D ’09, pages 127–135, New York, NY, USA, 2009.
onto a XML3D group with an ondrop event attribute. This ACM.
changes the texture used by the assigned shader. [2] Patrick Kapahnke, Pascal Liedtke, Stefan Nesbigall,
Stefan Warwas, and Matthias Klusch. ISReal: An open
This action shows another feature of declarative approaches: platform for semantic-based 3D simulations in the 3D
We have the possibility to use predefined materials. This dis- Internet. In Proceedings of the 9th international
ables the possibility to read the foreign image from a script semantic web conference on The semantic web -
using a timing attack. This is an advantage compared to Volume Part II, ISWC’10, pages 161–176, Berlin,
imperative approaches such as WebGL, disallowing usage Heidelberg, 2010. Springer-Verlag.
of cross-domain elements as textures respectively requires [3] Kristian Sons, Felix Klein, Dmitri Rubinstein, Sergiy
CORS approval. Byelozyorov, and Philipp Slusallek. XML3D:
Interactive 3D Graphics for the Web. In Proceedings of
2.4 Mash-ups and Semantics the 15th International Conference on Web 3D
The third demo shows, how HTML, XML3D, and XML- Technology, Web3D ’10, pages 175–184, New York, NY,
HttpRequest are used in combination with a RESTful web USA, 2010. ACM.