WebXR: Potential and challenges with AR/VR on the web

Project overview

This project examines the integration of immersive technologies — Virtual Reality (VR), Augmented Reality (AR), Mixed Reality (MR), and Extended Reality (XR) — into web platforms. It defines these realities and explores the WebXR specification by the World Wide Web Consortium (W3C), which enables the development of XR applications accessible via web browsers. Key frameworks like A-Frame and three.js are analyzed, and a prototype for smartphones is developed to demonstrate AR and VR functionalities. This prototype consists of an AR Gallery that shows paintings that can be interacted with. The thesis concludes by discussing the potentials of WebXR in enhancing accessibility and user engagement, alongside challenges such as performance and device compatibility.

Implementing an AR Gallery

Within my bachelor’s thesis, I developed an augmented reality (AR) gallery through implementing a web application that leverages WebXR functionality. For this project, I utilized A-Frame, a framework designed for creating immersive experiences with HTML and JavaScript. Users can immerse themselves in the AR environment and explore paintings as if they were in a physical gallery. When a user interacts with a painting, it becomes the focal point, displaying additional information and interesting facts about the artwork.

Learning Agenda

Background

In the last few years the integration of different technologies in our everyday life has accelerated. Immersive technologies such as Augmented Reality (AR) and Virtual Reality (VR) have been gaining importance in recent years and continue to gain in popularity. Those technologies open up possibilities for interacting with the world and information that surrounds us. The amount of research being made in this field indicates that those technologies might at some point be integrated into our daily routine, especially our work life.

Development Process

The Art Gallery Application was developed using A-Frame, a web framework built on top of three.js that simplifies the creation of immersive experiences for the web. The goal was to create a virtual art gallery that users could explore in both AR and VR using just a web browser.

Setup

A-Frame was chosen for its ease of integration with HTML, making it suitable for developing WebXR experiences. The application was hosted on a web server with SSL certification to ensure proper functioning of WebXR across devices.

Scene Creation

The core of the gallery was built using A-Frame’s entity-component system. A main element was defined to manage the 3D space, containing multiple a-entity elements that represented the paintings. Each painting entity was configured with attributes like position, rotation, and scale to arrange them within a virtual environment.

Interaction

Interactivity was introduced using JavaScript components. A cursor was added to allow users to select and interact with gallery elements. When a painting was clicked, additional information, like the painting’s title and description, was displayed. Hover effects and animations were implemented to enhance the user experience, such as scaling images when selected.

AR and VR Modes

The application supported both AR and VR modes. Users could switch between these modes by pressing corresponding buttons. In AR mode, the gallery appeared in the real world via the smartphone's camera, allowing users to place and view artworks within their physical environment. In VR mode, users were fully immersed in a virtual gallery space, moving around and viewing the artworks.

Optimization

Testing was done primarily on Android smartphones for AR functionality, and VR compatibility was ensured for devices like Oculus headsets. Browser compatibility was a challenge, and the application was fine-tuned to perform well on browsers supporting WebXR.

Result

The prototype effectively showcases the potential of WebXR to bring immersive experiences to a wider audience through simple browser access. WebXR provides a low-barrier way for users to experience AR/VR without requiring complex setups or installations.

Key Learnings:

• Performance limitations on certain browsers and devices present a challenge for WebXR applications, but ongoing updates and browser support are improving this.
• WebXR holds vast potential for industries like e-commerce, marketing, and education, making immersive experiences more accessible without requiring dedicated apps.

Conclusion

WebXR is still in its early stages, but its promise of accessible, browser-based AR/VR experiences offers great potential for the future of web development. My research and prototypes demonstrate that WebXR can simplify immersive technology experiences, making them available to anyone with a browser-capable device.