Debugging an XML3D scene that uses our proposed CSS integration model. It is now possible to change, add or remove material parameters right within the well-known debugging facilities of today's browsers (here: Mozilla Firefox)
  • 11 Jun 2015: Website launched
  • 12 Jun 2015: Preprint available (see Downloads)
  • 20 Jun 2015: Published Version available (see Downloads)
  • 20 Jun 2015: Web3D Presentation available (see Presentation)

Declarative 3D (Dec3D) implementations, most notably XML3D and X3DOM, have enabled a seamless integration of 3D and 2D content on the same web page. Yet one of the major web technologies, Cascading Style Sheets (CSS), has not been integrated. The usage of CSS for 3D content has always been envisaged but never fully approached, because only polyfills for declarative 3D implementations exist and only recent developments have made custom CSS properties available.

In this paper we will present a deep integration and adaption of CSS for Dec3D content and, hence, provide the final component necessary to fully integrate 3D content into the web technology stack. Our integration model allows for appearance definitions, such as visibility and materials, at a novel level of expressiveness. CSS-Selectors, inheritance, as well as media types provide unique means to change a scene's final appearance in a flexible and powerful way. Using CSS, it is possible to define the appearance of a 3D object dependent on the DOM hierarchy position or the screen resolution and orientation without a single line of JavaScript. The integration of CSS further enables the use of browser debugging facilities that have not been usable before. Because the requirements of 3D content are different compared to those of 2D content, we will point out existing limitations and necessary future additions to improve the interoperability of CSS with 3D content.

@inproceedings{Sutter2015,
    author = {Sutter, Jan and Sons, Kristian and Slusallek, Philipp},
    title = {{A CSS Integration Model for Declarative 3D}},
    booktitle = {Proceedings of the 20th International Conference on 3D Web Technologies},
    series = {Web3D '15},
    year = {2015},
    pages = {209--217},
    url = {http://doi.acm.org/10.1145/2775292.2775295},
    doi = {10.1145/2775292.2775295},
}
The research leading to these results was supported by the Intel Visual Computing Institute and has received funding from the European Union's Seventh Framework Programme projects FI-CONTENT2 (#603662), FI-CORE (#632893), FITMAN (#604674), the European Union's H2020 Framework Programme project CIMPLEX (#641191).