Introduction to AR Quick Look for iOS Devices

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 ScalingAR Quick Look allows changing 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 to start in the Xcode version and use the mobile version to check the results and make small edits like changing 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:

• Horizontal: for tabletops, floors, and other horizontal surfaces.
• Vertical: for walls, doors, and other vertical surfaces.
• Image: for photos, books, and other objects that can be used as reference pictures.
• Face: obviously, for faces. They're identified and augmented with the help of the TrueDepth magic of the front-facing camera.
• Object: for scanned objects. Their 3D models have to be added to a scene.

After picking the anchor, you can modify a default object, add objects from the Content Library (and it has pretty awesome 3D models) or import .reality or .USDZ files.

Behaviors in AR Quick Look

You can link movements and sounds to your 3D models, using Behaviors. Set a trigger and create an action sequence, picking a type of Behavior.

After that, you can change its duration and motion type, the number of affected objects, and style. It's also possible to add more actions and set them to play one by one or simultaneously.

By the way, auto-looping animations from a .USDZ file can be combined with animations from Reality Composer.

Online shopping and AR Quick Look

Native Web AR allows adding an Apple Pay button. You can also set an action like "Add to cart" instead of offering a user to pay for an item right away. Other options include redirecting them to a messenger or displaying a completely custom banner.

This feature allows to create a seamless buying experience and increase the conversion to purchase. Surprisingly, it's not widely adopted yet — so you have a chance to be an early adopter of a promising technology.

Essentially, it helps to make a purchase as close to retail experience as possible. With the help of AR Quick Look, you can unite possibilities of e-commerce and retail in one point of sale.

Code example and live demo

If you have an iPhone or iPad, click the link below and pick one of 3D models to see them in augmented reality right from the browser.

Let's go!

Previously published at https://quality-wolves.com/native-web-ar-ios