In the common understanding, WebAR is the sum of all AR technologies available simply within a web browser, without installation of an app. Actually, in order to obtain a full WebAR experience, comparable to the one achievable with a dedicated application, we would need to have a possibility to:
AR model viewers, similarly to 2D viewers (like Preview on Mac), simply allow users to open a single file with no interaction or UI. Currently, there are two such programs available on the market – AR Quick Look (iOS) and model-viewer (Android). They are both based on platform-specific marker-less tracking systems – ARKit and ARCore, respectively. They provide good performance and rendering quality, and come in handy when a single, fixed model preview is enough. The downside of this approach is that you can’t add custom UI or place multiple elements.
In September 2018, with the launch of iOS 12, users all around the world got their hands on AR Quick Look – a feature allowing 3D models to be previewed in AR directly from Safari. It is an iOS-only file viewer based on the ARKit tracking system, using a dedicated file format – USDZ. When a button integrated into a website is clicked, the phone switches to an AR mode with the model ready to be placed. Furthermore, such files might be easily sent over WhatsApp, text messages or emails.
One of USDZ biggest limitations is no support for tiled textures in combination with ambient occlusion maps. Tiled textures with an ambient occlusion map require two UV layouts, while the Apple’s viewer only supports one. The issue may be solved by creating a dedicated, unique tiled texture for each model. However, such a solution becomes extremely time-consuming when multiple color options are required. Also you are loosing the details of the texture if you need to create a non tiled (baked) texture. You may create USDZ files with our free USDZ Converter.
During the Google I/O in the summer of 2019, a model-viewer component was announced. The component allows for declarative addition of the 3D model to a web page while hosting it on one’s own site using a glft file format. The ultimate goal is to create a feature working responsively on all browsers and devices, from tablets to head-mounted displays, from brand new to slightly outdated, with device-specific performance, rendering quality and use cases enhancements. Here is how an example implementation looks like:
<model-viewer alt="Astronaut model" src="Astronaut.gltf" ios-src="Astronaut.usdz" ar>
Modern Web Development Technologies provide a variety of tools for incorporating AR/VR features into web applications. An undisputable advantage is a possibility to utilize the full spectrum of available technologies and libraries in order to achieve the best results. It is possible to create custom UIs, assembly complex scenes with multiple models, define their configurations, customization options and interactivity. Moreover, markers (characteristic 2D images recognized by the AR application, not only QR codes) may be used to anchore the digital-world in the real-world, define the location, orientation, and scale of a model.
Below an overview of use cases for which, currently, WebAR is not suitable:
Increasing demand for Augmented Reality solutions results in a growing number of technological implementations. Despite specific limitations each of them comes with, with the two main players on the market – Google and Apple – giving the WebAR and WebXR topics a high priority, we can expect numerous solutions being presented in the coming months.