Apple is making augmented reality accessible to everyone with AR Quick Look. Not only is this great for iOS apps, but also for websites. Online shopping is one of the best industries that can take advantage of AR, as it can give users the possibility to see the products in 3D and in their own environments. From previewing furniture in your home with apps like IKEA Place, to experiencing newly launched cars like this Lamborghini Huracán, this technology can improve our experience as buyers. But of course, the applications of web AR extend beyond retail as well.
AR Quick Look
Built-in apps, such as Safari, Messages, Mail, News, and Notes, use Quick Look to display USDZ files of virtual objects in 3D or AR on iPhone and iPad. You can embed Quick Look views in your apps and websites to let users see incredibly detailed object renderings in a real-world surrounding with support for audio playback.
There are many advantages of using AR Quick Look: it gives you interactions like placing, moving and scaling the object, people occlusion and sharing of the model available “out of the box”. It supports vertical and horizontal planes for placing your content and even viewing face accessories. You can view a gallery of Apple's AR Quick Look examples here, all you need to do is open the models on an iPhone or iPad to view them in AR.
For web based AR Quick Look experiences we can use USDZ, the distribution format for USD (Universal Scene Description),which is a 3D file format developed by Pixar that focuses on speed, scalability and collaboration.
In this tutorial, we will build a simple webpage that shows a sneaker in AR.
Preparing the 3D model
I will be using a model from Sketchfab.com but feel free to use whatever model you wish in USDZ file format. Sketchfab offers the option to download the model directly in this file format.
Converting your 3D models to USDZ Files/Changing the base unit of the model
In case you already have your models in other 3D formats, you can check out this article on how you can easily convert them to USDZ using Apple's Reality Converter.
In this article you can also see in the Properties section how to edit the base unit for example from meters to centimetres. I had to do this as well for the sneaker model so that it has a real life size when viewing it in AR.
In order to test what we are building right away on real devices, for simplicity, we will be using codepen.io:
The code above is pretty straightforward, we have the AR model inside a hyperlink tag and an image to be displayed for the model. By adding the rel="ar" attribute we tell the browser that this is an AR model so it will automatically add the AR badge in the right corner of the image and will start the AR experience directly instead of navigating to another page.
I uploaded the image and model on my personal website as you can only host assets directly on Codepen with a paid account. When you will be developing your project you can also link to your project files, like this for example: href="/assets/models/model.usdz".
Additionally, I added the following to the CSS file to fit the image nicer on the screen:
And that's it! You can now save it and reload the Codepen link from your device. When we tap on the image on iOS, we will be taken to the AR Quick Look view. If we tap on the image on macOS, the model will be downloaded on your machine.
Available for devices running iOS 13.3 or later
In the previous section we looked at the most basic AR Quick Look experience, but you can also add banners with Apple Pay or Custom Actions to your AR experience.
Check out this very useful webpage made by Apple for more information on integrating those features. You can enter all the customisation details you need for your banner and this webpage will generate the code for you, pretty cool!
In this section we will have a look at different styles of banners you can add but it will be up to you to define the actions your website takes in response to tapping on the banner. For more information, see this article from Apple.
You can have a look at the Making the nested USDZ file section in this article for a step by step tutorial on how to nest together more models into one USDZ file.
Keep in mind that USDZ is still a fairly new format so you might need to check that your web server understands the model/vnd.usdz+zip MIME-type. Refer to your web server documentation on how to configure this if not already supported.
In today's digital age, mobile applications have become an integral part of our daily lives. From ordering food to managing finances, there seems to be an app for every need. Behind the scenes, these apps are powered by a technology that has revolutionize...
Spatial is a metaverse platform that allows anyone to create immersive 3D spaces, which can be instantly shared to the Web, iOS, Android, and VR, and explored by others. The Spatial Creator Toolkit, powered by Unity, allows you to add even more interactiv...