Reality Composer ProコンテンツのXcodeでの使用

Reality Composer ProコンテンツのXcodeでの使用

Reality Composer ProのコンテンツをXcodeに持ち込む方法を確認しましょう。Xcodeに3Dシーンをロードし、コンテンツとコードを統合し、アプリにインタラクティブ性を追加する方法を紹介します。また、開発ワークフローでこれらのツールを一緒に使用するためのベストプラクティスとヒントについても共有します。このセッションを最大限に活用するためには、まず「Reality Composer Proについて」と「Reality Composer Proにおけるマテリアルの詳細」を見て、3Dシーンの作成について確認することをお勧めします。

関連する章
- 0:00 - Introduction
- 2:37 - Load 3D content
- 6:27 - Components
- 12:00 - User Interface
- 27:51 - Play audio
- 30:18 - Material properties
- 33:25 - Wrap-up
リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
WWDC21
- RealityKit 2の詳細
ダウンロード

♪♪ ♪ こんにちはAmandaですエンジニアとしてRealityKitと Reality Composer Pro を担当していますこのセッションではReality Composer Proで構築した 3Dコンテンツによる空間体験の構築方法をお伝えします Reality Composer Proは空間コンピューティングアプリで使用する RealityKitコンテンツを準備するためのデベロッパツールですこのセッションでは同僚のEricとNielsが彼らのセッションで作成したプロジェクトを基にコードでインタラクティブにそれを活用する方法を確認します彼らのセッションをまだ見ていない場合確認されることをお勧めしますセッションで解説されている Reality Composer ProのエディターのUIと機能について一通り確認いただけますまず完成品を見て各パーツをどのように作成したかを説明しますご覧いただいてるのはヨセミテ国立公園の地形図ですヘッドセットで見ることで実際に現地に行かないと味わえなかったような広大さを実感できます以前のReality Composer Proのセッションでは Ericがこのシーンを組み立て Nielsが地形で使用しているマテリアルを作成しましたここにカリフォルニアの 2つのランドマークの間をモーフィングするためのスライダを追加しました今見ているのはロサンゼルス沖にあるカタリナ島です 3D空間に配置された 2DのSwiftUIボタンもありマップ内のさまざまな特定のポイントでホバーするようにしていますこのセッションでは体験をより良いものにするために Reality Composer Proでコンテンツをどのようにアレンジしたかについて解説しますそしてこのスライダや特定ポイントを Reality Composer Pro 作成したシーンとシーンにおけるエフェクトをどのように関連付けたかについてもご紹介しますまずReality Composer Proのプロジェクトから 3Dコンテンツをプログラムでロードすることからスタートします RealityKit コンポーネントがどのように機能するのかそれらをコードでどのように利用できるのかや独自のカスタムコンポーネントの作成についても見ていきます SwiftUIの新しい RealityView APIについてまたユーザーインターフェイス要素を Attachments API を使用してシーンに追加する方法も確認しますまたReality Composer Proで設定したオーディオ操作についても確認します Nielsがシェーダーグラフを使用して作成したカスタムマテリアルを接続しコードからその要素を駆動するようにしますでは早速始めましょう Ericのセッションではジオラマのすべてのアセットを含む Reality Composer Pro プロジェクトを作成し良いものができました上部のこれらのタブはそれぞれ実行時にロードできる１つのルートエンティティを表しますシーンに多くのものを入れましたがそれを完全に整理されたシーンとして取り扱うことができますあるいはいくつかだけを配置してそのシーンを再利用可能な集合体のように扱うことも可能です数も必要なだけ作れます DioramaAssembled というシーンを実行時にどうやって読み込むのかについて見ていきましょうエンティティの非同期のイニシャライザを使用して Reality Composer Pro パッケージにあるコンテンツを持つエンティティを作成します文字列名を使用してロードするエンティティを指定しパッケージが生成するバンドルをそれに与えます Reality Composer Pro プロジェクト内でその名称が見つからない場合はスローされます realityKitContentBundle はReality Composer Pro パッケージ内で自動生成される定数値ですこれはRealityViewのmake クロージャに組み込まれます RealityViewは新しい種類の SwiftUIビューですこれがRealityKitへの入り口ですこれがSwiftUIとRealityKitの世界の間の架け橋となりますこのRealityViewについてはこのセッションの後半でさらに詳しく説明します Xcodeプロジェクトで使用していて Reality Composer Pro プロジェクトに追加していない USDアセットがある場合はこれらのアセットをSwift パッケージに格納しその中の.rkassetsディレクトリに入れておくことを強くお勧めします Xcodeは.rkassetsフォルダを実行時の読み込みがより速い形式になるようにコンパイルします先ほどロードしたエンティティは実際にはより大きなエンティティ階層のルートとなりますこれには子エンティティがありその子エンティティも存在しますこれはReality Composer Pro シーンでアレンジしたもの全体です階層の下位のエンティティにアドレス指定したい場合は Reality Composer Proで適宜名称を設定することができランタイムでシーンに対してその名称でエンティティを検索するよう依頼することができますエンティティは Entity Component System すなわち ECSの一部を構成するものです ECSはRealityKitとReality Composer Proを支えるものですここでステップバックし ECSの理解を深めることにしましょう ECSはオブジェクト指向プログラミングに類似するものですがいくつかの重要な点で違いがありますオブジェクト指向プログラミングの世界ではオブジェクトにはその性質を定義する属性であるプロパティと関数によって構成されますこれらのプロパティと関数はオブジェクトを定義するクラスに記述します ECSではエンティティとはシーン内に表示されるものを指しますそれが非表示の場合もあります属性やデータは保持しません代わりにデータをコンポーネントに格納しますコンポーネントはアプリの実行中にいつでもエンティティに追加または削除できるのでエンティティの性質を動的に変更できますシステムはビヘイビアが存在する場所となりますフレームごとに1回呼び出される update関数がありますそこに進行中のロジックが配置されますシステムでは特定のコンポーネントが含まれるすべてのエンティティまたはコンポーネントの構成をクエリしてから次に何らかのアクションを実行して更新されたデータをコンポーネントに格納し直します ECSに関する詳細は 2021年の「RealityKit 2の詳細」セッションや本年度の「RealityKitによる空間体験の構築」をチェックしてみてください次にコンポーネントについて見ていきますまずReality Composer Pro プロジェクトのエンティティにコンポーネントを追加する方法を見ていきます次にジオラマ上に位置マーカーを作成するためのカスタムコンポーネント作成法について確認します Swiftでコンポーネントをエンティティに追加するには entity.components.set() と定義ししてからコンポーネントの値を付与します Reality Composer Proで同じ作業を行うにはビューポートまたは階層内で必要なエンティティを選択します
次にインスペクタパネルの下部にあるボタンをクリックしてリストを表示し RealityKitの利用可能なコンポーネントを表示します
コンポーネントは必要なだけエンティティに追加できますが追加できるのは各タイプごとに1つだけですセットだからですこのリストには作成したカスタムコンポーネントも表示されます Reality Composer Proを使用して独自のカスタムコンポーネントを作成する方法を見てみましょう地形上の特定の点の上に浮かぶフローティングボタンを作成してそれらを選択できるようにしそのスポットに関する詳細情報を表示させます多くのUIと機能をコードで準備しますがこれらのエンティティをマークする方法をご紹介したいと思います Reality Composer Proでフローティングボタンを表示する位置として使用しますこれを行うには地形図上の場所にエンティティを追加してアプリにフローティングボタンを表示したい場所であることを明示させます次に各場所に関する情報を格納するための POIコンポーネントを作成します次にXcodeで PointOfInterestComponent.swiftを開いて編集し名称や説明などのプロパティを追加します Reality Composer Proでは新しい PointOfInterestComponentをエンティティのそれぞれに追加しプロパティの値を入力しますでは最初の位置マーカーエンティティであるカタリナ島のリボンビーチを作成しましょうプラスメニューをクリックしを選択して新しい非表示のエンティティを作成します
エンティティにRibbon_Beachと名称設定できますこのエンティティを島のリボンビーチが実際にある場所に配置してみましょう通常「コンポーネントの追加」ボタンをクリックしますが今回は「新規コンポーネント」を選択します自分たちで1から作るためです
「PointOfInterest」という名前を付けましょう
これで他のコンポーネントと同様インスペクタパネルに表示されます
ところでこのcount プロパティとは何でしょうか Xcodeで新しいコンポーネントを開いてみましょう XcodeではReality Composer Proが PointOfInterestComponent.swiftを作成したことが確認できます Reality Composer Pro プロジェクトは Swiftパッケージであり生成したばかりのSwiftコードでこのパッケージに存在しますテンプレートコードを見ると countプロパティがそこに由来していることがわかります別のプロパティも用意してみましょう興味のあるポイントがどのマップに関連付けられているかマップを変更すると名所をフェードアウトできるよう適切なものをフェードインしますここで列挙プロパティである var regionを追加します enumのregionを作成して 2つのマップしか構築していないためここでは２つのケースを考えますカタリナとヨセミテです文字列としてシリアライズできますまたReality Composer Proが認識できるよう Codableプロトコルにも準拠しておりインスタンスをシリアライズ可能にします Reality Composer Proに戻ると countプロパティが消え新しいregionプロパティが表示されますデフォルト値はyosemiteですこれはコード内で初期化したものであるためですこのエンティティについてはここでオーバーライド可能ですこれをオーバーライドするとこの値はこのエンティティに対してのみ有効になります残りのPOIコンポーネントのデフォルト値はオーバーライドしない限りyosemiteです PointOfInterestComponentをシグニファイアつまりこれらのエンティティへのマーカーのように使用しますこれらのエンティティは実行時にSwiftUIボタンを配置する場所のプレースホルダのように機能しますリボン・ビーチを追加したのと同じ方法で他のカタリナ島の観光スポットを追加しますアプリを実行して新しいカスタムコンポーネントの挙動をチェックします
何も起こりませんねこれはPOIコンポーネントを処理するコードがまだ記述されていないためですということで設定しましょう SwiftUIコンテンツを RealityKitシーンに配置する新しい方法があります。それが Attachements APIと呼ばれるものですアタッチメントを PointOfInterestComponentと組み合わせてホバリングボタンを作成します実行時にカスタムデータを使用しますまずこれをコードで見てからデータフローについて説明しますアタッチメントはRealityViewの一部ですまずRealityViewの構造を示す簡略化された例を見てから SwiftUIビューのRealityKitシーンへの取り込みについて確認しますこれから使用するRealityView イニシャライザは 3つのパラメータを取ります makeクロージャと updateクロージャおよびattachementsビュービルダです少し具体化して最低限の機能を追加してみましょう緑色のSwiftUIボタンで Attachment Viewを作成しそれをRealityKit シーンに追加します attachmentsビュービルダで通常のSwiftUIビューを作成しますビューモディファイアやジェスチャーなど SwiftUIが提供するすべての機能を利用できますビューに一意のhashableタグを付けますこのボタンビューに魚の絵文字をタグ付けすることにしましたその後SwiftUIが更新クロージャを呼び出すとボタンViewがエンティティになりますこれはこのクロージャのattachments パラメータに保存されており前に付けたタグを使用して取り出しますその後他のエンティティと同様に扱うことができますこれをシーン内の既存のエンティティの子として追加します新規のトップレベルのエンティティとして追加することもエンティティコレクション内への追加も可能ですしかも通常のエンティティになるので 3Dで希望する場所に表示されるよう位置を設定したり必要なコンポーネントを追加することもできます RealityViewから別の部分にデータがどのように流れるかを次に示しますこのRealityView イニシャライザの 3つのパラメータを見てみましょう 1つ目はmake でここでロードし Reality Composer Pro バンドルの初期セットアップシーンのエンティティとして作成してから RealityKit シーンに追加します 2番目はupdateでビューの状態に変化があったとき呼び出されますここではコンポーネントのプロパティや位置エンティティに関する変更を行えますさらにシーンにエンティティの追加や削除もできますこのupdateクロージャはフレームごとに実行されるわけではありません SwiftUIのビューステートが変化するたびに呼び出されます 3番目はattachementsビュービルダですここでRealityKitシーンに挿入する SwiftUIビューを作成できます SwiftUIビューは attachementsビュービルダから始まり updateクロージャの attachementsパラメータを通じて伝えられる形になりますここではattachementsビュービルダでボタンに指定したのと同じタグのエンティティがあるかどうかを attachmentsパラメータに問い合わせます存在する場合はRealityKit エンティティが提供されます updateクロージャで3D位置を設定し RealityKitシーンに追加しますどこにいても宙に浮かんでいるのを見られますここではボタンエンティティを球体エンティティの子として追加しました親の0.2メートル上に配置しました makeクロージャには attachmentsパラメータもありますこれはこのビューが最初に評価されるときに準備ができているアタッチメントを追加するためのものですがそれはmakeクロージャが 1回しか実行されないためです RealityViewの一般的なフローが理解できたので updateクロージャについてさらに詳しく見ていきましょう makeおよびupdate クロージャのパラメータは RealityKitContentです RealityKit コンテンツにエンティティを追加するとシーン内のトップレベルのエンティティになります同様にupdate関数からコンテンツにエンティティを追加することでシーン内の新しいトップレベルのエンティティを提供します makeクロージャは1回だけ呼び出されますが updateクロージャは複数回呼び出されます updateクロージャで新しいエンティティを作成しそこにあるコンテンツに追加するとそのエンティティのコピーが取得されますがこれは希望どおりにならない可能性がありますこれを防ぐには一度だけ実行される場所で作成されたエンティティのみをコンテンツに追加する必要があります content.entitiesにエンティティが含まれているかどうかを確認する必要はありません同じエンティティでaddを2回呼び出した場合はセットのように何も処理されませんエンティティを既存のエンティティの親にする場合も同様でシーン内に2度追加されることはありませんアタッチメントエンティティはみなさんが作成するのではなく attachementsビュービルダ内で提供したアタッチメントビューごとに RealityViewによって作成されますつまり既存どうかを確認せずに updateクロージャのコンテンツにそれらを追加しても安全です以上が名所をattachementsビュービルダにハードコーディングしたい場合の attachementsのコードの書き方ですただしReality Composer Pro プロジェクトのデータで体験をドライブするようにしたいのでもっと柔軟にしたいと思いますそうすることでデザイナーやプロデューサーは Reality Composer Proプロジェクトで関心のあるポイントを作成できコードは追加されるどんなデータにも対応できるようになりますデータ駆動型にするには Reality Composer Proシーンで設定したデータコードを読み取る必要がありますアタッチメントビューを動的に作成しましょう大まかに言うと作業は次のとおりです Reality Composer Proではすでにリボン・ビーチのプレースホルダエンティティが設定されておりジオラマで強調表示したい他の名所についても同様です名称や関連づけを行うマップなど必要とするすべての情報を入力します次にコードでこれらのエンティティをクエリしそれぞれに新しいSwiftUI ボタンを作成します SwiftUIで attachementsビュービルダを呼び出すには新しいボタンをコレクションに追加するたびに @Stateプロパティラッパをコレクションに追加しますこれらのボタンはattachements ビュービルダに提供されますそして最後にRealityViewの updateクロージャでボタンをエンティティとして受理しますそして新しいボタンエンティティをシーンに追加しますそれぞれを Reality Composer Proで設定したマーカーエンティティの子として追加しますより詳細な図を通してこれら 6つのステップを理解してからコードを見てみましょうまずReality Composer Pro シーンに非表示のエンティティを追加します非表示エンティティを希望する場所に配置し X軸とY軸とZ軸上にボタンを表示させますここではすべてのエンティティにデフォルトで備わっている Transformコンポーネントを利用しています次に PointOfInterestComponentをそれぞれに追加しますこのコードではシーン内のすべてのエンティティをクエリすることで PointOfInterestComponentへのエンティティの参照を取得できますクエリはReality Composer Proで設定した 3つの非表示エンティティを返しますそれぞれに対して新しい SwiftUIビューを作成してコレクションに保存しますボタンをRealityViewに取り込むには SwiftUIのビュー更新フローを利用しますこれはビュー内のボタンのコレクションに @Stateプロパティラッパを追加することを意味します @Stateプロパティラッパはこのコレクションに項目を追加するときに SwiftUIに次のように指示します SwiftUIはImmersiveViewでビューの更新をトリガーする必要がありますこれによりSwiftUIは attachementsビュービルダと updateクロージャを再度評価します RealityViewの attachementsビュービルダは SwiftUIに宣言する場所でこれらのボタンをエンティティにするのに必要です次にRealityViewのupdate クロージャが呼び出されボタンがエンティティとして配信されますこれらはもうSwiftUIビューではありませんそのためエンティティ階層に追加可能です updateクロージャではアタッチメントエンティティをシーンに追加して非表示エンティティ上にそれぞれフローティングして配置しますこれでジオラマシーンを見るときに視覚的に表示されるようになります各ステップがどのように行われるかを見てみましょうまずReality Composer Proシーンで非表示エンティティをマークしますマークしたエンティティを見つけるために EntityQueryを作成しますこれを使用して PointOfInterestComponentを持つすべてのエンティティを要求します次にQueryResultを反復処理し PointOfInterestComponent シーン内のエンティティごとに新しいSwiftUIビューを作成します次にReality Composer Pro コンポーネントから取得したデータを入力しますそのビューはattachementsの 1つになるのでそれにタグを付けます今回は少し真面目に行くとして魚の絵文字ではなく ObjectIdentifierを使用しますここはSwiftUIビューのコレクションを作成する部分ですアタッチメントを提供するためのこれをattachmentsProviderと呼んでおり RealityViewのattachements ビュービルダに追加しますビューをattachmentsProviderに保存しますコレクションタイプを見てみましょう AttachmentsProviderにはビューへのアタッチメントタグの辞書がありますビューをタイプ消去することで LearnMoreView以外のビューの挿入を可能にします sortedTagViewPairsというプロパティはタプルの配列を返しタグとそれに対応するビューも毎回同じ順番で返します次にattachements ビュービルダで attachementsのコレクションに対しForEachを実行しますこれはSwiftUIにビューが 1つ必要であることを伝え与えたそれぞれのペアに対してコレクションからのビューを提供しますここではObjectIdentifierにビューのアタッチメンtタグとしての 2つの役割を付与し ForEach構造体の識別子としても認識させますなぜ代わりに PointOfInterestComponentにタグプロパティを追加しなかったのでしょうかアタッチメントタグは ForEach構造体に対してもアタッチメントのメカニズムが機能するためには一意である必要がありますまたカスタムコンポーネントのすべてのプロパティが Reality Composer Proのインスペクタパネルに表示されるためコンポーネントをエンティティに追加すると attachmentTag もそこに表示されることになります Reality Composer Proで名所を追加するときすべてのタグを一意化することを覚えておくことは負担になるかと思いますでも都合の良いことにエンティティは Identifiableプロトコルに準拠のため識別子があり自動的に一意になりますこの識別子は事前に知っておく必要がなく Reality Composer Proでシーンをデザインしているときエンティティから取得できます AttachmentTagプロパティを Reality Composer Proに表示しないようにするには次のテクニックを使用します「デザイン時と実行時のコンポーネント」データを2つの異なるコンポーネントに分割し 2つは配置したいデザイン時のデータ用として Reality Composer Pro内に配置しもう1つは同じエンティティに添付する実行時のデータ用として実行時に動的に配置しますこれはReality Composer Proのインスペクタパネルに表示したくないプロパティ用ですそこで新しいコンポーネントを定義します PointOfInterestRuntimeComponentを作成してその中にアタッチメントタグを移動します Reality Composer Proは読み取った内容に基づいて Swiftパッケージに含まれるコンポーネントUIを自動的に構築しますパッケージ内のSwift コードを検査し codableなコンポーネントを作成しシーンに応じて利用しますここでは4つのコンポーネントを示しますコンポーネントAとBは Xcodeプロジェクト内にありますが Reality Composer Pro パッケージには含まれないため Reality Composer ProのエンティティにアタッチできませんコンポーネントCはパッケージ内にありますが codableではないため Reality Composer Proは無視しますここに表示されている4つのコンポーネントのうちコンポーネントDのみが Reality Composer Proリストに表示されその理由というのはこれがSwiftパッケージ内にあり codableコンポーネントであるためですこれはデザイン時のコンポーネントで他は実行時のコンポーネントとして使用できますデザイン時のコンポーネントはより単純なデータを格納し intやstringやSIMD値など 3Dアーティストやデザイナーが活用するものですカスタムコンポーネントにプロパティを追加すると Xcodeプロジェクトでエラーが表示され Reality Composer Proがシリアライズしませんさてコードに戻りましょうまずPointOfInterestの実行時のコンポーネントをエンティティに追加します次に実行時のコンポーネントを使用してアタッチメントエンティティを照合することでジオラマ上の対応する名所も表示されますここで実行時のコンポーネントの出番です PointOfInterest エンティティを読み取りアタッチメントビューを作成している箇所にいますすべてのデザイン時のコンポーネントをクエリしました次にそれぞれに対応する新しい実行時のコンポーネントを作成します AttachmentTagを実行時のコンポーネントに保存し実行時のコンポーネントを同じエンティティに保存しますこのようにデザイン時のコンポーネントはシグニファイアのようなものですこれはアプリにattachementsの作成を要求していることを伝えます実行時に必要なもののデザイン時のコンポーネントには保存したくないようなものを実行時のコンポーネントが処理します RealityViewではアタッチメントエンティティがシーンに表示されるのを確認するまでにもう1つのステップがあります attachementsViewBuilderで SwiftUIビューを提供すると SwiftUIはRealityViewの updateクロージャーを作成し attachementsを RealityKitエンティティとして提供しますしかし配置せずに単にコンテンツに追加するとシーンの原点の位置である 0, 0, 0の位置に表示されてしまいます想定している挙動ではありません地形上の各関心のある地点の上にそれらを浮かせたいわけですアタッチメントエンティティと非表示の名所のエンティティを Reality Composer Proで設定したのと一致させる必要があります非表示のエンティティに配置したランタイムコンポーネントにはタグが含まれていますこれによりどのattachmentEntityが名所のエンティティに対応するかを照合することが可能になりますすべての PointOfInterestRuntimeComponentsをクエリし各エンティティからランタイムコンポーネントを取得クエリによって返された場合はコンポーネントのattachmentTag プロパティを使用して updateクロージャへのattachmentsパラメータから attachmentEntityを取得次にattachmentEntityをコンテンツに追加し対象エンティティの 0.5メートル上に配置しますアプリを再度実行してどのようになるかを確認してみましょういい感じですね！ Reality Composer Pro プロジェクトで地名を配置した場所の上にそれぞれの地名が浮かんでいるのがわかります次にReality Composer Proで設定したオーディオを再生する方法を見てみましょう Reality Composer Proでオーディオをセットアップするにはプラスボタンをクリックしてオーディオエンティティを取り込みます「オーディオ」を選択してから「アンビエントオーディオ」を選択これにより AmbientAudioComponentを含む通常の非表示エンティティが作成されますカタリナ島の音を再生するために使用するのでエンティティにOceanEmitterという名称を付けますオーディオファイルもシーンに追加する必要があります海の音を取り入れてみましょう
コンポーネントの「プレビュー」メニューでサウンドを選択するとオーディオコンポーネントをインスペクタパネルでプレビューできますが選択したサウンドはエンティティがアプリに読み込まれるとき自動的には再生されません再生するにはオーディオリソースをロードし再生するよう指示する必要がありますこのサウンドを再生するにはオーディオコンポーネントを配置するエンティティへの参照を取得しエンティティに OceanEmitter という名前を付けたのでその名前のエンティティを見つけます AudioFileResource イニシャライザを使用してサウンドファイルをロードしオーディオファイルリソースプリムへのフルパスを渡しますこれにReality Composer Pro プロジェクトに含まれる.usdaファイルの名前を付けますこの場合 DioramaAssembled.usda という名前のメインシーンです entity.prepareAudioを呼び出して audioPlaybackControllerを作成しますこのサウンドを再生や停止できるようにしますこれでplayを呼び出す準備が整いましたこれがアプリで再生されている海の音ですアプリのスライダは２つの異なる地形マップの間でモーフィングしますがヨセミテとカタリナ島です
シーンにオーディオを導入したので２つのオーディオソース間でクロスフェードします ocean emitterエンティティを追加したのと同じ方法で forest audio emitterを追加しますスライダを使用して地形をどのように変形させるかを見ますがこのトランジションには音声も含まれますシェーダーグラフマテリアルのプロパティを使用して 2つの地形間をモーフィングしますその方法を見てみましょう NielsのセッションでReality Composer Proのシェーダーグラフを使用してこの美しいジオメトリモディファイアを作成してくれましたこれでシーンに接続し実行時にいくつかのパラメーターを駆動できるようになりましたこのシェーダーグラフマテリアルをスライダで接続したいと思いますそれには入力ノードをプロモートする必要がありますコマンドを押しながらノードをクリックし「プロモート」を選択します。これによりマテリアルのこの部分に実行時にデータを供給することがプロジェクトに伝えられますこのプロモートされたノードに Progressという名前を付け実行時にその名前でアドレス指定できるようにしますコード内でこの値を動的に変更できるようになりましたマテリアルが存在するエンティティへの参照を取得します次にマテリアルを格納する RealityKitコンポーネントである ModelComponentを取得し ModelComponentから最初のマテリアルを取得しますこの特定のエンティティは 1つだけありますこれをShaderGraphMaterial型にキャストしますこれでProgressという名前のパラメータに新しい値を設定できるようになりました最後にマテリアルを ModelComponentに格納し直し ModelComponentを terrainエンティティに格納し直します次にこれをSwiftUIのスライダに接続しますスライダの値が変化するたびに 0から1の範囲の値を取得しそれをShaderGraphMaterialにフィードします次に2つの地形のambientオーディオトラック間をクロスフェードしてみましょう２つのオーディオエンティティ海と森にも AmbientAudioComponentを配置しているためサウンドのゲインプロパティを使用してサウンドの再生音量を調整できますすべてのエンティティをクエリしますがこの時点では海と森の２つとも AmbientAudioComponentが含まれていますさらにRegionSpecificComponent という別のカスタムコンポーネントを追加してエンティティをマークできるようにしどちらかの地域に当てはめられます audioComponentを変更して保存するため audioComponentの変更可能なコピーを取得しエンティティに戻ります regionとsliderValueに与えられるゲインを計算する関数を呼び出しますゲイン値をAmbientAudio Componentに設定しコンポーネントをエンティティに再度格納します実際にそれを見てみましょう
素晴らしい！スライダを動かすとシェーダーグラフマテリアルがジオメトリを変更しているのがわかり地形図を見ると森の音が消え海の音が入ってくるのが聞こえます
今日はたくさんの情報を取り上げましたまとめます Reality Composer Pro コンテンツをXcodeのアプリにロードする方法について Reality Composer Proで独自のカスタムコンポーネントを作成する方法について SwiftUI Attachments APIがどのように機能しそれらがエンティティとしてどのように提供されるかも見ましたオーディオを設定しコード内でその音声を再生する方法もそして最後にプロモートされたマテリアルプロパティを取得してコードから駆動する方法もこれらのワークフローは空間体験を現実のものにするのに役立ちますみなさんが構築するものをぜひ見てみたいと思いますありがとうございました ♪

