SafariなどのWebブラウザからARコンテンツを表示できます。
アプリをダウンロードする必要はありません。
以下のサムネイルは、実際にARタグがついているので、iOSデバイスでタップするとARプレビューが表示されます。
よかったら試してみてください。
（注）PCなどiOS以外のデバイスでクリックすると、realityファイルがリンクからダウンロードされます。

【球体と魚】

ユーザーの脱落を防ぐ

アプリをダウンロードするというのは、消費者にとって手間なものです。
「AppStoreにいって、ダウンロードして、アプリを起動する」というステップがあると、そのコンテンツに強い興味を持っていない場合は、表示を諦めてしまうかもしれません。
機会を失わないために、ブラウザのみでさっと表示できるARQuickLookは有効な選択肢になるのではないかと思います。

手順

１、RealityComposerでARシーンをつくる

手軽にARコンテンツを作成できるRealityComposerで表示するシーンを作ります。
水平面、垂直面、顔、画像、オブジェクト、の全てのアンカーが使えます。
デフォルトでPeopleOcclusionやモーションブラーなどのレンダリングも有効になっています。

RealityComposerの使い方については、
RealityKitの参考書の14.RealityComposerで手軽にシーンをつくるをご参照ください。

シーンを作ったら、
「ファイル」→「書き出す」→「現在のシーン」で、.realityファイルとして書き出します。

２、RealityファイルをWeb上に置く

Web上のアセットとして、Realityファイルを適当な場所に置きます。
今回は、FirebaseのStorageに置いてみました。

３、HTMLに書き込む。

以下のようにHTMLに書くことで、iOSデバイスでsafariやWebViewなどでページを開いてサムネイルをタップしたときに、ARプレビューが表示されます。

<div>
    <a rel="ar" href="https://firebasestorage.googleapis.com/v0/b/sincere-nirvana-292404.appspot.com/o/image.reality?alt=media&token=d2e93bb5-3c59-4c20-a639-58abd8b5ca0b">
        <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/b9b71c87-b8d0-acf0-a97e-71777b25e350.png">
    </a>
</div>

ここで
a rel：リンクタイプ
href：realityファイルのURL（もしくはページからの相対パス）
img src：サムネイルの画像のURL
です。

表示例：iOS端末でタップするとARプレビューに飛びます。

【雨とコアラ】

ちなみに、以下のようなサムネイルなしのrealityファイルのリンクを直にタップしても、ARプレビューが表示されます。

プレビュー画面の機能

プレビュー画面では、
ピンチやスワイプでコンテンツの拡大縮小、移動ができ、
ボタンで画像撮影もできます（長押しで動画撮影）。

RealityComposerのパッケージはこういうのと相性いい気がします。

🐣

フリーランスエンジニアです。
お仕事のご相談こちらまで。
作りたい機能やアプリの内容を教えてください。
rockyshikoku@gmail.com

Core MLやARKitを使ったアプリを作っています。
機械学習／AR関連の情報を発信しています。

Twitter
Medium