AR Quick Look
on the Web

Sample code and information related to Apple's AR Quick Look functionality on the web

Intended audience: Front End Developers

Publish date: August 21, 2018

Overview

Right up front, I have to point out that this functionality will not work on any device unless it has iOS 12 or newer installed.

My intention has been to include this functionality as an enhancement for product images on eCommerce websites.

Hopefully, the process for standardization of Augmented Reality (AR) experiences like this will be quick and smooth 🙄, and that this will become an enhancement available on most devices.

Introduction

Jumping In

For front-end devs, the easiest way to jump in is to start at the last step; adding the code to a webpage.

HTML

<a href='file.usdz' rel='ar'>
	<img src='file.jpg' alt='Object XYZ'>
</a>

An <a> element with the attribute rel='ar' and a valid href attribute will open AR Quick Look when tapped.

The href value tells Safari what file to attempt to open in AR Quick Look. .usdz and .reality are the only supported file formats at this time.

Inside the <a> element, an <img> or <picture> element can be used as a poster.

From here, you can imagine converting a traditional product image to an AR Quick Look link:

HTML

<!-- Traditional Product Image -->
<img src='product_image.jpg' alt='Product XYZ'>

<!-- AR Quick Look Integrated Product Image -->
<a href='product.usdz' rel='ar'>
	<img src='product_image.jpg' alt='Product XYZ'>
</a>

A static product image can now be a clickable link to show the product in three dimensions and in an augmented reality scene.

In the simplest way, that's it; you should be able to get things working on a webpage (if you had a .usdz file to play with).

stratocaster.usdz (7.3Mb)

The above download link references a sample .usdz file from Apple's ARKit gallery on their developer website. More samples can be found and downloaded there.

More samples

To make the enhancement (and this article) more well-rounded though, I tried to answer some questions you might ask:

Hard-coding a non-standard feature doesn't seem smart, is there a more efficient way to manage it?
On devices that don't support AR Quick Look, won't links like that just download the .usdz file?
What are .usdz files and how do I make one?
Can I see a live demo?

Section 1

Managing the Enhancement

Since this is meant to be an enhancement for product images across an entire site (and since I don't want to manually replace all instances of the code if the standard changes during browser adoption), I put together a simple Javascript function that adds AR Quick Look functionality to img elements using the data attribute data-ar-fp.

HTML

<img data-ar-fp='product.usdz' src='product_image.jpg' alt='Product XYZ'>

To keep DOM changes to a minimum and to also keep the workload small, I chose to only add metadata to the img elements instead of wrapping each in an a element. The metadata is data attribute data-ar-fp, and its value is a filepath to the .usdz file that corresponds with the linked product image.

I then wrote a Javascript function to find each img element that includes the data-ar-fp attribute, and wrap each one in a link that's formatted for AR Quick Look.

Javascript

const enhanceWithARQuickLook = () => {

	const attr = 'data-ar-fp';
	const elements = document.querySelectorAll('['+attr+']');

	// if there are AR-ready links on the page...
	if ( elements.length > 0 ) {

		// convert AR-ready links
		for ( var i in elements ) {

			const instance = elements[i];
			const a = document.createElement('a');
			a.setAttribute('href', instance.getAttribute(attr));
			a.setAttribute('rel', 'ar');
			instance.removeAttribute(attr);
			instance.parentNode.insertBefore(a, instance);
			a.appendChild(instance);

		}

	}

};

enhanceWithARQuickLook();

Using the above techniques, I'm able to manage the enhancement with one function and quickly deactivate it if needed, with only metadata left behind.

This solution, however, still only accounts for devices that support AR Quick Look.

Section 2

Unsupported Devices

AR Quick Look functionality was introduced as a part of iOS 12, so unless a device has iOS 12 (or newer) installed, it will not have the ability to view the enhancement.

All unsupported devices will fall back on the traditional functionality of a elements with a filepath as its value (a download link).

We can use an operating system targeting technique to check if the host device has iOS 12 (or newer) installed before delivering the enhancement.

Javascript

const isiOS12OrNewer = () => {

	const iOS = /iP(hone|od|ad)/.test(navigator.userAgent) && !window.MSStream;
	const iOSVersion = iOS && parseInt(navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10);

	if ( iOS && iOSVersion >= 12 ) { return true; }
	else { return false; }

};

isiOS12OrNewer();

The function detects if the host device is running iOS by looking for keywords in navigator.userAgent. If the device is running iOS, the exact version of iOS is found. If the exact iOS version is found to be 12 or greater (newer), the enhancement can be initiated.

Adding this iOS checker to the management function looks like the following:

Javascript

const isiOS12OrNewer = () => {

	const iOS = /iP(hone|od|ad)/.test(navigator.userAgent) && !window.MSStream;
	const iOSVersion = iOS && parseInt(navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10);

	if ( iOS && iOSVersion >= 12 ) { return true; }
	else { return false; }

};

const enhanceWithARQuickLook = () => {

	// if the host device supports AR Quick Look...
	if ( isiOS12OrNewer() ) {

		const attr = 'data-ar-fp';
		const elements = document.querySelectorAll('['+attr+']');

		// if there are AR-ready links on the page...
		if ( elements.length > 0 ) {

			// convert AR-ready links
			for ( var i in elements ) {

				const instance = elements[i];
				const a = document.createElement('a');
				a.setAttribute('href', instance.getAttribute(attr));
				a.setAttribute('rel', 'ar');
				instance.removeAttribute(attr);
				instance.parentNode.insertBefore(a, instance);
				a.appendChild(instance);

			}

		}

	}

};

enhanceWithARQuickLook();

3D Support but No AR Support

There are multiple devices that support previewing .usdz files but do not support Augmented Reality features. These devices will open a .usdz file but will only preview the model in a white-background environment.

Apple includes a full list of devices that support iOS 12 (or newer) at the bottom of their iOS webpage.

iOS support list

Apple includes a full list of devices that support augmented reality features at the bottom of their current augmented reality webpage.

AR support list

After cross-referencing the two lists, we see that the following devices, if running iOS 12 or newer, will receive the enhancement and be able to view a .usdz file, but will only support viewing it in a white-background environment:

iPhone 6
iPhone 6 Plus
iPhone 5s
iPad 6th generation
iPad Air 2
iPad Air
iPad mini 4
iPad mini 3
iPad mini 2
iPod touch 6th generation

Section 3

.usdz Files

.usdz is essentially a zip archive that contains all of the files related to a 3D model, including the model's geometry and the model's textures.

Apple has advertised these files as being able to include multiple separate models, multiple types of textures (per object group or model), and also animated models.

Creating .usdz files requires a modest knowledge of 3D modeling. The skills of an everyday front-end web developer will not transfer over, so a whole new workflow will need to be learned.

For more information on 3D modeling, I suggest checking out the application Blender and its helpful community.

Blender Community

Section 4

Live Demo

Reminder: This demo will only show interactivity on devices that have iOS 12 or newer installed.

See the Pen AR Quick Look Demo by Alex (@alexmonachino) on CodePen.

Any questions?

Feel free to contact me

Please include 'AR Quick Look' in the subject of your email so that it gets past my spam filter 🙂

Didn’t like this project?

Wow. Well maybe check out the others

Back

AR Quick Look on the Web

Overview

Jumping In

Managing the Enhancement

Unsupported Devices

3D Support but No AR Support

.usdz Files

Live Demo

Any questions?

Didn’t like this project?

AR Quick Look
on the Web