Reality Composer Proについて

♪♪ ♪ Eric Chiu： こんにちは Ericです 今日はReality Composer Proについて 詳しく説明します ご存じのように 2019年に Reality Composerが導入され 新しい拡張現実体験が始まりました 今回 xrOSのリリースに合わせて 導入されるReality Composer Proは 3Dコンテンツのコンポーズや編集 そしてプレビューに役立つ プロのデベロッパ用ツールです Reality Composer Proを使えば イマーシブな3D体験が作成できます 例として このインタラクティブな ジオラマアプリを見てみましょう 素晴らしい国立公園が ルームスケールで探索可能で 名所の説明も付いています このセッションでは このシーンの作成に使える Reality Composer Proの 様々な機能を見ていきます まずは新しいプロジェクトを作成し Reality Composer Proの 一般的なUIについて説明して 3D地形や位置情報ピンを使って メインのシーンをコンポーズし 地形の上に雲を追加して オーディオで鳥も追加します 統計情報を利用して パフォーマンスを最適化し そして最後には シーンのデバイス上のプレビューを チェックします では始めましょう 最初はプロジェクトの設定です 設定には2通りの方法があります 1つ目の方法は Xcode > Open Developer Toolに行って そこからReality Composer Proを開きます スタンドアロンの Reality Composer Proプロジェクトを 作りたい場合にはこの方法がお勧めです もう1つは xrOSの アプリのテンプレートを使って 新しいXcodeプロジェクトを作る方法です テンプレートが自動的に Reality Composer Proプロジェクトを 作成し Xcodeプロジェクトにリンクします この方法は Xcodeアプリで Reality Composer Proプロジェクトを 使いたい場合にお勧めです ここではジオラマアプリを この方法で作ります

Reality Composer Proプロジェクトは このSwiftパッケージです Swiftパッケージは Reality Composer Proでの作業が 簡単になるだけでなく プロセス構築の間に コンテンツをフレームワークに パッケージ化するので Xcodeアプリで使えるようになります それではFinderで Reality Composer Proプロジェクトの ストラクチャを見てみましょう ご覧のように 3Dコンテンツの編集に 使うファイルはUSD つまり ユニバーサルシーン ディスクリプションです Appleでは このファイルフォーマットが 3Dには好んで使われます 詳細については画面下に出ている USDファイルフォーマットについての WWDCセッションでどうぞ ファイルを整理する時は .rkassetsフォルダ内のUSDファイルはすべて フレームワークへとコンパイルされ Xcodeプロジェクトで使えるようになります Xcodeに戻ってパッケージを選ぶと デフォルトシーンの3Dプレビューが 表示されます 更にシーンを調べたり 編集したりしたい場合は 「Open in Reality Composer Pro」を クリックするだけです それではReality Composer Proの ナビゲートの仕方を見て UIを理解しましょう 中心にはviewportがあります viewportを使ってシーンの3Dオブジェクトを 可視化したりナビゲートしたり プレビューしたりします viewportを動かすのに使うのは W A S Dのキーと 矢印キーです 更にviewportのコントロールが欲しい場合は Mac対応のゲームコントローラを プラグインして viewportを自在に操る事ができます

左側には階層パネルがあります 階層パネルを使うと シーンの3Dオブジェクトを 検索したり 選択したり 整理するのが簡単になります 右側にはインスペクタパネルがあります インスペクタパネルを使うと 位置や回転方向やスケールなど 選択したオプジェクトのプロパティが 簡単に編集できます

