【iOS 12】 AR Quick Look機能で自作モデルをSafariから見る

# はじめに
iOS12からARKit v2が導入され、macOSの[QuickLook機能](https://support.apple.com/kb/PH25575?locale=ja_JP)のAR版である、「AR Quick Look」という機能が追加されました。

AR Quick Lookを試す方法は2通り。

- iOSアプリに組み込んで閲覧する
- HTMLにリンクを貼ってSafariから閲覧する

この記事では手軽な後者を試してみます。

# デモをみる
まずは体験。こちらのページからデモが見れます。

AR Quick Lookギャラリー
https://developer.apple.com/jp/arkit/gallery/

1. iOS12のiPhoneからアクセスし、表示したいモデルを選んでクリックします。
2. AR Quick Lookの画面が立ち上がるので、ARモードに切り替え
3. カメラモードになり、モデルが配置できる！

![Image-from-iOS.png](https://qiita-image-store.s3.amazonaws.com/0/73643/e9e39617-fd95-933f-ba25-fdad2a1a9152.png)

HTMLでaタグを記述し、モデルファイル(.usdz)へのリンクを貼っておくだけで、簡単にARがみれてしまいます。結構あっさり見れたのでちょっと感動しました。これはいろいろ応用できそうです。

# 自作のモデルを表示してみる
blenderで3Dモデルを作ります。今回はネズミっぽい何かを作りました。作業が終わったら、このモデルをOBJファイル形式でエクスポートし、objファイルとmtlファイルを入手します。
<img width="809" alt="スクリーンショット 2018-09-23 23.07.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/73643/43712035-e5de-52d2-cb7e-5d77dc9f23be.png">
<img width="830" alt="スクリーンショット 2018-09-23 23.08.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/73643/28ba38b4-e263-dc96-68eb-a9201a22b8a6.png">

### OBJからUSDZフォーマットへ変更
大事な部分ですが、AR Quick Lookでモデルを見るためには、**USDZフォーマット**でなければなりません。 USDZフォーマットの詳細はここでは割愛しますが、USDZへ変換できるファイルは、現時点では以下のものだけのようです。

- OBJファイル
- singleフレームの Alembic (ABC)ファイル
- USD ファイル (either .usda or .usdc)

また、USDZフォーマットの制約もありますので注意が必要です。

- 100kポリゴンまで
- 2048x2048までのPBRテクスチャ
- アニメーションは10secまで
- etc

詳しくはこのページにあるPDFを参照ください。
https://developer.apple.com/videos/play/wwdc2018/603/

#### 変換方法
変換方法は調べたところ、以下のどちらかのようです。
1. Xcode10 Command line Toolsを利用して変換
2. オンラインサービス [Vectary](https://www.vectary.com/3d-modeling-news/usdz-converter-create-usdz-files-for-free-online-with-vectary/?utm_source=twitter_usdzconverter&utm_medium=twitter_usdzconverter&utm_campaign=usdz)を使用して変換

1でサクッとやりたかったのですが、なぜかusdzファイルが出力されないという現象に見舞われているため、今回は2の方法でやります。原因は引き続き調査中ですが、わかる方いらっしゃいましたら教えてください。
一応コマンド載せておきます。オプションも豊富なので先ほどのPDFを見てみてください。

```bash
xcrun usdz_converter {ファイル名}.obj {ファイル名}.usdz
```
#### Vectaryでusdzに変換して出力する
<img width="1033" alt="スクリーンショット 2018-09-24 2.41.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/73643/6dcaf859-e484-05fd-ea0a-6ad875a4badc.png">

1. Vectaryにユーザ登録します。
2. オブジェクト編集画面へ進み、メニューから`import`を選択。blenderから出力したobj/mtlファイルをD&Dします。この際、モデルが取り込まれて表示されますが、上方向がY軸となっているため、モデリングした環境の座標系によっては表示位置がおかしくなるので注意してください。
3. Vectary上でも色々編集できますが、ここでは飛ばします。右側のメニュー > Export > 3D File > USDZ ボタンをクリックします。
4. USDZファイルのダウンロードリンクつきメールが届くのでダウンロードします。

# HTMLマークアップ
次にHTMLの記述方法ですが、やるべきことは少ないです。

```html
<a rel="ar" href="sample.usdz">
 <img src="sample-preview.jpg">
</a>
```
`img`か`picture`タグで、プレビュー用画像を表示し、aタグで囲い、usdzファイルにリンクを設定します。 rel属性を`rel="ar"` にすることに注意です。

# MIME Typeの追加
配信サーバのMIME Typeに以下を追加します。

```apache
AddType model/vnd.pixar.usd .usdz
AddType model/usd usdz
```
以上で、AR Quick Lookを利用するための設定は終わりです。

# 確認
無事AR Quick Lookで見れました。
<img width="297" alt="スクリーンショット 2018-09-24 3.16.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/73643/521479ff-4763-c0e2-56c4-2eb0443939c1.png">

Contact Shadowのおかげで、すごく馴染んでます。
<img width="292" alt="スクリーンショット 2018-09-24 3.18.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/73643/173d5612-ef96-608e-0e79-58c7fa06f1ea.png">

# おわりに
購入前の商品デモみたいな形でショッピングサイトなんかに相性よさそう！ とか思ってたらもうすでにちらほらあるんですね・・・ さすが。

magnolia
https://shop.magnolia.com/collections/arkit