Web XR: Exploring Extended Reality on the Web
Contents
In today’s digital age the way we interact with technology and information is evolving rapidly. One of the latest frontiers in this evolution is Web Extended Reality or WebXR. Can you imagine being able to immerse yourself in virtual worlds, explore augmented environments and experience immersive experiences, all without the need for specialised applications or devices? WebXR makes this and much more possible. In this post we will discuss the basics of WebXR, its potential and some examples of how it is being used to change the way we live, learn, shop and collaborate in the digital world.
What is Web XR
WebXR is a technology that combines Augmented Reality (AR) and Virtual Reality (VR) with the power and accessibility of the web. It is an open specification and standard developed by the World Wide Web Consortium (W3C) that allows creating immersive experiences directly in web browsers, without the need to download additional applications.
In short, WebXR allows users to experience and interact with three-dimensional environments through their compatible devices, such as augmented or virtual reality headsets or glasses, mobile devices and computers. It provides access to sensors and device capabilities such as motion tracking, gesture detection and object recognition, enabling a more immersive and realistic experience.
WebXR technology offers a wide range of practical and creative applications in a variety of fields. From AR e-commerce experiences that allow users to try before they buy, to virtual tours of tourist destinations or remote collaboration in 3D environments, WebXR is revolutionising the way we interact with the digital world.
By harnessing the power of the web, WebXR aims to democratise access to immersive experiences, allowing anyone to enjoy them without the need for specialised hardware or software. It is an exciting technology that promises an increasingly interactive and immersive online future.
Types of Web XR
As this technology evolves, different types of WebXR experiences have been developed to suit different contexts and needs. These are mainly differentiated by the way in which virtual reality and augmented reality are integrated into the web. Below we outline the main types of WebXR and explain how each provides unique and immersive experiences.
- WebXR AR: It should first be noted that the beginnings of augmented reality on the web were through libraries and custom solutions. This is a recent API in browsers that provides a standard and allows direct access to the AR services of the OS (ARcore in Android and ARKit in iOS). Through this direct access and by running the tracking algorithms natively, performance is superior to using tracking libraries running in the browser.Web XR AR combines the virtual world with the real world, superimposing digital elements on the physical environment through a device’s camera. WebXR allows users to view and manipulate virtual objects that integrate with their real environment. From augmented reality product testing for online shopping to interactive instructions and tour guides, Web Augmented Reality (Web AR) offers an innovative way to interact with the world around us.
- WebXR VR: Virtual reality on the web allows users to fully immerse themselves in virtual environments using VR headsets. With WebXR, users can explore and interact with three-dimensional virtual worlds from the comfort of their web browser. This technology provides an immersive experience that can include interaction with virtual objects, characters and simulated environments. From gaming and entertainment to training simulations and architectural visualisation, virtual reality on the web offers unlimited potential for creating immersive experiences.
- MR (Mixed Reality) en la Web: Mixed reality combines elements of the real world and the virtual world, allowing users to interact with physical and virtual objects at the same time. WebXR facilitates the creation of mixed reality experiences on the web, where virtual objects can interact with the physical environment and vice versa. This combination of the real and the virtual provides a new level of interaction and possibilities, from games and productivity applications to educational and collaborative applications.
- Transition between VR and AR: WebXR also enables a seamless transition between virtual reality and augmented reality. This means that users can begin an experience in virtual reality and then move seamlessly into augmented reality. This ability to smoothly transition between the two worlds provides a more immersive and flexible experience, allowing users to enjoy the best of both environments in a single experience.
In short, WebXR offers different types of experiences ranging from immersive virtual reality to augmented reality that integrates with the physical environment. With this constantly evolving technology, we are witnessing a revolution in the way we interact with the web and digital content. These different types of WebXR are transforming education, entertainment, retail and many other industries and bringing the user ever closer to an immersive and highly interactive online experience.
Compatible browsers
WebXR is a constantly evolving technology and its compatibility may vary depending on the browser and version used. The following are the most popular browsers that currently support WebXR:
- Google Chrome: Chrome has been a leading advocate of WebXR and has implemented support for the technology in its most recent versions, so you will need to have the latest version of Chrome installed to enjoy WebXR experiences.
- Mozilla Firefox: Firefox has also implemented WebXR support in its latest versions. As with Chrome, it is important to keep Firefox up to date to ensure optimal WebXR support.
- Microsoft Edge: Microsoft’s Chromium-based browser, Edge, also supports WebXR. As with the other browsers, to take full advantage of this technology make sure you have the latest version installed.
- Meta Quest 3 (formerly Oculus Browser): The browser designed specifically for Meta headsets (the so-called Oculus Quests before they were acquired by Zuckerberg’s company) also support WebXR. If you have a Meta Quest 3, you can access WebXR experiences directly through your web browser. More information on our documentation page.
- Safari: To date Apple has not unlocked access to Web XR from its browser, but at the Apple Worldwide Developers Conference 2023 (WWDC23) it was announced that WebXR will most likely be available as a “developer preview” in Safari 17.
As noted above, it is important to note that WebXR support may vary depending on the browser version and platform used. It is advisable to check for the latest browser updates and compatibility features to ensure an optimal WebXR experience. Also, please note that some lesser-known or older browsers may have limited or no support for WebXR.In this sense, as this technology is not yet supported in all browsers and devices, nor does it have all the functionalities (such as Image-Tracking), Onirix not only supports WebXR, but also offers its own tracking libraries to adapt to the requirements of each experience and device automatically.
Web XR Examples
Below are some examples of sectors and areas where WebXR offers a powerful solution.
- Augmented Reality E-commerce: WebXR is transforming the way we shop online by allowing users to virtually try products before they buy them. For example, Web AR experiences can be created that allow users to view products in 3D and display them in a much more realistic way.
- Marketing, Advertising and AR: More and more brands are using WebXR to create immersive and interactive advertising campaigns. They offer their customers and users engaging AR experiences by allowing them to interact with products and services in a memorable way. This generates remarkable results for brands and differentiates them from their competitors. Here is an example of an AR game as a marketing campaign designed to generate user interaction applicable to any brand, product or gamification dynamic.
- Industrial sector: WebXR is used in job skills training, such as safety instruction, industrial operations and complex processes. Employees can participate in interactive simulations that prepare them for real situations on the job, improving work efficiency and safety, as well as preventing accidents and saving time and resources. Here is an example of an experience you can replicate from a digital twin of a real bottling plant production line and also this industrial plant shown in the video below.
- Interactive Education: WebXR is used in education to provide interactive and immersive learning experiences. Students can explore abstract concepts in science, history and art through interactive 3D experiences, fostering more immersive and memorable learning.
- Architecture, design and construction: WebXR is used in these areas to visualise and explore 3D models of buildings and spaces. Customers can view 3D models of buildings and spaces, interact with designs and even visit real estate properties virtually. This helps decision making as decisions will be more informed prior to actual construction.
- Web XR in Tourism – Virtual Tours: 360° virtual tours allow users to explore real locations in an immersive way. From museum and exhibition tours to visits to popular tourist destinations, WebXR allows users to virtually explore places of interest from the comfort of their home.
These are just a few examples of how WebXR is currently being used and the solutions it offers to different sectors. The technology continues to evolve and its application extends to different industries and fields, opening up new possibilities for interactive and immersive experiences on the web.
SLAM: what is it and how does it fit into Web XR?
SLAM (Simultaneous Localisation and Mapping) is a technology that combines simultaneous localisation and mapping in real time. It is used in augmented reality and virtual reality applications to track and map the physical environment while accurately tracking the position and orientation of the device being used.
Within the context of WebXR, SLAM plays a key role in the implementation of augmented reality experiences on the web. It enables the overlaying of virtual objects accurately and coherently on the user’s physical environment.
When we talk about SLAM in WebXR, we are referring to the ability of supported browsers and devices to track the environment in real time and position and align virtual objects appropriately in relation to the real world. This allows users to view and manipulate virtual objects in their physical environment through their device’s camera.
The SLAM technology in WebXR uses sensors such as cameras, accelerometers and gyroscopes to track the position and orientation of the device. It also uses advanced algorithms to map and recognise features in the physical environment, such as walls, flat surfaces or visual markers.
By integrating SLAM into WebXR, developers can create augmented reality experiences on the web that adapt to the user’s environment, accurately overlaying virtual objects and keeping them anchored to specific locations in the real world.
In short, SLAM is a key technology in WebXR that enables the accurate overlay of virtual objects on the physical world through real-time detection and tracking of the device’s environment and position. This enhances the augmented reality experience on the web by providing a more realistic and consistent interaction with the real world.