インスペクタパネルの下にある 「Add Component」ボタンで オブジェクトで設定できる ビルトインのRealityKitコンポーネントを 見る事ができるようになっています 下側には編集パネルがあります 編集パネルの最初のタブは プロジェクトブラウザです プロジェクトブラウザを使うと Reality Composer Proプロジェクト内に 含まれるファイルを 分かりやすくナビゲートできます このパネルには 高度な編集のための ほかのタブも含まれています Shader GraphやAudio Mixer そしてStatisticsのタブです Reality Composer Proプロジェクトの 設定が終わり UIのナビゲート方法も分かったので シーンのコンポーズを始めましょう Reality Composer Proプロジェクトへの アセットの追加には3つの方法があります 最初は コンピュータ内の既存のアセットを プロジェクトブラウザに インポートする方法です ジオラマアプリに使うつもりの アセットをインポートしましょう プロジェクトブラウザにある インポートボタンを押します

よし！ これで全部のアセットが プロジェクトブラウザに入りました 2つ目は コンテンツライブラリで Reality Composer Proが提供する アセットの厳選ライブラリです

3つ目はObject Captureで 現実のオプジェクトの写真を 3Dモデルに変えます この詳細は WWDCセッション 「iOSのObject Captureについて」を ご確認ください これでアセットが プロジェクトにインポートされたので シーンの構築を始めましょう まずは テンプレートの球体を viewportで選択して「Delete」を押し 削除します プロジェクトブラウザに ヨセミテ公園の3Dモデルと それを入れるジオラマベースがあります この2つを階層パネルにドラッグすると シーンにそのアセットの レファレンスが追加されます ジオラマベースには マテリアルがないようですね コンテンツライブラリをチェックして 使いたいマテリアルが あるかどうか見てみましょう ツールバーのプラスボタンをクリックして コンテンツライブラリを開き 使えそうなマテリアルを探します このコンクリートの マテリアルは良さそうなので シーンにドラッグします アセットは自動的に プロジェクトへとインポートされ シーンに参照されます では 階層の中のジオラマベースの マテリアルを選択して コンクリートマテリアルが使えるように アップデートしましょう

良いですね！ では次に 位置情報のピンを配置しましょう 位置情報ピンをviewportに ドラッグ&ドロップして エルキャピタンに置きます

コマンドDを使って位置情報ピンを 2回複製し 3つのピンの名前を エルキャピタンと カセドラルロックスと マーセド川に変えます カセドラルロックスとマーセド川の ピンを正しい場所に 動かしましょう

これで位置情報ピンが 正しい位置に置かれたので これらのピンを整理するために グループにまとめて 「Yosemite_Location_Pins」という グループ名をつけましょう

もしも位置情報ピンを 新しいバージョンに アップデートしたい場合は？ ここにある位置情報ピンはすべて 先ほどインポートした 位置情報ピンファイルを参照しています USDの機能を使えば Location_Pinアセットを アップデートしたい場合でも 新しいLocation_Pinアセットを プロジェクトに インポートして 既存のものと置き換えられます

では パーティクルエミッタを 見ていきましょう パーティクルエミッタを使うと シーンに 炎などのエフェクトが 作成できます パーティクルエミッタは 2つの部分でできています パーティクルとエミッタの2つです どちらも色々手を加えられる 変数のセクションが複数あります パーティクルには 色やプロパティや フォースフィールドや レンダリングのセクションがあります エミッタにあるのはタイミングや形状や スポーニングのセクションです では パーティクルエミッタで雲を追加して シーンをもっと面白く ダイナミックにしましょう その方法とは？ Reality Composer Proプロジェクトは 好きなだけシーンの数が入れられます Xcodeアプリですぐに使えるような 完成したものでも 再利用可能なコンテンツでも構いません この場合では 雲は もっと小さな雲でできています 最初に作るのは 再利用できる 雲のかたまりのシーンです

その雲のかたまりを3Dシーンの いろいろな位置に組み合わせて 完成した雲のシーンを作成します 完成した雲の異なるバージョンを 3つ作成して 最後に その3つの雲をメインのシーンに配置します Reality Composer Proに戻り File > New > Sceneに行って 新しいシーンを作成しましょう このシーンを「Cloud_Chunk」と名付けます 新しいシーンが作成されると ウィンドウの新しいタブとして 表示されます このシーンにパーティクルエミッタを 加える方法が2つあります 最初は 階層パネルの一番下にある プラスボタンを使う方法です もう1つは インスペクタパネルの 一番下にある 「Add Component」ボタンをクリックして パーティクルエミッタを追加する方法です インスペクタパネルの 上の方にあるプレイバックコントロールで パーティクルエミッタの プレビューが見られます やや見にくいので 設定に行って viewportの背景を変更して パーティクルエミッタが 見やすいようにしましょう

