はじめに

WWDC2018で発表されたusdz形式のファイルでのAR表示（AR Quick Look）についてまとめます。

USDZとは
対応機種
Quick Look表示のイメージ
Webコンテンツ内にUSDZファイルを配置する方法
ネイティブアプリでAR表示する場合の方法
- WKWebViewでの表示は未対応
- SFSafariViewControllerで表示する場合
- QLPreviewControllerで表示する場合
サンプルリポジトリ

usdzとは

3Dデータ用のファイル形式
ピクサーが2013に発表したUSD形式の改良版
iOS12以降の対応機種であればブラウザやネイティブアプリでQuick Look表示が可能

対応機種

iOSでの対応機種は以下のようになっています。

iPhone 6s以降
すべてのiPad Proモデル
iPad（第5世代）
iPad（第6世代）

※OSはiOS12以降

さらにWWDCの発表では以下のメモリ容量の大きいデバイスが推奨されていました。

iPhone 7 Plus
iPhone 8 Plus
iPhone X
iPad Pro 12.9

Quick Look表示のイメージ

iO12の対応機種であればSafariでAR Quick Lookギャラリーを見ることで、Quick Look表示を体験できます。

ARコンテンツを含むWebページを表示した場合、上記のようにAR対応のアイコン（写真左）が画像の上に表示される
オブジェクトタブでは白い何もない空間上に3Dモデルが表示（写真中央）
ARタブでは背面カメラを利用して平面を検知した時に3Dモデルが配置される（写真右）

試してみた感想としては、なかなか平面が検知されないのでカメラでいろんな方向を撮る手間がある、3Dモデルのサイズが大きめに表示されてしまうなどのiOS側の課題がありそうだなと感じました。

Webコンテンツ内にUSDZファイルを配置する方法

WebコンテンツでUSDZファイルを配置するにはaタグのhref属性にusdzファイルのパスを、rel属性に"ar"を設定します。内部にimgタグを配置すると自動でAR対応のアイコンが表示されます。この設定をしない場合、ブラウザがusdzという拡張子を判定することができません。

<a href="item.usdz" rel="ar" >
    <img src="item_thumbnail.png">
</a>

以下のようにWebサーバーのMIME設定も必要なようです。

AddType model/vnd.pixar.usd .usdz
AddType model/usd .usdz

ネイティブアプリでAR表示する場合の方法

WKWebViewでの表示は未対応

WKWebViewでの表示も試みましたが、表示できませんでした。
以下のWebKitのサイトにも書かれていますが、WKWebViewでの表示は未対応のようです。

Viewing Augmented Reality Assets in Safari for iOS

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

標準ブラウザ（Safari）を利用せず、ネイティブアプリで表示する方法は以下の2つです。

SFSafariViewController
QLPreviewController

SFSafariViewControllerで表示する場合

以下のようにURLを指定してあげればOKです。ただし、SFSafariViewControllerはカスタマイズできることがかなり制限されているので、実際に利用する場合は次のQLPreviewControllerを使うことが多いかと思います。

import SafariServices
import UIKit

public final class SafariViewController: SFSafariViewController {
    let url: URL

    init(url: URL) {
        self.url = url
        super.init(url: url, configuration: Configuration())
    }
}

QLPreviewControllerで表示する場合

以下のようにQLPreviewControllerDataSourceを実装すればOKです。

import UIKit
import QuickLook

public final class ARNativeViewController: QLPreviewController {
    let url: URL

    init(url: URL) {
        self.url = url
        super.init(nibName: nil, bundle: nil)
        dataSource = self
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

extension ARNativeViewController: QLPreviewControllerDataSource {
    public func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
        return 1
    }

    public func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
        // URL must be a file-type URL (local files only)
        return url as QLPreviewItem
    }
}

注意点として、指定するURLは端末内に保存されたusdzファイルのURLである必要があります。そのため、WebサーバーからUSDZファイルを取得する場合は一度ローカルディレクトリにファイルを保存する必要があります。以下はAlamofireを利用してusdzファイルをダウンロードするサンプルコードです。

let destination: DownloadRequest.DownloadFileDestination = { _, _ in
    let documentsURL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
    let fileURL = documentsURL.appendingPathComponent("teapot.usdz")

    return (fileURL, [.removePreviousFile, .createIntermediateDirectories])
}

let url = URL(string: "https://developer.apple.com/arkit/gallery/models/teapot/teapot.usdz")!
Alamofire.download(url.absoluteString, to: destination)
    .responseData { [weak self] response in
        DispatchQueue.main.async {
            self?.openInNative(url: url)
        }
}

サンプルリポジトリ

サンプルコードはこちらのリポジトリに置いてあります。

github.com/shtnkgm/ARQuickLook

まとめ

USDZとQuickLookを利用することで非常に簡単に3DモデルのAR表示ができる
USDZファイルをネイティブで表示するにはWKWebViewは未対応なので注意
QLPreviewControllerを利用することが多いと想定される
QLPreviewControllerを利用する場合にもWeb上のUSDZファイルは一度端末にダウンロードが必要

参考サイト

本記事を作成するにあたり参考にさせていただいたサイトです。

iOSでUSDZファイルのAR表示（AR Quick Look）