「Reality Composer」でインタラクティブなAR

はじめに

Reality Composerは手軽にインタラクティブなARを制作することができるツール・アプリです。

iOS版とMac版が存在し、作成した.realityファイルはAR Quick Lookでの閲覧が可能となっています。
また、プロジェクトファイルとなる.rcprojectを開発中のアプリに組み込んで利用することも可能となっています。

今回はこのReality Composerが実際にはどのくらい手軽なのかということで、簡単なサンプルを作成するという形で試してみました。

作成したサンプルファイルはこちらになります。

roadBike ダウンロード

これより一連の作業の流れについて紹介していきたいと思います。

利用環境

Reality Converter : 1.0 (30.3)
Reality Composer(Mac) : 1.5 (180.5)
Reality Composer(iOS) : 1.5.2(151.27.0.1)
Blender : 3.0.0

iOS 15.3.1
macOS Big Sur 11.6.2

制作

今回はロードバイクの2箇所(ハンドル、サドル)をタップすると、対応箇所の名称がテキストで表示されるといったサンプルを作成しました。

3Dモデルの用意

ロードバイクの3Dモデルについては下記リンクのモデルを使用しています。
MirageYM/3DModels
モデルのライセンスはCC BY 4.0となっています。

また、インタラクティブな表現を行うためにこれらの3DモデルをBlenderで準備しました。

タップ位置を表す塗りつぶした円 (平面)
タップ位置が押せる状態である事を強調する円の枠線 (平面)
タップ位置と対応したテキストをつなぐ線 (円柱)
タップ範囲として扱う透明な球 (球体)

これらの3Dモデルについて、必要なものに関してはBlender上で拡大のアニメーションをつけています。

ちなみに試せていませんが、iPad版のReality ComposerではKeynoteで作成したオブジェクトを素材として使用できるというような情報があります。
試される際には環境を用意できるようであればそちらのやり方を検討してみるのも良いかと思います。

Reality Converter

USDZの作成についてはReality Converterベータ版を用いて作成しました。

● AR Creation Tools
https://developer.apple.com/augmented-reality/tools/
Reality Converterはこちらのリンクの下の方にあるDownloadから入手ができます。

まずはReality Converterを開きウィンドウに3Dモデルのデータをドラッグ＆ドロップしUSDZ作成のための調整を行っていきます。

ちなみにReality Converterでは直接OBJファイルをインポートすることもできますが、一度BlenderでOBJファイルからglTFファイルへ変換したものを使用すると最終的なUSDZのサイズが10MBほど軽くなるという結果がありました。

モデルの表示後に右上の「マテリアル」から見た目の調整が行えます。
各マテリアルの設定はテクスチャとして扱うようで、今回は単色のグレースケールの画像を用意しそれっぽい雰囲気となるように設定してみました。

