2018.09.06
- 人×技術
Web x AR
ARKit
iOS 11 では、Apple がアプリ開発者向けに ARKit を提供したことで、AR アプリの開発は容易になりました。
そして、iOS 12 では ARKit 2 が提供され、その一部機能は Web ブラウザと連携できるようになります。
ARKit <https://developer.apple.com/arkit/>
公式サイトには、Web ブラウザ向けのギャラリーページが用意されています。
下記 URL を ARKit 2 対応の iOS 12 端末で観覧すれば、AR 体験が可能です。
AR Quick Look Gallery <https://developer.apple.com/arkit/gallery/>
USDZ
前述のページには、USDZ 形式の 3D モデルが埋め込まれています。
つまり、サイト管理者が Web で AR を提供したいのであれば、同様の実装を施せば実現できます。
Apple Developer に対しては、OBJ/ABC/USD ファイルを USDZ に変換するための開発ツールが配布されているため、今回は以前制作したモデルを活用します。
まずは、モデルデータを OBJ 形式で出力します。
必要なテクスチャは、一般的な PBR フォーマットになります。
即ち、
- アルベド
- メタリック
- ラフネス
- 法線
- アンビエントオクルージョン
- エミッシブ
を用意しておけば問題ありません。
メッシュとテクスチャを用意できたら、Xcode の usdz_converter
で USDZ を生成します。
xcrun usdz_converter fork.obj fork.usdz - g forkMesh -color_map fork_Albedo.png -metallic_map fork_Metallic.png -roughness_map fork_Roughness.png -normal_map fork_Normal.png -ao_map fork_AmbientOcclusion.png -emissive_map fork_Emissive.png
AR Quick Look
USDZ が用意できたら、HTML に下記を記述します。
<a rel="ar" href="fork.usdz">
<img src="preview.jpg">
</a>
rel
には ar
を指定。リンク対象には <img>
と <picture>
が使えます。
また、USDZ を配信する Web サーバには MIME Type の指定が必要になるため、下記を追加しておきます。
model/vnd.pixar.usd .usdz
model/usd usdz
実装は以上で、あとは USDZ のリンクを踏めば ARKit を利用した AR 体験が開始されます。
※ 上図は NDA のため iOS 11 (ARKit) を使用したスクリーンショット
Android について 補足
Android 8.0 以降には、ARKit 相当の ARCore が提供されています。
ARCore <https://developers.google.com/ar/>
そして、Chrome 70 以降では WebXR で ARCore を利用することができるため、前述の iOS と同等の実装に加えて、JavaScript による制御が可能になります。
WebXR <https://immersive-web.github.io/webxr/>
https://codelabs.developers.google.com/codelabs/ar-with-webxr/