だいぶ良くなりました パーティクルを使うのは楽しいです あれこれとプロパティを 試しているうちに 望んでいた結果にたどり着きます 欲しい結果が出る限り パーティクルエミッタの作り方に 正解不正解はありません ですが 覚えておきたいのは 一つのシーンに多数のパーティクルがあると パフォーマンスに影響する可能性があるので 使われているパーティクルの数に 常に注意を払うようにしましょう パーティクルエミッタコンポーネントには 2つのセクションがあって それはパーティクルと エミッタのセクションです パーティクルセクションでは 個々のパーティクルの見た目を コントロールします エミッタセクションでは パーティクルが原点から出てくる 出方をコントロールします 構築の元となるプリセットもあるので 最初からすべて作る必要はありません 雲はImpactプリセットに一番近いので 最初にImpactプリセットを選びましょう 私の典型的なワークフローでは 最初はエミッタタブに集中して そのあとにパーティクルタブに移ります エミッタタブを見ると 最初のセクションはタイミングです パーティクルのエミッション間には わずかなポーズがあります これはアイドルデュレーション変数に よるものです ゼロに設定すれば パーティクルのエミッションは 絶え間なくなります 形状のセクションに移って 雲の形状は筒状よりも球状なので エミッタの形状をSphereに変えましょう 次に 雲はパーティクルを その容積の中に持つべきなので その発生場所を SurfaceからVolumeに変えましょう また雲は 縦より横に広がるものなので X軸とZ軸のスケールを調整して Y軸スケールより大きくしましょう

良い感じですね 最後には isLocalSpaceをチェックして パーティクルエミッタの親の 今後の変換や回転やスケーリングが パーティクルエミッタ自身にも 適用されるようにします パーティクルタブに移って 個々のパーティクルの見た目を 調整しましょう バースレートは 一度に存在する パーティクルの数を定義します パフォーマンスに気を配り 2000から500に大きく下げて 違いが出るか見てみましょう 見た目にわずかな変化がありますが まだ良い感じなので 500のままにしましょう Impactプリセットのおかげで パーティクルの色やテクスチャは 既に望み通りなので これらのセクションでの 変数の修正は省略して プロパティセクションに移ります パーティクルの存在時間が 少なすぎるようですね ライフスパンを2秒から5秒に増やしたら どうなるでしょうか

良いですね ほかにも変数を変えられるセクションは MotionやForce Fieldsや Renderingがありますが 今のところ エフェクトは希望通りなので それらのセクションでは 今は修正しないでおきましょう ショートカットCommand-Sを使って シーンを保存し 次のステップへと移ります よし！ これで雲のかたまりができたので これを再利用します 今度は 複数の雲のかたまりを組み合わせて 完成した雲の新しいシーンを作りましょう ショートカットCommand-Nを使って 新しいシーンを作成します このシーンを「Cloud_A」とします

プロジェクトブラウザから Cloud_Chunkアセットを 階層パネルにドラッグして 雲のかたまりを 3回参照します

これらの3つの雲のかたまりの 親を選んで インスペクタパネルのトップにある プレイバックコントロールの プレイを押せば 雲がプレビューできます 今度は マニピュレータを使って これらの3つの雲のかたまりを 3D空間の異なる位置に動かしましょう

