WebXR Api the future of augmented reality in the browser

Without WebAR, you have three options when creating WebAR content:

1. 1. 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.

1. 1. 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 for 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. They also offer a variety of different tracking functions such as face tracking, markers or markerless tracking. The features and tracking quality differ between the WebAR frameworks. It is advisable to carry out your own tests with the respective framework before making a decision. Actually each of these WebAR frameworks offers the possibility to use a free test license for a limited period of time for evaluation. However, the WebXR Api is clearly superior to all these frameworks in terms of performance, as the video above shows.

1. 1. 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.

Will the WebXR API be available on every mobile device?

It is likely that the WebXR API will be available on more and more mobile devices in the future. The technology is still relatively new, but it has the potential to fundamentally change the way we interact with the web. As more and more devices integrate AR and VR features, the demand for WebXR-enabled apps and experiences will increase.

WebXR on iPhone? No way!

Although Apple's AR headset Apple Vision Pro supports WebXR, there is currently no native support on iPhones and iPads. Developers have to use expensive WebAR frameworks, which also perform less well. It remains to be seen whether Apple will add WebXR for iOS.

Apple has not yet announced native WebXR support for iOS. However, there are some experimental features in Safari that offer WebXR-like functionality. It is possible that Apple will add native WebXR support for iOS in the future, but this has not yet been confirmed.

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.
Once Apple fully supports WebXR, WebAR framework providers will have to come up with some interesting offerings to stay relevant. This is because most of these paid WebAR frameworks are more or less a workaround to enable functions such as area recognition and facial recognition in browsers without having to rely 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 via the WebXR API opens up exciting new and cost-effective possibilities 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 continue to shape the future of AR development and enable a wider range of mobile devices to deliver immersive AR experiences. But unfortunately the present looks like we still have to rely on paid farmworks like ZapWorks or Blippar to create iOs executable WebAR content.