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/