Extended Reality
Extended Reality (XR) is an umbrella term that encompasses a wide range of immersive technologies that blend the physical and virtual worlds. It is used to describe the combination of virtual reality (VR), augmented reality (AR), and mixed reality (MR). These technologies allow users to interact with and experience both real and digitally created environments in ways that were previously unimaginable.
WebXR
WebXR (Web Extended Reality) is a JavaScript API that enables web developers to create immersive virtual reality (VR), augmented reality (AR) and mixed reality (MR) experiences directly within web browsers. It provides a unified interface to access both VR and AR hardware, allowing developers to build cross-platform immersive applications that work on a wide range of devices such as VR headsets, AR glasses, and mobile devices.
Babylon.js integrates WebXR support to enable developers to build interactive VR and AR experiences in a 3D environment directly in the browser. Reactylon wraps this support offering a simplified React-friendly interface and reducing the boilerplate.
The simplest way to get started is using a WebXR-enabled browser and using the prop xrDefaultExperienceOptions of Scene component:
<Scene xrDefaultExperienceOptions={{}} />xrDefaultExperienceOptions can be an empty object (to enable the default XR experience) or, more commonly, a WebXRDefaultExperienceOptions object. These options provide configuration for most XR features and can also be further customized through the Session Manager. The Session Manager is responsible for managing the XR session lifecycle and controlling various settings during the XR experience. Detailed explanations of each feature and how to configure them will be covered in the following sections of the documentation.
If the initialization is successful, the following icon will appear in the bottom-right corner:
By clicking on the icon, you can enter the immersive mode.
To enter the immersive mode in Babylon.js, it is required to use HTTPS. This is because many modern browsers enforce stricter security policies for features like immersive mode (WebXR) to ensure a safe and secure user experience.
All immersive examples presented in the following pages can be tested using an XR device (such as a mobile or headset, depending on the specific use case). For convenience, each example is also accompanied by a video captured directly from the XR device.
Learn More
For more detailed information on how Babylon.js handles WebXR, please refer to the Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/webXR/introToWebXR/.