凄いですね 1つの結合した完全な雲のようです 再びCommand-Sを使ってシーンを保存します 雲のバリエーションが欲しいので Cloud_Aの作成と同様のプロセスですが 雲のかたまりの配置を変えて あと2つの雲を作りました これらのシーンはCloud_Bと Cloud_Cと名付けました それでは メインのシーンに戻りましょう 「雲」という名のグループを作り Cloud_Aと Cloud_BとCloud_Cを このグループにインポートしました そしてこの3つを地形の上に うまく並べました パーティクルエミッタを 一度にプレビューするには グループ「雲」をクリックして インスペクタパネルのトップにある プレイバックコントロールを押すだけです 良いですね 出来上がってきました 次は シーンにオーディオを 取り込む方法です オーディオの追加には オーディオファイルと オーディオファイル グループと オーディオソースが使えます プロジェクトブラウザからシーンに インポートされたオーディオは 様々な方法で設定でき 例としては ループの有無です オーディオファイルは 複数オブジェクトでプレイできて オブジェクトは複数のオーディオ ファイルをプレイできます

オーディオファイルグループは シーンのオーディオファイルから 構築する事ができます オブジェクトがオーディオファイル グループをプレイするたびに グループから無作為なオーディオファイルが プレイバックに選ばれます

オーディオファイルや オーディオソースファイルが どのようにシーンに発せられるのかは オーディオソースが決めます オーディオソースには3種類あって 「空間」と「アンビエント」と 「チャンネル」です 空間オーディオソースは 3D空間でオーディオが プレイされる位置や方向を提供します テーブルに置かれたラジオアセットに 空間オーディオを使う感じを 想像してみてください アンビエントオーディオソースは 3D空間でオーディオが プレイされる位置ではなく 方向だけを提供します 東から吹く風の音に アンビエントオーディオを使うと どれだけ東の方へ歩いて行っても 風は常にその方向から 聞こえてくるのを想像してください 最後のチャンネルオーディオソースは 3D空間でオーディオが プレイされる位置も方向も提供しません 環境として背景音楽に チャンネルオーディオを使うのを 想像してください これでオーディオオーサリングの 概念は分かったので ジオラマプロジェクトで どう使われるのか見てみましょう 3Dモデルの鳥と オーディオファイル及び オーディオソースを組み合わせて 再利用できるアセットとしての 新しいシーンを作ります Command-Nで開き シーン名を 「Bird_With_Audio」とします

前もってプロジェクトブラウザに 鳥のアニメーションと 鳥の鳴き声のオーディオファイルを 2つインポートしてあります これらのアセットを 階層パネルにドラッグして このシーンにレファレンスとして 追加しましょう これで シーンのどのオーディオソースも 鳥の鳴き声の2つのオーディオファイルを 利用できるようになりました 次は 階層パネルの一番下にある プラスボタンを使って 空間オーディオソースを追加しましょう シーンのあらゆるオブジェクトに 空間オーディオを加えることもでき インスペクタパネルの一番下にある 「Add Component」ボタンをクリックして メニューの「Spatial Audio」を 選ぶだけです 空間オーディオソースは 位置と方向があるので 鳥のクチバシの近くに置いて 現実味を出しましょう

インスペクタパネルのトップにある プレイバックコントロールで 空間 オーディオソースをプレビューできます

空間オーディオコンポーネントの プロパティで ほかにも調節できるのは 焦点や プレビューする鳥の鳴き声の オーディオなどです

では 常に空間オーディオソースで 2つの鳥の鳴き声から1つを 無作為に選んでプレイしたい場合は？ そこで オーディオファイル グループの出番です 階層パネルの一番下の 同じプラスボタンを使って オーディオファイルグループが作れます これらのオーディオファイルを オーディオファイルグループにドラッグして グループ名を「Bird_Calls」としましょう

これで 空間オーディオソースが プレビューされるたびに オーディオファイルグループ内の 鳥の鳴き声の1つが 無作為に選ばれてプレイされます