RealityView { content in
    do {
        let entity = try await Entity(named: "DioramaAssembled", in: realityKitContentBundle)
        content.add(entity)
    } catch {
        // Handle error
    }
}

6:39 - Adding a component

let component = MyComponent()
entity.components.set(component)

12:21 - Attachments data flow

RealityView { _, _ in
    // load entities from your Reality Composer Pro package bundle
} update: { content, attachments in
           
   if let attachmentEntity = attachments.entity(for: "🐠") {
     		content.add(attachmentEntity)
 	 }
           
} attachments: {
    Button { ... }
       .background(.green)
       .tag("🐠")
}

15:48 - Adding attachments

let myEntity = Entity()

RealityView { content, _ in
    if let entity = try? await Entity(named: "MyScene", in: realityKitContentBundle) {
        content.add(entity)
    }
} update: { content, attachments in

    if let attachmentEntity = attachments.entity(for: "🐠") {
        content.add(attachmentEntity)
    }

    content.add(myEntity)

} attachments: {
    Button { ... }
       .background(.green)
       .tag("🐠")
}

20:43 - Adding point of interest attachment entities

static let markersQuery = EntityQuery(where: .has(PointOfInterestComponent.self))
@State var attachmentsProvider = AttachmentsProvider()

rootEntity.scene?.performQuery(Self.markersQuery).forEach { entity in
  guard let pointOfInterest = entity.components[PointOfInterestComponent.self] else { return }
  
  let attachmentTag: ObjectIdentifier = entity.id

  let view = LearnMoreView(name: pointOfInterest.name, description: pointOfInterest.description)
                           .tag(attachmentTag)

   attachmentsProvider.attachments[attachmentTag] = AnyView(view)
}

