How ready is WebAR?
• • Augmented Reality
Imagine viewing and interacting with AR 3D objects in real-time, directly in your mobile web browser. Sounds great, right? Read along because this is what this post is all about.
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:
- Display an AR model in the real-world environment
- Display the model with the appropriate scaling and texturing
- Create an AR scene with multiple models
- Be able to interact with a model and the scene through a custom UI
AR 3D-files viewers
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.
iOS – USDZ / Quick Look
USDZ Viewer by Apple – sample implementation, see it in action on an iOS device. (Image by MacRumors)
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.
Android – model-viewer
Scene Viewer by Google – sample implementation, see it in action with an Android device.
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>WebAR Technologies
Into the Spider-Verse – WebAR experience by the 8th Wall
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.
Possibilities and limitations
At the current state of technology, however, the biggest limitation of WebAR is the lack of real-world scaling. The workaround is defining the model size by assuming a device’s height. For example, a model of a furniture piece would most probably be inserted in a scene by a standing person pointing the device’s camera onto the floor in front of him/her. For such a scenario, the scale of the object would be estimated based on the assumption that the device’s vertical distance to the floor would be 140cm. If we tried to place the same object on the table in front of us, its size wouldn’t feel right. However, since Google has already released the first version of true scaling abilities for the Google Canary test browser app, we assume that true scaling will be available on Android devices very soon. It is important to keep in mind that installing an application might be a barrier for a user, however, it usually pays off very soon with higher user return rate and improved experience quality.Below an overview of use cases for which, currently, WebAR is not suitable:
- Product configuration (material options, parts assembling, interation)
- Indoor navigation
- Real-world measurement (e.g. virtual measuring tape)
- Floor material replacement
- 3d scanning/reconstruction
- Removing items from the camera image
- Placing items on the walls
- Remote assistance
Future development
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.
ViewAR & WebAR
ViewAR is more than ready for WebAR. ViewAR Application user interfaces and application logics are based on HTML and JavaScript, the rendering on devices is done by native C++ engine. In the browser, we have a cross-compiled version of our engine running on JavaScript. This means that our system is already running the browser for VR and we are currently working on the AR features. You can find more information about the ViewAR system at www.viewar.com.
