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

13672 ワード
iOS Swift ARKit AR iOS テキストリンク

はじめに

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ファイルは一度端末にダウンロードが必要

参考サイト

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