Native Web AR for iOS

AR is awesome and has an unrivaled potential to enrich customer experience in many verticals. However, it has a friction point in most cases: you need to persuade a potential customer to install an app first.

AR Quick Look solves this problem for iOS. This is a native feature of ARKit which launches a model viewer right from the browser — that's why we call it native Web AR. It utilises .reality or .USDZ files, the latter is a file format developed by Pixar, and allows showing objects in incredible detail, adding animations and sounds, locking their scale to 1:1 so models show the real size of an object.

Retail and e-commerce can benefit the most from implementing AR Quick Look on their websites: for example, if a customer has found a bed they like, they can instantly place it in their bedroom with the help of web-based augmented reality features, checking the proportions and compatibility with other pieces of furniture. According to Dan Davis, the CTO at Build.com, they saw a 22% decrease in return of bought products as customers had a chance to check if an item fitted the available space. This opportunity is especially vital right now as most customers prefer ordering items online and avoid visiting public places.

Another possible use case is demonstrating differences in packages. Instead of going to a car dealership, a customer can see variants they can pick and decide what package meets their requirements. Unfortunately, they won't be able to configure a car themselves: they'll need to switch between models, each being a separate file, and wait while they load. Thus, the engagement might be a bit lower in comparison to an AR app. But I guess, it should be much easier to motivate a customer to install the app after a web demo.

Other than that, in-browser AR Quick Look has little to no downsides if you need a quick demonstration of your product. It supports both vertical and horizontal planes so it's possible to place an object on the floor or wall; lighting, shadows, and environment mapping are created by ARKit; it's developed quickly and with less effort than an AR app.

As Apple's documentation about in-browser AR Quick Look isn't quite thorough, we decided to write a guide about native Web AR for iOS and gathered all the info we know on the subject.

Let's start with basic things first and see how we can launch a ready-made 3D model in AR.

‍

How to Ensure Everything Works Properly

The image tag is required and must be the first child of the rel=ar link element. Otherwise, browsers fail to launch AR Quick Look right away and just send you to a file preview instead, adding one more step before you can see a model in AR.

To make AR Quick Look work properly, you need this HTML structure:

You can also remove a preview image if you don't embed src into img. In this case, the structure will begin like this:

‍

It's easy to check if you did everything correctly: in Safari, the icon with a 3D cube should be seen in the corner of a file preview. For more examples, have a look at the Quick Look Gallery.

The icon won't appear in Firefox or other browsers but models can still be launched in AR from iOS devices. When you click on a preview from an Android device, it just downloads the model without demonstrating it. This happens because native Web AR for Android works differently — and we'll definitely cover this topic in the next article about Web AR.

‍

How to Disable Scaling

AR Quick Look allows to change a model scale, showing the ratio in percent. However, it's better to keep the scale at 100% or 1:1 — this way, you can avoid misunderstanding and ensure that a customer sees the real proportions of an item they want to order.

Here's how to force scaling to always stay at 100%:

After that, if someone attempts to enlarge a model, it'll just bounce back. This feature works only in Safari though.

‍

How to Set Canonical Links for Sharing

By default, a "Share" button will only share a link to a model itself, prompting download of a .reality or .USDZ file to your device. In short, your links shouldn't look like this:
https://developer.apple.com/arkit/gallery/toy_biplane.usdz#allowsContentScaling=0

To set a link that opens AR view for your users right away, you need to add #canonicalWebPageURL=http://example.com to the end of the link. If you want to use both scaling restriction and canonical URL, the end of the link should look like this: #allowsContentScaling=0&canonicalWebPageURL=https://example.com

Just as disabling the scaling feature, you can only set canonical links for Safari.

‍

Interactive models in Native Web AR

So, we described how to launch a prefab model in AR Quick Look. In order to create engaging AR experiences, it's best to use animations — and sometimes it's needed to add them to 3D models.

But what should you do to make your 3D model animated?

You can pick one of these ways:

• Add animation to a .USDZ file, using one of platforms supporting the file format, and set it to autoplay;
• Modify a .USDZ file in Reality Composer and export it to a .reality file;
• Create a .reality file in Reality Composer from scratch.

The way using a .USDZ file with a built-in animation autoplay isn't interactive though. The animation just keeps looping and doesn't react to user's actions. In order to create an interactive AR experience, you have to use Apple's Reality Composer. It's a tool focused on working with 3D models for AR, for example, adding animations and audio, managing their order and triggers, etc.

Reality Composer is available as a part of Xcode for Mac and as a stand-alone app for iOS. Thanks to that, you can easily test your AR scene on the mobile device right after working on it in Xcode.

The mobile version has fewer features than the Xcode one. While it also can be used to create an AR experience from scratch, I'd recommend starting in the Xcode version and use the mobile version to check the results and make small edits like changing the positions of objects.

When you start working with Reality Composer, you should create a new project file first. After that, the app immediately offers you to pick an anchor. There're 5 anchor types, and you can pick just one of them: