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
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.
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>
<a> element with the attribute
rel='ar' and a valid
href attribute will open AR Quick Look when tapped.
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.
<a> element, an
<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?
Managing the Enhancement
img elements using the data attribute
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.
img element that includes the
data-ar-fp attribute, and wrap each one in a link that's formatted for AR Quick Look.
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.
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.
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:
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
.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
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.
Feel free to contact meEmail
Didn’t like this project?
Wow. Well maybe check out the othersBack