21:40 - AttachmentsProvider

@Observable final class AttachmentsProvider {
    var attachments: [ObjectIdentifier: AnyView] = [:]
    var sortedTagViewPairs: [(tag: ObjectIdentifier, view: AnyView)] { ... }
}

...

@State var attachmentsProvider = AttachmentsProvider()

RealityView { _, _ in

} update: { _, _ in

} attachments: {
    ForEach(attachmentsProvider.sortedTagViewPairs, id: \.tag) { pair in
        pair.view
    }
}

22:31 - Design-time and Run-time components

// Design-time component
public struct PointOfInterestComponent: Component, Codable {
    public var region: Region = .yosemite
    public var name: String = "Ribbon Beach"
    public var description: String?
}

// Run-time component
public struct PointOfInterestRuntimeComponent: Component {
    public let attachmentTag: ObjectIdentifier
}

25:38 - Adding a run-time component for each design-time component

static let markersQuery = EntityQuery(where: .has(PointOfInterestComponent.self))
@State var attachmentsProvider = AttachmentsProvider()

rootEntity.scene?.performQuery(Self.markersQuery).forEach { entity in
  guard let pointOfInterest = entity.components[PointOfInterestComponent.self] else { return }
  
  let attachmentTag: ObjectIdentifier = entity.id

  let view = LearnMoreView(name: pointOfInterest.name, description: pointOfInterest.description)
                           .tag(attachmentTag)

   attachmentsProvider.attachments[attachmentTag] = AnyView(view)
   let runtimeComponent = PointOfInterestRuntimeComponent(attachmentTag: attachmentTag)
   entity.components.set(runtimeComponent)
}

