The WebXR API is on the verge of revolutionizing the way we build WebAR (web-based augmented reality) applications, bringing significant advances and opportunities to the world of browser-based AR development. Here's a brief explanation of why the WebXR API will change the WebAR landscape:
In the past, you had three options when creating WebAR content:
- Use an open source WebAR solution
Open source WebAR solutions like AR.js unfortunately cannot keep up with paid solutions in terms of tracking quality and the variety of functions. 3D objects that are to be located in the world with a marker are updated in their position and size with a clearly noticeable latency. The result appears jerky. Furthermore, one is very limited in the design of the image markers that are tracked. The markers look a bit like some kind of QR code. With a thick black border around the outside. Overall, the quality of the augmented reality experience with AR.js is, in our opinion, not suitable for use in professional customer projects. - Use a paid WebAR framework
Paid frameworks one offer a variety of features, depending on the framework chosen. Some of the most relevant frameworks are 8th Wall, Zapworks, Blippar and MyWebAR. The price of a license for such a WebAR solution, can be over 500 € per month and is not suitable for projects with a small budget. These frameworks offer some no-code solutions to simplify content development. Furthermore, they also offer a variety of different tracking features such as face tracking, marker or markerless tracking. The features and tracking quality differs between the WebAR frameworks. It is a good idea to test each framework yourself before making a decision. Actually each of these WebAR frameworks offers the possibility to use a free trial license for a limited period of time for evaluation. - On the other hand, you could use the Google Model Viewer use The Model Viewer allows you to view a 3D model created in GLTF/GLB and USDZ format for iOS was converted into augmented reality. Since this framework uses the hardware acceleration of the mobile device, the performance is great. Another plus is that the model viewer is quite easy to embed in HTMl and also runs cleanly on desktop PCs. However, not in augmented reality but only on the screen. AR with Model Viewer allows the use of surface recognition as it is possible in iOS and Android apps via ARkit and ARCore. The downside is that Model Viewer has almost no options for implementing interactions. So you are limited to playing animations baked into the 3d model or changing positions and scaling and rotating your 3d model by the user in real time. The Modelviewer is suitable as a WebAR tool for Ecommerce, but it is the wrong tool for storytelling in AR. If you only want to show a model with limited animation and interaction, the Modelviewer is the right tool.
Soon the WebXR API will be on every mobile device
For this reason, a high-performance alternative to the above options for generating WebAR content will soon be available.
Why aren't we using WebXR right now?
The answer is simple: it is not yet supported by iOS Safari browser. Here is the compatibility table. But that is likely to change soon, because the Apple Vision Pro Headset supports WebXR. Therefore, it is very likely that iOS devices will also support this api in the future to ensure compatibility with Apple's VR device.
Once that happens, WebAR framework vendors will have to come up with some interesting offerings to remain relevant. After all, most of these paid WebAR frameworks are more or less a workaround to enable features like area detection and face recognition in browsers without relying on the built-in sensors of the respective device.
WebXR doesn't need this workaround because it already has access to the device's sensors, and that comes with a significant performance boost in tracking. After all, performance is the key to creating exciting 3D graphics in WebAR. If the tracking is not convincing or too slow, the whole illusion of virtual objects being displayed in the real world breaks down.
Let's take a closer look at WebXR.
Creating augmented reality (AR) applications for mobile devices with the WebXR API
Introduction to the WebXR API:
Browser-based Augmented Reality (AR) also called WebAR has gained tremendous popularity and allows us to interact with 3D content on web pages in new ways. With the advent of the WebXR API, developers now have the ability to create AR applications directly for mobile devices using web technologies. In this post, we explore the process of building WebAR applications for mobile devices using the WebXR API and highlight its key features and capabilities.
Understanding the WebXR API:
The WebXR API is a powerful JavaScript API that enables developers to create immersive experiences, including augmented reality and virtual reality, directly in web browsers. In AR development for mobile devices, the WebXR API provides a standardized framework for accessing device sensors, rendering 3D graphics, and handling user interactions. It abstracts away the complexities of device-specific implementations and allows developers to focus on creating AR experiences that work seamlessly across platforms.
Device and browser support:
Before you start AR development with the WebXR API, it is important to consider device and browser support. Currently, major mobile browsers such as Chrome, Firefox, and Safari offer varying degrees of WebXR support. Ensure that your target devices and browsers are compatible with the WebXR API to ensure broad reach for your AR application.
Access to device sensors:
The WebXR API allows developers to access mobile device sensors, including accelerometers, gyroscopes, magnetometers, and cameras. These sensors provide critical data for creating immersive AR experiences. With the WebXR API, you can access sensor data to track device motion and orientation, implement gesture-based interactions, and integrate real-world input into your AR application.
Creation of 3D graphics and overlays:
AR applications are based on visually appealing 3D graphics and overlays that seamlessly connect virtual content with the real environment. The WebXR API provides capabilities for rendering 3D graphics using WebGL, a web-based graphics rendering technology. You can create and manipulate 3D objects, apply textures and materials, and include animations in your AR application. In addition, the WebXR API enables precise placement of virtual objects in the real world through spatial mapping and anchor-based positioning.
User interactions and input handling:
User interactions play a critical role in AR experiences. The WebXR API enables developers to process user inputs such as touch events, gestures, and spatial tracking. By leveraging these input capabilities, you can implement intuitive controls that enable object manipulation and trigger events based on user interactions. This fosters immersive and interactive AR experiences that respond to user actions in real time.
Performance Optimization:
As with any web-based application, performance optimization is critical to delivering fluid and responsive AR experiences. The WebXR API provides mechanisms for efficient rendering, such as leveraging web workers for parallel processing, optimizing asset loading, and implementing occlusion culling to improve performance. Careful consideration of performance optimizations is critical to ensure that your AR application runs seamlessly on mobile devices.
Conclusion:
Developing augmented reality applications for mobile devices using the WebXR API opens up exciting new and cost-effective opportunities for developers. With access to device sensors, the ability to create 3D graphics and overlays, handling user interactions, and optimizing performance, the WebXR API enables developers to create immersive and interactive AR experiences that run directly in web browsers. As the WebXR API continues to evolve and gain wider adoption, it will further shape the future of AR development and enable a broader range of mobile devices to deliver engaging AR experiences.
