BlogJune 12, 2018
(A Really) Quick Look at Apple's AR Quick Look
While the Quick Look module has been available to use since iOS 4.0, with the release of iOS 12, developers and content writers will be able to bring Augmented Reality experiences to apps as well as websites by leveraging the new AR Quick Look APIs.
Before you can get started with using AR Quick Look, there are a couple of concepts to understand.
- The New USDZ File Format
- The AR Quick Look Viewer
USDZ File Format
The new USDZ file format is based off of Pixar's open source USD (Universal Scene Description) file type and was developed to be a single shareable file that can be distributed simply and easily.
Apple has supplied a tool that ships with XCode 10 to make converting your current models as simple as possible. It currently supports conversion of these file types:
- .obj files
- Single frame Alembic (ABC) file
- A USD file (either .usda or .usdc).
With Xcode 10, simply type this command into your terminal with the correct file and path names to generate your USDZ file.
xcrun usdz_converter Lamborghini_Aventador.obj lambo.usdz
The AR Quick Look Viewer
Converting models to USDZ is simple and easy, but that doesn't mean every asset you create in your app or website needs to be AR ready. Apple recommends that you should only use AR Quick Look when your goal is to view 3D objects and push them into the physical world.
The real beauty of AR Quick Look is how easy it is to set up an AR Experience thanks to the AR Quick Look Viewer. The AR Quick Look viewer has two modes, Object Mode and AR Mode.
In Object Mode, the device you are using does not need to be AR capable as long as it is running iOS 12 or Safari on macOS. It is essentially a studio viewer where the object is rendered on a flat white background and is ready to be interacted with. You can pan around your object viewing it at different angles, you can zoom in to view finer details, and even view animations if your model supports it.
In AR Mode, you are able to place your 3D object directly into the physical world. The AR Viewer intelligently gathers lighting information from the real world and renders the object to match the environment it's in. A grounding shadow is applied to your object to make it feel as though the object is really sitting right on the surface in front of the viewer.
Not only is AR Quick Look available on the iOS platform, but Apple has taken this technology and brought it to the desktop. With the new macOS Mojave and Safari, USDZ files will be available to view in Object Mode on the web so you can see all of the fine details of your object with all the same capabilities as iOS Object Mode. Apple provides an HTML wrapper when you supply a USDZ file to the page, and the thumbnail of the image will be rendered with a USDZ logo in the top right corner. This makes it obvious to the user that the image can be viewed as a 3D model in the Object Mode portion of the AR Quick Look Viewer. When the viewer has gone full screen and the object is shown, there is no additional links, all of it is happening right there on the page so the user has a seamless experience.
Implementing AR Quick Look in Your Apps
After spending a weekend with the updates to the QuickLook module, I am pleased to say that implementing AR Quick Look in a sample app was surprisingly straight forward. It is essentially the same as all other QuickLook viewers for files from Pages, Numbers, and .pdfs, but there are 2 details that I would like to highlight that were talked about during WWDC.
Matching the Thumbnail and the Initial AR View
Creating a great user experience is top of mind when working with visual assets. To achieve an immersive experience, it's important to keep in mind a seamless transition between the thumbnail photo of your object and the object rendered in the viewer. Make sure that the thumbnail is around the same size as the rendered 3D object, it's facing the same direction, and has a flat white background just like the object viewer.
Animation Between the Thumbnail and the Initial AR View
Animating between the thumbnail and the object viewer is another important user experience aspect that might be over looked. The default transition results in an ugly spinner, a white background, and a pretty obvious result that the user is being taken into the object viewer. The transition that you should have, is one that feels like the image is a portal to the object viewer, that is accomplished with a zoom-in transition on the image before loading the full screen viewer, and a zoom out when the full screen viewer is dismissed.
AR Quick Look is an extremley interesting new technology that could change the way we view media on the web and in our apps. It has potential for online retailers to showcase their items, give customers a sense of the size of an item and make online shopping closer to shopping in person by interacting with the objects and seeing how they look in a physical space. But it's not limited to retailers alone, education, medical, construction, and countless other fields could be benefiting from taking their static 2D images and diagrams, converting them to 3D models, and making them come to life with AR Quick Look.
As of this writing, AR Quick Look is only available on two platforms, iOS 12 and macOS Mojave. I would consider this the biggest drawback that the technology has. While there are plenty of iOS and macOS users that will embrace this new format for viewing 3D objects, the "portability" of it is lost outside of the Apple ecosystem. As with any new tech, it is only useful if it is embraced by its end users - if web and app developers discover that users are not interested in an AR experience or don't use it, Quick Look AR will fall by the wayside for a more universal and far reaching solution.