AR Quick Look in HTML email

iOS 12 has a new feature called AR Quick Look that allows you to preview 3D models in the real world. Prior to this if you wanted to view augmented reality ( AR ) you’d need to install an app. During WWDC 2018, Apple talked about how AR content could be natively previewed and shared across a number of apps including Safari and Mail. Excited by the prospect of integrating AR with email we ran some tests.

 

iOS 12 users can preview 3D models in the real-world via AR Quick Look

iOS 12 users can preview 3D models in the real-world via AR Quick Look

 

Safari AR code in Mail

You can integrate AR Quick look in Safari with a few lines of HTML. Once you link an image to a .usdz file, a badge in the form of a 3D cube appears to indicate that an AR experience is present. When you tap that image AR Quick Look opens showing the 3D content.

 

Left Safari code in Mail no AR badge, right same code in Safari badge automatically appears

Left Safari code in Mail no AR badge, right same code in Safari badge automatically appears

 


/* Code for adding AR Quick Look to Safari */
<a rel="ar" href="model.usdz">
<img src="model-preview.jpg">
</a>

Add this HTML to your website to integrate AR Quick Look

 

The first test we tried was to run the Safari code in Mail. We converted a 3D .obj file to .usdz using Xcode 10. Usdz is a new file format developed by Apple in collaboration with Pixar. It’s based on Pixar’ .usd file, and allows multiple AR assets to be bundled into a single file. While our test worked in Safari, in Mail there was no AR badge. When you tap the image instead of launching AR Quick Look it prompts you to save the .usdz file. We then tested a bunch of different MIME-types associated with AR and still no luck. To be fair Apple never claimed the Safari code could be used in Mail, it’s just disappointing for email designers.

 

Fake it

One option is to fake it, start by manually adding the AR badge to the image in your email. Link that image to a web version of the email, which contains a bit of JavaScript saying onpageload click the AR link. When you click the image in Mail, AR Quick Look should just launch. Keep the web version lightweight so you don’t notice the transition. Here we’re using a large SVG so it’s slower, we had a PNG version that felt seamless.

 

Left we manually add the AR badge and then use JavaScript to launch AR Quick Look

Left we manually add the AR badge and then use JavaScript to launch AR Quick Look

 

Once you’re done in AR Quick Look, you have the option to go back to Mail or the X button takes you back to the web version of your email ( which supports AR Quick Look ). You could finesse it by layering on some device detection so only certain iOS users get the AR content. Still it’s not ideal, as although the intentions are good it’s still a fake-out which puts me off, it’s an option but not one I want to use.

 

Send as a base64 attachment

I was certain I’d seen AR Quick Look launch directly from an email somewhere; I had in this June WWDC 2018 video. So I started to pass a .uszd file around the different apps mentioned in the WWDC 2018 talk.

 

AR Quick Look launching from an email during WWDC 2018 Apple Keynote, far right, note it's an attachment 

AR Quick Look launching from an email during WWDC 2018 Apple Keynote ( far right, note it’s an attachment )

 

If you save the .usdz to Files, from there you can share via Mail or iMessages. Also if you’re in AR Quick Look there is a share icon top-right, share via Mail is one option. When you do this it adds the .usdz file as an embedded attachment, tapping on it launches AR Quick Look directly from an email. That’s great, if you want to share a chair you’re thinking of buying with a friend. But sending an attachment in a marketing email is impractical. Besides a lack of ESP support, most people are wary of attachments and won’t know what a .usdz file is.

 

Sharing a .usdz file from within AR Quick Look via Mail; attachments then launch straight from Mail

Sharing a .usdz file from within AR Quick Look via Mail; attachments then launch straight from Mail

 

Still we had a play in case it lead to anything useful. We base64 encoded the attachment, and sent tests via Mailsend rather than an ESP. It works smoothly, transitioning from Mail to Quick Look and back again. But having it come in as an attachment is a deal breaker for most of us.

 

Base64 encode the attachment, launches AR Quick Look direct from email

Base64 encode the attachment, launches AR Quick Look direct from email

 

Animation

For anyone not yet dissuaded, AR Quick Look also supports animation. Think of it like an amped up Gif that you can view in your own surroundings. Apple mentioned both transform and skeletal animation, but only transforms appear to be supported right now. This demo is a run cycle — why file is so large — using mesh and transform animation, but only the transforms are read so it just rocks back and forth. I’m sure mesh-based support will kick in at some point.

 

Only transform animations appear to be supported right now

Only transform animations appear to be supported right now

 

Casual AR use on the rise

Now that AR content can be accessed natively, casual viewing and sharing will increase. Companies like Shopify are integrating AR Quick Look, and Amazon is also rolling out AR functionality. It’s a shame email designers can’t also begin to explore uses for AR — at least not in a straightforward and practical way — as many retailers report 50–70% mobile email usage. Though if the Safari integration proves popular, Apple could extend support to Mail in an upcoming release, though still no change as of iOS 12.1.

 

PureCycles a Shopify store using AR Quick Look

PureCycles a Shopify store using AR Quick Look, image from this video

 

Feel free to play with our demos, all our test files are in this zip, let us know if we’ve missed something. Quick update @HTeuMeuLeu and @EmailJay ran some tests and their findings corroborate ours, so looks like this is how things stand as of iOS 12.1. These tests use SVGs generated with this tool. With SVG stick to image rather than inline or the AR badge won’t appear. We ran tests using other image formats like JPG and PNG, again it worked in the Safari browser but not in Mail.

We did all our testing on an iPhone Xs. Heads up that non-ARKit enabled devices running iOS 12 like iPods only show object mode, which is a 3D model viewer against white. See the “fake it” section above, there’s a screenshot. For more demos see Apple’s AR gallery, and Shopify store Magnolia.