Viewing Augmented Reality Assets in Safari for iOS

Safari on iOS 12 supports viewing 3D models and allows you to see them in Augmented Reality (AR). Supported assets use the Universal Scene Description format, or USDZ, developed by Pixar.

Apple has made a gallery of examples for you to play with. This post will tell you how to author Web content to reference USDZ files so your users can experience AR.

Serving USDZ content

For Safari to recognize AR content it must be served over HTTP with the appropriate MIME-type. Safari is looking for model/vnd.usdz+zip.

Since this is a new format, it’s unlikely that your Web server knows about USDZ. You may need to configure it to serve the appropriate header. For Apache, the configuration would look something like this:

AddType model/vnd.usdz+zip usdz # All files ending in .usdz served as USD.

Refer to your Web server documentation, or your Web Application Framework documentation, for information on how to set the Content-Type header.

Linking to USDZ

Once the content is served with the correct MIME-type, you can link to USDZ content in the normal manner.

<a href="heart-tapback.usdz">iMessage Heart Tap-back</a>

Here is such a link: iMessage Heart Tap-back

Upon tapping that link, Safari on iOS will navigate to a page that shows a static thumbnail of the 3D asset. Tapping again on the thumbnail will open a live view where the user can pan and zoom, and switch into AR mode. Any animations embedded in the USDZ will play in the live view. The user can exit that view and then return to the previous page using the back button.

In this way, linking to a USDZ file is just like linking to other files.

In-place viewing of USDZ

Navigating away from a page to get an AR experience might be disruptive to your interaction. There is a better way to show AR content by marking-up the link element in such a way that Safari knows in advance how the link should be processed.

By adding rel="ar" to your a (link/anchor) element, Safari won’t navigate on tap. Instead it will jump directly into the live 3D view and, upon exit, returns to your page.

Safari decorates such links with a 3D-cube badge in the top-right corner, to show the user there is an AR experience. You may have noticed this experience on the gallery mentioned earlier.
There are some extra requirements for the link. We already mentioned the rel attribute. The link must also contain a single child that is either an img or picture element. For example:

<a rel="ar" href="model.usdz">
    <img src="model-preview.jpg">
</a>

Obviously you can use whatever image you like inside the anchor.

Feature Detection

To detect support for AR, you can use the following JavaScript:

const a = document.createElement("a");
if (a.relList.supports("ar")) {
  // AR is available.
}

Other than Safari, the AR integration is available in SFSafariViewController clients. We’ve also received requests to add it to WKWebView.

More information on iOS and AR can be found in WWDC 2018 Session 603 – Integrating Apps and Content with AR Quick Look. The section relevant to Safari begins about 16 minutes in. Other parts of that session discuss creating USDZ files. General documentation on Apple’s AR frameworks is available from the developer site.