DOM2AFrame: Putting the Web back in WebVR

Abstract

As the Virtual Reality (VR) market continues to grow, so does the need for high-quality experiences. In order to unlock the wide pool of existing web-based content, common and more specialized web browsers allow users to visit existing web pages in VR. Additionally, the latest version of the WebVR [24] standard facilitates the integration of custom 3D/VR content in a web page. Sadly, both options consciously exclude the use of standard 2D web technology (such as HTML and CSS) in other common use cases, such as creating a highly interactive 2D UI for a 3D/VR game. Consequently, web developers wanting to use WebVR are required to learn an entirely new skill set to create VR experiences. This work surveys and explores workaround options for rendering 2D HTML/CSS/JavaScript-based content in WebVR. We find that existing methods are often too slow to allow for a highly interactive experience. We introduce DOM2AFrame, a new framework that couples 2D page elements directly to their equivalent 3D counterparts (using the A-Frame library [2]) to allow for smooth updating, animation and user interaction at frame rates close to 60 FPS on modern hardware. Two case studies validate our approach and show its potential for rendering 2D web content in VR.