WebXR: The Next Generation Web Experience

WebXR: The Next Generation Web Experience

In the previous article, we gained an understanding of what spatial computing is and how it works. In this second part of our series "Transforming Industries Through Immersive Technologies," we look at how the web is set to use immersive experiences through WebXR, which integrates VR and AR with the web, offering new possibilities for users and developers. WebXR represents a significant evolution from traditional web experiences by making digital content not just something you view but the experience. As hardware becomes more accessible and development techniques improve, WebXR is set to redefine the possibilities of the web, offering more dynamic, engaging, and immersive experiences.

Fig 1: A WebXR experience that redefines the traditional art gallery concept (Image: Iconic Mints)

What is WebXR in a nutshell?

WebXR is a broader term that refers to the entire ecosystem of standards and technologies enabling virtual reality (VR) and augmented reality (AR) experiences on the web. It is designed to help web developers create immersive experiences that can be accessed through a compatible web browser, eliminating the need for specialized software applications.

Why use WebXR

WebXR enables the creation of VR and AR experiences directly accessible through web browsers, eliminating the need for users to download specific apps. This accessibility reduces entry barriers and allows users on various devices, including smartphones, tablets, and desktops, to access immersive experiences. WebXR's cross-platform capability means developers can create a single application that works consistently across different operating systems and devices without needing separate versions for each ecosystem. Additionally, WebXR integrates well with standard web technologies like HTML, CSS, and JavaScript, enabling developers to use their existing skills to incorporate VR and AR elements into web applications efficiently.

How WebXR Works

The WebXR Device API, a standard provided by browsers, enables developers to access spatial web app features, such as tracking head, hand, or controller positions, and display content on XR devices using JavaScript. This API facilitates communication between a developer’s XR content and a user’s web browser. While WebXR manages the timing and viewpoints for scene presentation, it does not handle the management or rendering of 3D data. Developers are responsible for these tasks, including model loading, rendering, and texturing. They can utilize WebGL and WebGPU, which allow for rendering 3D graphics within browsers without the need for additional plugins. Additionally, sensor APIs are used for spatial tracking, and JavaScript is employed for handling user inputs and integrating with other web technologies. Optimization techniques are also applied to enhance accessibility and performance. Frameworks like three.js help simplify the complexities involved in managing and rendering 3D graphics.

Fig 2: Architecture and Layers of a Web-Based XR Application

Which devices support WebXR?

WebXR is supported on a wide range of devices, enabling both VR (Virtual Reality) and AR (Augmented Reality) experiences. Here are the primary types of devices that support WebXR:

Standalone VR Headsets
These devices, such as the Oculus Quest series, have built-in computing power and sensors, allowing them to run WebXR experiences directly. Users can access VR content through built-in browsers like Oculus Browser.

Fig 3: Oculus Browser

Smartphones and Tablets
Many modern smartphones and tablets support WebXR, particularly those with AR capabilities enabled by technologies like ARKit (iOS) and ARCore (Android). Users can access AR content through mobile web browsers like Safari, Chrome, or Firefox.

Desktops and Laptops
While not typically used for AR experiences, desktops and laptops can still support WebXR for VR content. Users can experience VR by connecting compatible VR headsets or using certain mixed-reality setups that integrate 3D content into the desktop environment.

What is OpenXR?

OpenXR is an open standard developed by the Khronos Group, aimed at providing a unified interface for virtual reality (VR) and augmented reality (AR) hardware and software. The primary goal of OpenXR is to create a single, open API (Application Programming Interface) that allows developers to write once and run across a wide range of XR (Extended Reality) devices and platforms without needing to adapt their applications for each specific system.

Immersive Stream for XR | Google

Google Cloud's Immersive Stream for XR is a service that hosts, renders, and streams 3D and XR (Extended Reality) experiences directly to users without the need for app downloads. It offers immersive, interactive, and photorealistic experiences accessible on any device, allowing creators to develop content once and deploy it universally. This platform is designed to provide seamless, high-quality XR experiences, enhancing user engagement through rich visual content delivered via the cloud.

Example project: This interactive showcase elegantly presents the Volkswagen ID. Buzz, allowing users to experience its features and design directly through their browser. No app download is required, simplifying access and enhancing user convenience as they explore various customization options for the new electric minivan.

Volkswagen ID. Buzz

Future of WebXR

Increased Adoption and Accessibility
As WebXR becomes more mature and widely supported, it's likely that more devices and browsers will adopt the standard. This broader adoption will make immersive experiences more accessible to a wider audience, reducing the need for specialized hardware and enabling more people to engage with VR and AR content directly through their web browsers.

Enhanced Graphics and Performance
WebGPU, a more advanced graphics API, is expected to complement or even surpass WebGL in the future, providing better performance and richer graphics capabilities. This will allow for more detailed and complex 3D scenes, higher frame rates, and more responsive experiences.

Evolution of User Interfaces
The future of WebXR will likely see the evolution of more intuitive and natural user interfaces. This includes advancements in gesture recognition, eye tracking, voice control, and haptic feedback, making interactions more immersive and user-friendly.

Conclusion

WebXR is transforming the way we enjoy immersive technologies on the web. By providing a unified platform for VR and AR experiences, WebXR enables developers to create engaging and interactive content accessible directly through web browsers. It supports a wide range of devices, from VR headsets to smartphones and desktops, making immersive experiences more accessible than ever. As technology advances, the future of WebXR looks promising, with improvements in graphics, hardware, and broader adoption across industries. This evolution will continue to expand the possibilities of immersive web experiences, making them a vital part of the digital space.

Resources and references:

Fundamentals of WebXR - Web APIs | MDN
WebXR
WebXR Device API
WebXR Device API Explained
OpenXR Overview - The Khronos Group Inc
"webxr" | Can I use... Support tables for HTML5, CSS3, etc
Sensors for the web | Capabilities | Chrome for Developers
WWDC24: Build immersive web experiences with WebXR | Apple
3D, VR and AR on the web (Chrome Dev Summit 2019)
Building Mixed Reality Experiences with WebXR
Immersive Stream for XR | Google Cloud
No app needed: How Volkswagen developed and delivered immersive experience
A Kapuruge
Software Engineer
Series: Transforming Industries Through Immersive Technologies
01
Is Spatial Computing the Next Big Thing?
Is Spatial Computing the Next Big Thing?
read in -10 min
16 July 2024
02
WebXR: The Next Generation Web Experience
WebXR: The Next Generation Web Experience
read in 5 min
01 August 2024
"CODIMITE" Would Like To Send You Notifications
Our notifications keep you updated with the latest articles and news. Would you like to receive these notifications and stay connected ?
Not Now
Yes Please