Jan Sutter
Philipp Slusallek
ABSTRACT
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.
- Behr, J., Eschler, P., Jung, Y., and Zöllner, M. 2009. X3DOM: A DOM-based HTML5/X3D Integration Model. In Proceedings of the 14th International Conference on 3D Web Technology, ACM, New York, NY, USA, Web3D '09, 127--135. Google Scholar
Digital Library
- Behr, J., Jung, Y., Drevensek, T., and Aderhold, A. 2011. Dynamic and Interactive Aspects of X3DOM. In Proceedings of the 16th International Conference on 3D Web Technology, ACM, New York, NY, USA, Web3D '11, 81--87. Google ScholarDigital Library
- Jankowski, J., Ressler, S., Sons, K., Jung, Y., Behr, J., and Slusallek, P. 2013. Declarative Integration of Interactive 3D Graphics into the World-Wide Web: Principles, Current Approaches, and Research Agenda. In Proceedings of the 18th International Conference on 3D Web Technology, ACM, New York, NY, USA, Web3D '13, 39--45. Google ScholarDigital Library
- Khronos, 2011. WebGL Specification Version 1.0, Khronos Specification. https://www.khronos.org/registry/webgl/specs/1.0.0/, Feb.Google Scholar
- Klein, F., Sons, K., Rubinstein, D., Byelozyorov, S., John, S., and Slusallek, P. 2012. Xflow - Declarative Data Processing for the Web. In Proceedings of the 17th International Conference on 3D Web Technology, ACM, New York, NY, USA, Web3D '12, 37--46. Google ScholarDigital Library
- Klein, F., Spieldenner, T., Sons, K., And Slusallek, P. 2014. Configurable Instances of 3D Models for Declarative 3D in the Web. In Proceedings of the Nineteenth International ACM Conference on 3D Web Technologies, ACM, New York, NY, USA, Web3D '14, 71--79. Google ScholarDigital Library
- Limper, M., Jung, Y., Behr, J., and Alexa, M. 2013. The POP Buffer: Rapid Progressive Clustering by Geometry Quantization. Computer Graphics Forum 32, 7, 197--206.Google ScholarCross Ref
- Schwenk, K., Jung, Y., Behr, J., and Fellner, D. W. 2010. A Modern Declarative Surface Shader for X3D. In Proceedings of the 15th International Conference on Web 3D Technology, ACM, New York, NY, USA, Web3D '10, 7--16. Google ScholarDigital Library
- Sons, K., Klein, F., Rubinstein, D., Byelozyorov, S., and Slusallek, P. 2010. XML3D: Interactive 3D Graphics for the Web. In Proceedings of the 15th International Conference on Web 3D Technology, ACM, New York, NY, USA, Web3D '10, 175--184. Google ScholarDigital Library
- Sons, K., Schlinkmann, C., Klein, F., Rubinstein, D., and Slusallek, P. 2013. xml3d.js: Architecture of a Polyfill Implementation of XML3D. In Proceedings of the 6th Workshop on Software Engineering and Architectures for Realtime Interactive Systems, IEEE, New York, NY, USA, SEARIS '13, 17--24.Google Scholar
- Sons, K., Klein, F., Sutter, J., and Slusallek, P. 2014. shade.js: Adaptive Material Descriptions. Computer Graphics Forum 33, 7 (Oct.), 51--60. Google ScholarDigital Library
- Sutter, J., Sons, K., and Slusallek, P. 2014. Blast: A Binary Large Structured Transmission Format for the Web. In Proceedings of the Nineteenth International ACM Conference on 3D Web Technologies, ACM, New York, NY, USA, Web3D '14, 45--52. Google ScholarDigital Library
- W3C, 2011. Scalable Vector Graphics (SVG) 1.1 (Second Edition), W3C Recommendation (work in progress). http://www.w3.org/TR/2011/REC-SVG11-20110816/, Aug.Google Scholar
- W3C, 2011. Selectors Level 3, W3C Recommendation (work in progress). http://www.w3.org/TR/2011/REC-css3-selectors-20110929/, Sept.Google Scholar
- W3C, 2012. Media Queries, W3C Recommendation (work in progress). http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/, June.Google Scholar
- W3C, 2013. CSS Conditional Rules Module Level 3, W3C Candidate Recommendation (work in progress). http://www.w3.org/TR/2013/CR-css3-conditional-20130404/, Apr.Google Scholar
- W3C, 2013. CSS Transforms Module Level 1, W3C Working Draft (work in progress). http://www.w3.org/TR/2013/WD-csstransforms-1-20131126/, Nov.Google Scholar
- W3C, 2013. Filter Effects Module Level 1, W3C Working Draft (work in progress). http://www.w3.org/TR/2013/WDfilter-effects-1-20131126/, Nov.Google Scholar
- W3C, 2014. CSS Custom Properties for Cascading Variables Module Level 1, W3C Last Call Working Draft (work in progress). http://www.w3.org/TR/2014/WD-css-variables-1-20140506/, May.Google Scholar
- W3C, 2014. Custom Elements, W3C Working Draft (work in progress). http://www.w3.org/TR/2014/WD-custom-elements-20141216/, Dec.Google Scholar
- W3C, 2014. Media Queries Level 4, W3C Working Draft (work in progress). http://www.w3.org/TR/2014/WD-mediaqueries-4-20140605/, June.Google Scholar
- W3C, 2014. Shadow DOM, W3C Working Draft (work in progress). http://www.w3.org/TR/2014/WD-shadow-dom-20140617/, June.Google Scholar
Index Terms
- A CSS integration model for declarative 3D
Recommendations
XML3D: interactive 3D graphics for the web
Web3D '10: Proceedings of the 15th International Conference on Web 3D TechnologyWeb technologies provide the basis to distribute digital information worldwide and in realtime but they have also established the Web as a ubiquitous application platform. The Web evolved from simple text data to include advanced layout, images, audio, ...
Comments