これで再利用可能なアセットの 作成は終了したので このBird_With_Audioシーンを 保存終了して メインのシーンを再び開けましょう Birds_With_Audioのレファレンスを 「Birds」というグループの中に V型のパターンで5つアレンジしました 「Birds」のグループを選び インスペクタパネルの プレイバックコントロールを押せば すべての鳥のアニメーションと オーディオが同時に プレビューできます 見た目も鳴き声も良いですね！ 同様の手順を使って メインのシーンに「Forest_Sounds」 オーディオファイルを加え 一緒に付けたアンビエント オーディオソースの名前は 「Nature _Ambience」です Xcodeアプリでオーディオをプレイするには 追加のコードが必要ですが それについての説明は WWDCセッション 「Reality Composer Proコンテンツの Xcodeでの使用」をご確認ください メインのシーンでのコンテンツが 設定できたので Statisticsの使い方について説明します Statisticsは シーンのパフォーマンスを 最適化するのに役立つエディタです カテゴリが分かれていて 一般 フィジックス アニメーション パーティクルエミッタ オーディオ マテリアル ジオメトリ そしてテクスチャです このメインのシーンで Statisticsを試してみましょう 編集パネルのStatisticsタブを クリックすると カテゴリのコレクションが表示されます 各カテゴリの 右上のコーナーにある展開ボタンで カテゴリの詳細ビューが開きます ジオメトリの展開ボタンをクリックすると シーンに使われている三角形は 約464,000個あり Diorama_Baseで使っている三角形が 最も多くて 256,000個だと分かります ここで ある事に気づきました ジオラマベースベースの形は 見た目は3D地形よりシンプルですが 地形よりもたくさんの三角形を 使っているという事です これは 3Dモデリングソフトウェアで ジオラマベースのジオメトリを 単純化するチャンスです 運良く 同僚のScott Wadeが このジオラマアプリのアセットを 作成したのですが この件を手伝ってくれました プロジェクトブラウザのインポートボタンで ジオラマベースの新たな簡易版が インポートできます 新しいDiorama_Baseを選んで 既存のものと置き換えます 再び Statisticsに戻って ジオメトリカテゴリを見てみましょう

Diorama_Baseが使う三角形は 2,500個だけになりました シーンで使われる三角形の数が 464,000から210,000に減りました これは半分以上です！ シーンは変更前と比べて 見た目は変わりません 今見たように Statisticsは シーンのパフォーマンス最適化に 非常に便利なツールです 最後に もう1つ デバイス上でのプレビュー方法を 見てみましょう ヘッドセットをコンピュータに接続したら ツールバーにある デバイス上プレビューボタンの隣の ドロップダウンで選択して デバイス上のプレビューボタンを トグルします ARで目の前にシーンが現れてくるはずです ピンチやドラッグでシーンを回転させたり

シーンの縮尺に合わせて ズームしたりできます これで この3Dコンテンツが 目的のxrOS プラットフォームで どう見えるのか分かり易くなります 時間の都合で このセッションで行ったのと 同じようなステップを踏んで 別の国立公園 カタリナ島を 私が作っておきました 同じワークフローを使って カタリナ島の 3D地形をメインのシーンに追加しました 幾つかの位置情報ピンも追加して トゥーハーバーズと パーソンズランディングと リボンビーチをマークしました 最後に Nature_Ambienceオーディオ シーンで使えるように Ocean_Soundsオーディオファイルを 追加しました 本日 みなさんに説明した Reality Composer Proは 3Dシーンを組み立てるのに役立つ パワフルなツールです パーティクルエミッタや オーディオソースのような 興味深いRealityKitコンポーネントを 追加する事ができます また シーンの最適化や ヘッドセットでのプレビューも しやすくなっています ヨセミテとカタリナ島の地形間を 移動するための Shader Graphの使い方について 詳細を学ぶためには Neilのセッション 「Reality Composer Proにおける マテリアルの詳細」をご確認ください また この体験をどのように インタラクティブにするかについては Amandaのセッション 「Reality Composer Proコンテンツの Xcodeでの使用」でどうぞ 是非 Reality Composer Proで ワクワクする体験を開発してください ご視聴ありがとうございました！ ♪