WebARのやり方 (2020/05)

2020年5月21日現在、WebARをやる方法について調べたところ次のような方法があることがわかりました。

・ AR Quick Look
・Scene Viewer
・<model-viewer>
・AR.js
・Web XR Device API
・8th Wall

以下ではそれぞれの手法についてまとめていきます。実際に試してみたというよりも、カタログスペックを調べてみたという感じなので注意してください。

AR Quick Look

Quick Lookギャラリー - 拡張現実 - Apple Developer

USDZ形式の3DモデルをARで表示するiOSの機能です。Safariで使用できます。平面検出して、その平面上に3Dモデルが表示されます。平面側には3Dモデルの影が落ちます。Webから使用するにはサポート形式のファイルへのaタグを貼るだけで良さそうです。

AR Quick Lookを使ったモデルのプレビュー - 日本語ドキュメント - Apple Developer

AR Quick LookはiPadOSまたはiOS 12以降を搭載したデバイスでサポートされています。以下のサイトによると2020年1月27日時点で、すべてのデバイスのうちiPhoneで93%、iPadで84%が条件を満たしているということになります。

App Store - Support - Apple Developer

(パーマリンクが見つけられなかったので、スクリーンショットも撮影しました。)

Scene Viewer

Using Scene Viewer to display interactive 3D models in AR from an Android app or browser

AndroidのAR Coreの機能で3DモデルをARで表示できます。HTMLにScene Viewerを起動するリンクを貼ることで使用できるようです。機能的にはAR Quick Lookとほぼ同じようです。Scene Viewer自体はWebブラウザとは別機能なので厳密にWebARではないのかもしれませんが、後述する<model-viewer>から使用できるので触れています。
ARCoreをサポートしているデバイスは以下のページにまとまっています。

ARCore supported devices  |  Google Developers

<model-viewer>

https://modelviewer.dev/

<model-viewer>というタグをHTMLに埋め込むと3DモデルのビューワーをWebページに埋め込むことができるWeb Componentsです。その機能のうちの一つとして3DモデルをARで表示することができます。
内部的にはiOSの場合はAR Quick Lookを利用し、Androidの場合はScene Viewerを起動するようになっています。なので、iOSとAndroidの両方に対応させたい場合は<model-viewer>を使うのがよさそうです。AR Quick LookとScene Viewerでは必要な3Dモデルのフォーマットが違うので、それぞれ用意する必要があります。

Augmented reality with model-viewer  |  Web  |  Google Developers

AR.js

AR.js Documentation

AR機能を提供するJavaScriptライブラリです。Image Tracking、Location Based、Marker Basedの3つのARを利用することができます。Image TrackingとMarker BasedはビジョンベースARに相当し、前者は画像やイラストを認識し、後者はマーカーと呼ばれる記号を認識します。Location BasedはロケーションベースARに相当し、GPSを利用した位置情報をもとにAR表示します。
AR.jsの内部ではARToolKitをEmscrptenで変換したものを使用しています。3Dの描画部分にはThree.jsまたはA-Frameを使用します。
詳細な必要要件はDocumentationのRequirementsを読んでもらうとして、概略するとWebGLとWebRTCをサポートしているデバイスであれば動くので一番手軽に使えそうです。

WebXR Device API

WebXR Device API - Web APIs | MDN

WebXR Device APIはWebVR APIの後継として仕様策定が進められているAPIです。詳細は以下の記事が参考になります。

ウェブブラウザでXRを身近にするWebXRとは？

現状ではAndroid ChormeはWeb XR Device APIをサポートしていますが、iOSではサポートされていません。

Can I use... Support tables for HTML5, CSS3, etc

8th Wall

Powering the world's WebAR | 8th Wall

8th Wallは有料なWebARフレームワークです。有料なだけあってデモを見る限り高機能で、これまでに紹介した手法では実現できないことも可能なようです。

まとめ

WebARをやる方法についてまとめてみました。ネイティブのAR機能ではなく、WebARを採用するということはクロスプラットフォーム性も考慮することになると思います。そうなると、Android Chromeしか対応していないWeb XR Device APIは使いづらいのかなという気がします。
3D モデルを表示するだけならば<model-viewer>、ビジョンベースやロケーションベースのARをやるのならばAR.js、より複雑なことをやるのであれば8th Wallを使用するのかなという印象です。
個人的にはiOSがWeb XR Device APIに対応するといいのですが...。

その他参考にしたページ

WebAR の現状確認 2019 Winter

jyuko49.com/entry/2019/05/23/083853

WebXR Device APIを使用した仮想現実（AR）アプリケーションの作成