Created by modifying “Road bike(Modeling done, no UV)”
(© Yasutoshi Mori (Licensed under CC BY 4.0）)
https://creativecommons.org/licenses/by/4.0/

右上の「プロパティ」アイコンで開く部分で単位の設定を行うことができます。
実際の表示内容に合わせておきましょう。
USDZファイルとしてコピーライトが必要な場合もここで設定します。

マテリアル、プロパティの設定が済んだらメニューの「ファイル」からUSDZファイルの書き出しを行います。
ちなみに書き出された.usdzファイルは拡張子を.zipとすることで簡単に展開し中身を見ることができます。
.usdcファイルとマテリアルで使用した画像が格納されていることが確認できるかと思います。

また、一度作成したUSDZのファイルはReality Converterへのドラッグ＆ドロップで再度編集することができます。

この時点で作成された.usdzファイルはそのままAR Quick Lookで使用することが可能となっています。

Reality Composer

今回はMacで大枠の作業を行いライブリンク機能でiPhoneによる表示の確認という流れで進めました。

起動

Mac版のReality ComposerはXcodeに機能として組み込まれています。
Xcodeを起動した上でのメニュー「Xcode」にある「Open Developer Tool」に「Reality Composer」の項目があり、そちらから起動が行えます。
また、Xcodeのプロジェクト内に.rcprojectがある場合では.rcproject表示の際の右上にある「Open in Reality Composer」からも起動できます。

新規作成時に問われるアンカーについてですが、今回のサンプルでは水平面にロードバイクを配置するものを想定しているため水平方向を選択しています。
「テンプレートコンテンツを使用」についてはチェックのままであれば最初にCubeとテキストが配置される状態で作業が開始します。

iOS版のReality Composerはストアからダウンロードが可能です。
https://apps.apple.com/jp/app/reality-composer/id1462358802

モデルの配置

作成したUSDZの読み込みは右上「追加」の「読み込む」から行えます。
その後まずは読み込み完了後に配置されるモデル自体を選択し、位置などを調整しましょう。

ロードバイク以外の3Dモデルも合わせて配置していきます。

テキストの配置

タップ時とモデルのライセンス表記に使用するテキストを配置していきます。
「追加」の中にあるテキストを選択し、用途に合わせて背景をあるなしなどを設定していきます。

「変更」で背景オブジェクトの変形などを行うことも可能です。

ビヘイビアの追加

インタラクティブ要素を取り入れるためにビヘイビアの設定を行なっていきます。
ビヘイビアはトリガとアクションシーケンスによって構成されています。

横の「+」から用意されている組み合わせやカスタムを選択して進めていきます。

また、アクションシーケンスは追加していった場合には左から1つずつ順番に行われていきますが、設定した内容をドラッグ&ドロップすることで同時に行わせることができます。

ビヘイビアの詳細について少し触れていきます。

「常にカメラを向かせる」の例

タップ時に表示するテキストや板ポリとして配置しているオブジェクトなど、常にカメラを向かせたいオブジェクトに対しては

トリガ	アクションシーケンス
シーン開始	カメラを見る

で実現できます。

アクションシーケンスでは向いている方向や回転させる軸の許可などが行えます。

USDZアニメーション

Blender上で作成したアニメーションについては、USDZアニメーションとして再生することが可能です。

ただ、ループさせたいアニメーションに関してはオブジェクト自体の表示/非表示を切り替えると不規則な確率でループが止まるというような状態がありました。
今回は非表示としたいタイミングで縮小する対応をしました。

iOS端末での確認

このように作ったものをiOS端末で即座に確認することができます。
iOS端末側でReality Composerを立ち上げておきMac側の「送信先」を選択すると、同じネットワーク内にある端末の選択画面が表示されます。
端末の選択を進めていくと同期が始まり完了後には先ほどまでMacで表示していた内容がそのままiOS端末上で表示されます。

「AR」ボタンを押すと、実際の「AR Quick Look」に近い内容で実際にAR的に配置を行って確認することができます。
また確認のみではなく、Macで行ってきた編集作業もiPhone端末上で継続することが可能です。

AR Quick Lookでの表示

AR Quick Lookで表示するためのHTMLでの配置について触れていきます。

まずはReality Composerの「ファイル」の1番下にある「書き出す」から.realityを書き出します。
書き出した.realityと別途用意したサムネイル画像を以下の形でHTML側に設定します。

<div>
    <a rel="ar" href="/assets/models/roadBike.reality">
        <img src="/assets/models/roadBike.jpg">
    </a>
</div>

配置した部分をiOS端末で確認するとサムネイル画像の右上にアイコンが表示されている状態となっており、サムネイルのタップでAR Quick Lookが起動することを確認できるかと思います。

Androidでは

補足情報となりますが、Androidで「AR Quick Look」と同様なものとしてはScene Viewerがあります。
こちらは3DモデルとしてglTF/GLBが使用できるものとなっています。

またiOSとAndroidで各々対応したものを機能させるものとしてはmodel-viewerが使用できます。
model-viewerのタグ内で各OSに合わせたファイルをsrcとios-srcに設定することで機能する様です。

さいごに

簡単にですが一通り動くものを作る形で試してみました。

実際にさわった感想としては、複雑な物を作りたい場合に細かい調整などは厳しいだろうと想定をしておりましたが、今回の様な単純なものであれば手軽を売りにしているということもあり、想像していたよりも簡単に作業が行えました。

アニメーション関連などの各環境で見え方が多少違っていたり、設定時間によって意図した動きとならなかったりなど気になるところは多少ありました。
しかし今後改善されるのではないかと思います。

昨年に発表されたObject Captureや、以前から噂されているApple Glassに対してなどで、「AR Quick Look」のみならずRealityKitとの連携としても今後ますます「Reality Composer」を活用する場面が増えることが期待できます。

皆さんもこの機会にさわってみるのはいかがでしょうか？

参考

● AR Quick Look
https://developer.apple.com/jp/augmented-reality/quick-look/

● Reality Composer
https://developer.apple.com/jp/augmented-reality/tools/

● MirageYM/3DModels
https://github.com/MirageYM/3DModels

● AR Quick Lookを使ったモデルのプレビュー
https://developer.apple.com/jp/documentation/arkit/previewing_a_model_with_ar_quick_look/

● Scene Viewer
https://developers.google.com/ar/develop/scene-viewer

● model-viewer
https://modelviewer.dev

● Object Capture
https://developer.apple.com/jp/augmented-reality/object-capture/

ギャップロ

アプリエンジニアのための技術情報サイト

「Reality Composer」でインタラクティブなAR

はじめに

利用環境