26:19 - Adding and positioning the attachment entities

static let runtimeQuery = EntityQuery(where: .has(PointOfInterestRuntimeComponent.self))

RealityView { _, _ in

} update: { content, attachments in x
   
    rootEntity.scene?.performQuery(Self.runtimeQuery).forEach { entity in
        guard let component = entity.components[PointOfInterestRuntimeComponent.self],
              let attachmentEntity = attachments.entity(for: component.attachmentTag) else { 
            return 
        }        
        content.add(attachmentEntity)
        attachmentEntity.setPosition([0, 0.5, 0], relativeTo: entity)
    }
} attachments: {
    ForEach(attachmentsProvider.sortedTagViewPairs, id: \.tag) { pair in
        pair.view
    }
}

28:55 - Audio Playback

func playOceanSound() {
        
    guard let entity = entity.findEntity(named: "OceanEmitter"),
        let resource = try? AudioFileResource(named: "/Root/Resources/Ocean_Sounds_wav",
                                   from: "DioramaAssembled.usda",
                                   in: RealityContent.realityContentBundle) else { return }
        
    let audioPlaybackController = entity.prepareAudio(resource)
    audioPlaybackController.play()
}

31:02 - Terrain material transition using the slider

@State private var sliderValue: Float = 0.0

Slider(value: $sliderValue, in: (0.0)...(1.0))
    .onChange(of: sliderValue) { _, _ in
        guard let terrain = rootEntity.findEntity(named: "DioramaTerrain"),
                var modelComponent = terrain.components[ModelComponent.self],
                var shaderGraphMaterial = modelComponent.materials.first 
                    as? ShaderGraphMaterial else { return }
        do {
            try shaderGraphMaterial.setParameter(name: "Progress", value: .float(sliderValue))
            modelComponent.materials = [shaderGraphMaterial]
            terrain.components.set(modelComponent)
        } catch { }
    }
}

31:57 - Audio transition using the slider

@State private var sliderValue: Float = 0.0
static let audioQuery = EntityQuery(where: .has(RegionSpecificComponent.self) 
                                    && .has(AmbientAudioComponent.self))

Slider(value: $sliderValue, in: (0.0)...(1.0))
    .onChange(of: sliderValue) { _, _ in
        // ... Change the terrain material property ...
                                
        rootEntity?.scene?.performQuery(Self.audioQuery).forEach({ audioEmitter in
            guard var audioComponent = audioEmitter.components[AmbientAudioComponent.self],
                  let regionComponent = audioEmitter.components[RegionSpecificComponent.self]
            else { return }

            let gain = regionComponent.region.gain(forSliderValue: sliderValue)
            audioComponent.gain = gain
            audioEmitter.components.set(audioComponent)
        })
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC23

WWDC21