As technology advances, it becomes important to unify different approaches to prevent fragmentation from stopping its growth. During the last few years, web developers have tried to integrate virtual reality experiences on websites, starting in 2016 with the first WebVR API, but leaving aside the important segment of augmented reality, which is why WebXR was born.
WebXR stands for “Extended Reality” for the web, which includes virtual reality and augmented reality, and all other related immersive technologies, such as mobile devices, for which these types of experiences can also be developed. Is the evolution in the exploration of virtual and augmented realities, because it takes advantage of the power of the web together with the unification of these realities, facilitating the creation of immersive and interactive environments, virtual reality tools, and more.
WebXR is a group of standards that are used together to support rendering of 3D scenes on hardware designed to present virtual worlds (virtual reality or VR) or to add graphic images to the real world (augmented reality or AR)
Currently, some WebXR frameworks and APIs have been developed, allowing web developers to create virtual reality or augmented reality applications without having to deal directly with the hardware. The end-user simply needs to use the web browser to start viewing VR / AR content without installing any additional software. On the other hand, developers only have to write the code once and it will work on all devices (Oculus, Vive, HTC, Google Cardboard, etc.)
Trending AR VR Articles:
2. How Augmented Reality (AR) is Reshaping the Food Service Industry
3. ExpiCulture — Developing an Original World-Traveling VR Experience
WebXR Device API
Introduced in 2018, it is an API that implements the core of the WebXR feature set, manages the selection of output devices, renders the 3D scene on the chosen device at the appropriate frame rate, and handles the controller's input.
It is compatible with fully immersive 3D headsets and mobile phones, providing the following key capabilities:
- Find compatible VR or AR output devices
- Render a 3D scene to the device at an appropriate frame rate
- (Optionally) mirror the output to a 2D display
- Create vectors representing the movements of input controls
In short, a scene is presented in 3D by calculating the perspective to apply to the scene to render it from the point of view of each of the user’s eyes. both perspectives are rendered in the same frame buffer, that of the right eye on the right side and that of the left eye on the left side, once this is done, the frame buffer is sent to the WebXR device to be shown to the user.
WebXR Frameworks
Here is a list of some frameworks for WebXR development, Most (if not all) of them implements the WebXR Device API.
Three.js
It is probably the most popular JavaScript rendering library out there. It is completely flexible at a very low level, as the rendering can be customized to do what you want. However, you must be responsible for maintaining the performance of the applications, so that work without any problems even on mobile devices.
Its editor allows to easily assemble the scenes and from many different file formats. This facilitates starting projects quickly but will require coding your interactions in JavaScript later, therefore it is only useful for generating the initial code for your project.
Babylon.js
It is a real-time 3D engine written in JavaScript. It has a quick way to prototype any 3D application and has a great list of examples to represent just about anything. Its flexibility allows you to dive into a very low level and requires you to write your entire application in JavaScript. Therefore it is aimed at experienced programmers that need to customize the rendering.
A-Frame
It is an open-source framework based on Three.js. You can go lower-level in case you need customization with a large number of existing components that can be reused.
A-Frame allows you to configure your scene in HTML. It generates a 3D scene hierarchy and creates custom JavaScript components to modify behavior and interactions. Its inspector allows you to easily edit your scene and see what is generated from it the HTML.
The project size is up to you, A-Frame leaves the optimization of the assets for load times in your hands. It is perfect for simple use cases, and for convenient development, however, it is not recommended for larger projects.
PlayCanvas
PlayCanvas is an open-source 3D game engine, interactive 3D application engine, coupled with a proprietary cloud-hosted authoring platform that enables simultaneous editing from multiple computers through a browser-based interface.
This development platform comes with a completely visual editor. Its graphics rendering is optimized for mobile devices and it looks stunning if configured correctly.
The visual editor makes it easy to assemble scenes, add components, and deploy projects. Also, a built-in code editor allows you to write your custom scripts.
Challenges in WebXR
One of the main challenges for XR experiences to work correctly and be convincing are, to keep a low latency, high precision, and a great capacity to process data quickly to render scenes, animations, and much more. Latency, which refers to the delay in communications between a user’s movement and what they see, has to be as low as possible, to create the illusion of reality. If there is even a slight glitch or alignment problem, it can disrupt the experience or cause nausea.
Another challenge is due to the way the web is currently built. Traditional communication methods, such as Web Sockets, are not fast enough, and browsers can introduce other incremental drops in performance. Large amounts of data for viewing scenes can also exceed the limits of rendering.
Finally, web environments present security problems, due to the need for direct communication between devices, and data transmission.
WebXR Examples
WebXR Room
I recently created this simple application using the WebXR Device API developed by Mozilla on the Unity video game engine. It consists of a room in which you can interact with some objects. You can take a look at it using a virtual reality device, your mobile phone, or simply with your browser.
Hello WebXR
It is a demo for the WebXR Device API, designed as a playground where you can try different experiences and interactions in VR and introduce newcomers to the VR world and its special language smoothly, easily, and nicely.
XR Dinosaurs
Simulates a virtual Dinosaur Park, where dinosaurs can be viewed with a variety of Virtual Reality headsets, Augmented Reality headsets and phones, or directly in the browser.
More Examples
If you are interested and want to know more examples of applications developed with WebXR follow this link.
Conclusion
WebXR is a very recent technology, constantly evolving, and which can change how user experiences are developed from web applications. It is also a very practical technology because of the way it integrates virtual and augmented reality in the browser, which makes it much more accessible and portable. This leads to great challenges, most of them related to hardware, and to how web platforms have developed up to now, which with time and the integration of new technologies will be overcome, making it more valuable and more revealing in the future next years.
References
- WebXR: Everything you need to know
- What is WebXR and Why WebVR is Dead
- WebXR Device API
- Top 5 WebXR Frameworks — Comparison
Don’t forget to give us your 👏 !
A Gentle Introduction To WebXR was originally published in AR/VR Journey: Augmented & Virtual Reality Magazine on Medium, where people are continuing the conversation by highlighting and responding to this story.
PlatoAi. Web3 Reimagined. Data Intelligence Amplified.
Click here to access.
