SwiftUIとRealityKitの連係

SwiftUIとRealityKitの連係

visionOS 26でSwiftUIとRealityKitをシームレスに融合させる方法について説明します。アニメーションやConfigurationCatalogのサポートなど、さらに強化されたModel3Dの機能を紹介し、RealityViewへのスムーズな移行のデモを行います。SwiftUIのアニメーションを利用してRealityKitコンポーネントの変更を適用する方法、インタラクティブな操作を実装する方法、新しいSwiftUIコンポーネントを使ってリッチなインタラクションを実現する方法、SwiftUIコードからRealityKitの変更を確認する方法を紹介します。また、フレームワーク座標変換のための統一座標変換の使用方法についても解説します。

関連する章
- 0:00 - イントロダクション
- 1:24 - Model3Dの機能強化
- 6:13 - RealityViewへの移行
- 11:52 - オブジェクトの操作
- 15:35 - SwiftUIのコンポーネント
- 19:08 - 情報のフロー
- 24:56 - 統合座標への変換
- 27:01 - アニメーション
- 29:41 - 次のステップ
リソース
関連ビデオ

WWDC24
- Reality Composer Proにおけるインタラクティブな3Dコンテンツの作成
WWDC23
- SwiftUIにおけるObservationの説明
WWDC21
- RealityKit 2の詳細
WWDC20
- Swift UIにおけるデータの重要事項
こんにちはRealityKitのエンジニアの Amandaです Maksです SwiftUIのエンジニアです本日はSwiftUIとRealityKitの両方の素晴らしい機能強化についてご紹介します 2つを一緒に使用するとさらに効果的ですこの愛らしいシーンをご覧ください空中に浮かぶチャーミングな SwiftUIロボットと地面に固定された RealityKitロボットがありどちらもつながろうとしています近づくと火花が散りますでも本当に触れ合えるくらい近づくにはどうすればよいでしょうこのセッションでは従来のUIとインタラクティブ3Dコンテンツの世界を組み合わせる方法を説明しますまずModel3Dの機能強化について説明します次にModel3Dの使用からRealityViewの使用に移行する方法を提示しどの場面でどちらを選べばよいのかについて話しますここからは新しい Object Manipulation APIを説明します
RealityKitに新しいコンポーネント型が加わり SwiftUIのさらに多くの面が統合されました SwiftUIとRealityKitの間で情報を双方向に流せるようになったことを後ほど説明します
座標空間の変換がこれまで以上に簡単になりました SwiftUIのアニメーションを利用して RealityKitコンポーネントの変更を制御しますでは始めましょう
Model3Dを使用して1行のコードでアプリに3Dモデルを表示します visionOS 26では2つの機能強化により Model3Dはさらに用途が増えましたアニメーションの再生と ConfigurationCatalogからの読み込みです Model3DはSwiftUIビューであるため SwiftUIレイアウトシステムに参加していますそのレイアウトシステムを使いロボットの名前を表示する小さなサインを作成します
ロボットの名前はSparkyだというサインができました
Sparkyはかわいいダンスもできますアーティストはこのアニメーションをロボットモデルアセットにバンドルしました visionOS 26の新機能は Model3DAssetタイプです 3Dコンテンツにアニメーションをロードして制御するには Model3DAssetを使用して Model3Dを構築しますモデルはアセットからアニメーションをロードしてどれをプレイするかを選択します「モデル」という語は多義的です今回はUIフレームワークと3Dゲームフレームワークを一緒に扱うため特に注意が必要です UIフレームワークでは「モデル」はデータ構造を指しアプリが使用する情報を表しますこのモデルにはデータとビジネスロジックが保持されるためビューはこの情報を表示できるようになります RealityKitなど3Dフレームワークではモデルはシーンに配置できる 3Dオブジェクトを指しますこれにはその形状を定義するメッシュリソースと外観を決定する材料で構成されるModelComponentを介してアクセスします時にはそういうこともあります 2つの世界がぶつかり合ってそれぞれの用語を持ち込み時には重複することもあります Sparkyとそのアニメーションに戻りましょう
Model3Dをピッカーと再生ボタンおよびタイムスクラバーの上に配置します RobotViewではアニメーション化されたロボット自体を表示しておりその下に再生するアニメーションを選択するピッカーとアニメーション再生コントロールを配置しています最初にバンドルから読み込むシーン名でModel3DAssetを初期化します次にアセットが現れたら Model3D初期化子に渡しますその下のVStackにこのモデルアセットで使用可能なアニメーションを一覧表示するカスタマイズ済みのピッカーを表示します一覧から項目を選択するとピッカーはアセットの「selectedAnimation」を新しい値に設定します次にModel3DAssetは AnimationPlaybackControllerを作成し選択したアニメーションの再生をコントロールしますアセットは「animationPlaybackController」を提供しますオブジェクトを使いアニメーションの一時停止、再開、シークを行います
そのanimationControllerを RobotAnimationControlsビューに渡しますこれについては後ほど説明します visionOS 26では既存のRealityKitクラス「AnimationPlaybackController」は Observableになりました SwiftUIビューでは「time」プロパティを監視してアニメーションの進行状況を表示します
ここに「controller」という @Bindableプロパティがあります「AnimationPlaybackController」をビューのデータモデルとして使用していることを意味しますコントローラーのisPlaying値が変化すると SwiftUIによって RobotAnimationControlsビューが再評価されますこのスライダはアニメーションの持続時間に対する現在の時間をアニメーション中に表示するものですこのスライダをドラッグするとアニメーションがスクラブされますこれがSparkyのお祝いアニメーションですスライダを使って早送りと巻き戻しができますさあSparkyの誕生日ですダンスの動きができたら Sparkyをドレスアップしますその後は温室にいる別のロボットに会いに行きますそれを手助けするためRealityKitの ConfigurationCatalog型を強化しますこの型の中にはエンティティの別の表示方法が格納されていますさまざまなメッシュジオメトリ成分値やマテリアルプロパティなどです visionOS 26では ConfigurationCatalogを使って Model3Dを初期化できます様々な表現方法に切り替えることもできます
Sparkyがさまざまな衣装を試着できるようにアーティストは様々なタイプの Reality Fileをバンドルしましたこのファイルをアプリのメインバンドルから ConfigurationCatalogとしてロードします次に構成を使用して Model3Dを作成しますこのポップオーバーには設定オプションが表示されますポップオーバーから選択すると Sparkyの見た目が変わりますダンスの動きを確認洋服を確認 SparkyはRealityKitの温室で新しい友達に出会う準備ができました火花が飛び散ります火花を散らすにはパーティクルエミッタを使いますしかしこれはModel3Dタイプでは実行時間にできることではありませんパーティクルエミッタはRealityKitエンティティに追加するコンポーネントですこれについては後ほど詳しく説明します重要なのはModel3Dがコンポーネントの追加をサポートしていないことですパーティクルエミッタを追加するには RealityViewに切り替えますレイアウトを変えずにModel3Dを RealityViewにスムーズに置き換える方法を紹介しますまずビューをModel3Dから RealityViewに切り替えます RealityViewの「make」クロージャ内の App Bundleから Botanistモデルをロードしてエンティティを作成しますそのエンティティをRealityViewのコンテンツに追加し Sparkyを画面に登場させます
しかし名前のサインが横にはみ出してしまいました以前Model3Dを使用していた時はこうではありませんでしたこれはSwiftUIレイアウトシステムが与えた使用可能なスペースを RealityViewがデフォルトですべて占有するからです対照的にModel3Dは基になるモデルファイルの固有のサイズに基づいたサイズになります修正します新しい realityViewLayoutBehavior修飾子と fixedSizeを適用し RealityViewがモデルの初期境界を厳密に取り囲むようにしますずっと良くなりましたね RealityViewではエンティティのコンテンツの中の視覚的境界を使用してサイズを把握しますこのサイズは「make」クロージャが実行された直後に一度だけ評価されますその他の「realityViewLayoutBehavior」のオプションは .flexibleと.centeredですこれら3つのRealityViewすべてにおいて Sparkyモデルの底部がシーンの原点に位置していますその原点をギズモでマークしました小さな多色の十字で軸と原点を示します左側の「.flexible」オプションでは RealityViewは修飾子が適用されていないかのように動作します原点はビューの左上のままです「.centered」オプションは RealityViewの原点を移動しコンテンツがビューの中央に配置されるようにします「.fixedSize」はRealityViewがコンテンツの境界を密接に取り囲み RealityViewがModel3Dと同じように動作します
これらのオプションはいずれも RealityViewContentに関してエンティティを再配置または拡大縮小しません RealityView自体の原点を再配置するだけです RealityViewでSparkyのサイズを整理しました次にSparkyを再びアニメーション化しますエンティティ上で直接 Model3Dの新しいアニメーションAPIから RealityKitアニメーションAPIに移行します RealityKitのアニメーションを取り扱う様々な方法について詳しくは「Compose interactive 3D content in Reality Composer Pro」のセッションをご覧ください Model3Dから RealityViewに切り替えてSparkyに ParticleEmitterComponentを与えましたがそれはこの2つのロボットが接近すると火花が飛ぶ必要があるからですパーティクルエミッタでエフェクトを作成できます数百の小さなパーティクルが一度にアニメーション化するエフェクトで花火や雨、キラキラなどです RealityKitはこれらのプリセット値を提供します皆さんがプリセットを調整することで狙った効果が得られます Reality Composer Proを使用してデザインしたりコードで設定したりできます ParticleEmitterをComponentとしてエンティティに追加しますコンポーネントは RealityKitの中心的な部分であり「エンティティコンポーネントシステム」パラダイムに基づいていますシーン内の各オブジェクトはエンティティで皆さんはコンポーネントを追加してそのオブジェクトが持つ特性や動作を指定しますコンポーネントはエンティティに関するデータを保持する型ですシステムは特定のコンポーネントを持つエンティティを処理しそのデータを含むロジックを実行しますパーティクルのアニメーション化物理演算の処理、レンダリングなどのシステムが組み込まれています RealityKitを使用してゲームやアプリ用の独自のロジックを実行するためのカスタムシステムを自作できます RealityKitのエンティティコンポーネントシステムの詳細は「Dive into RealityKit 2」をご覧くださいパーティクルエミッタをSparkyの頭の両側に追加しますまず見えないエンティティを2つ作成しますこれは火花効果のコンテナとして機能しますエミッタは右を向くようにデザインしました Sparkyの右側の見えないエンティティに直接追加します
反対側ではエンティティを y軸の周りで180度回転させ左を向くようにしました
RealityViewですべてをまとめますこれがSparkyのアニメーションです名前のサインが正しい位置にあり火花が飛んでいます
RealityKitはこのような細部の作成に最適ですゲームやプレイ指向の体験を制作している場合はまたは3Dコンテンツの動作をきめ細かく制御する必要がある場合 RealityViewを選択しましょう一方Model3Dは自己完結型の 3Dアセットを単独で表示するために使用します 3Dアセット用のSwiftUIのイメージビューのようなものだと考えてください
Model3Dの新しいアニメーションと構成カタログでModel3Dをさらに活用できます設計が進化してエンティティコンポーネント、システムに直接アクセスする必要がある場合は realityViewLayoutBehaviorを使うと Model3DからRealityViewに簡単に移行します次に新しいオブジェクト操作の詳細を共有します visionOS 26のAPIによりユーザーはアプリ内でバーチャルオブジェクトを選択できますオブジェクトの操作はSwiftUIと RealityKitの両方から行えますオブジェクト操作を使い片手でオブジェクトを動かし片手または両手で回転させ両手でつまんだりドラッグしたりして拡大縮小しますオブジェクトを片方の手からもう片方の手に渡すこともできます
それには2つの方法ありますオブジェクトがRealityKitエンティティか SwiftUIビューのどちらかによって異なります SwiftUIでは新しい「manipulable」修飾子を追加しますスケーリングを禁止しながら移動機能は維持しどちらかの手でロボットを回転させるためにサポートされる操作を指定します
ロボットに重量感を持たせるために慣性が高いことを指定します
.manipulable修飾子はSparkyが Model3Dビューに表示されているときに機能します Model3D全体またはアタッチされているすべてのビューに適用されます SparkyがRealityViewにいるときは操作を有効にするのは RealityView全体ではなくロボットエンティティ本体のみです visionOS 26ではManipulationComponentはエンティティに設定できる新しい型でオブジェクト操作を有効にできます静的関数「configureEntity」はエンティティに ManipulationComponentを追加しますまたCollisionComponentも追加してエンティティがタップされた時にインタラクションシステムが認識できるようにします InputTargetComponentを追加しシステムにこのエンティティがジェスチャーに応答することを伝えます最後にユーザーが見たときやマウスをその上に置いたときの視覚効果を適用する HoverEffectComponentを追加しますこれはシーン内のエンティティの操作を有効にするために必要な唯一の行です体験をさらにカスタマイズするために渡すことができるパラメータが数個ありますここでは紫色のスポットライト効果を指定しています直接的タッチ、間接的視線、ピンチのすべてのタイプの入力を許可していますまたロボットの外形寸法を定義するコリジョンシェイプを提供していますユーザーがアプリ内のオブジェクトを操作したときに応答するためにオブジェクト操作システムは重要なタイミングでイベントを発生させます例えばインタラクションが開始／終了する時エンティティの移動、回転、拡大縮小で更新される時、エンティティが解放される時および片方の手から反対の手に渡される時などですこれらのイベントをサブスクライブして状態を更新しますデフォルトではインタラクションが始まった時ハンドオフが起こった時またはオブジェクトがリリースされた時に標準のサウンドが再生されますカスタムサウンドを適用するにはまずaudioConfigurationを「none」に設定しますこれにより標準のサウンドが無効になります次にManipulationEvent DidHandOffをサブスクライブしますこれはロボットが片方の手からもう片方の手に渡った時に提供されますそのクロージャで自分のオーディオリソースを再生しますさてMaks Sparkyは楽しい体験をしてきました: Model3Dでアニメーション化したり RealityViewで新しい家を見つけたり火花が飛ぶ性格も紹介したりしてきました手を伸ばして交流できることも説明しました RealityKit温室への長い道のりを歩んできました確かにそうですしかしSparkyがそこで待っているロボットと本当につながるためには仮想空間内のオブジェクトには新しい機能が必要ですジェスチャーに反応し自分自身に関する情報を提示し SwiftUIにネイティブに感じられる方法でアクションをトリガーできる必要があります
RealityKitの温室への Sparkyの道のりではつながりを築くことが大切です深くつながるには豊富なインタラクションが必要です新しいSwiftUI RealityKit コンポーネントのデザインの目的はそれをできるようにすることです visionOS 26の新しいコンポーネントはパワフルで使い慣れたSwiftUIの機能を RealityKitエンティティに直接統合しています RealityKitには次の3つの主要コンポーネントが導入されていますまずViewAttachmentComponentを使用すると SwiftUIビューをエンティティに直接追加できます次にGestureComponentはエンティティがタッチやジェスチャーに応答するようにします最後にPresentationComponentはポップオーバーのように RealityKitシーン内から SwiftUIビューを表示します
visionOS 1によりアタッチメントを RealityView初期化子の一部として前もって宣言することができます添付ファイルビュービルダーを評価した後システムは結果をエンティティとして更新クロージャを呼び出しましたこれらのエンティティをシーンに追加し 3D空間に配置することができます visionOS 26ではこれが簡素化されていますこれでRealityKitコンポーネントを使用してアプリ内のどこからでも添付ファイルを作成できます ViewAttachmentComponentを作成するには任意のSwiftUIビューを指定します次にそれをエンティティのコンポーネントコレクションに追加します
そのようにしてNameSignを SwiftUIからRealityKitに移動しました次はジェスチャーについて説明します「targetedToEntity」ジェスチャー修飾子を使用することで RealityViewにジェスチャーを添付できることは説明しました visionOS 26の新機能に GestureComponentがあります ViewAttachmentComponentと同様に GestureComponentをエンティティに直接追加し通常のSwiftUIジェスチャーを渡しますジェスチャー値はデフォルトではエンティティの座標空間で報告されます非常に便利です GestureComponentをタップジェスチャーで使用して名前のサインのオンとオフを切り替えます
ご覧くださいこのロボットの名前はBoltsです
ヒントですがジェスチャーのターゲットである任意のエンティティには InputTargetComponentと CollisionComponentの両方も追加しますこのアドバイスはGestureComponentと targeted gestures APIの両方に適用されます
GestureComponentと ViewAttachmentComponentで Boltsの名前サインが作れますしかしBoltsは特別な訪問者 Sparkyのために準備をしています Boltsは温室での会う時に最高の姿を見せようとしています着替えをしましょう Boltsの名前サインをBoltsが着るものを選ぶUIに置き換えます本当に重大な決断です
それを強調するためにこのUIをポップオーバーで表示しますがこれにはRealityKitから直接 PresentationComponentを使用します
まず「ViewAttachmentComponent」を「PresentationComponent」に置き換えますコンポーネントはポップオーバーがいつ表示されるかを制御し誰かがポップオーバーを閉じたときに通知するためにブールバインディングを受け取ります「configuration」パラメーターは表示するプレゼンテーションのタイプです「ポップオーバー」を指定していますポップオーバー内に Boltsをドレスアップするための構成の Catalogオプションのビューを示しますこれでBoltsがSparkyの訪問に備えて最高の色を選ぶのを手伝うことができます
Maks、Boltsに似合うのは夏の色だと思いますか？それとも秋の色？
ファッションのジョークでした
Boltsは好印象を与える服装をしていますしかし先に仕事があります Boltsは温室内の植物に水をやりますゲームのヘッドアップディスプレイのようなミニマップを作り温室内のBoltsの位置をトラッキングしますそのにはロボットの Transformコンポーネントの監視が必要です visionOS 26ではエンティティが監視可能になりましたプロパティが変更されたときに他のコードに通知できます通知を受け取るにはエンティティの「observable」プロパティを読み取るだけです
「observable」プロパティからはエンティティの様々な変化を監視できますこれには位置、拡大縮小、回転その子のコレクションおよびカスタムコンポーネントを含むコンポーネントの変化が含まれます「withObservationTracking」ブロックを使用してこれらのプロパティを直接監視しますまたはSwiftUIに組み込みの監視トラッキングに頼ることもできます SwiftUIを使ってミニマップを実装します Observationの詳細については「Discover Observation in SwiftUI」をご覧くださいこのビューではエンティティの位置をミニマップ上に表示します自分のエンティティのobservable値にアクセスしていますこれは私のビューがこの値に依存していることをSwiftUIに伝えます
Boltsが温室内を移動して植物に水をやるとその位置が変わります位置が変わるたびSwiftUIは再びビューの本体を呼び出しミニマップの対応するシンボルを動かします SwiftUIのデータフローについての詳しい説明は「Data Essentials in SwiftUI」セッションをご覧くださいロボットの友達同士の出会いはもうすぐですねそれが夢です先ほどの「モデル」と「モデル」の違いの説明は良かったと思いますデータモデルから3Dオブジェクトモデルにデータを渡す必要がある時とその逆が必要な時があります visionOS 26では監視可能なエンティティがそれを行うための新しいツールを提供します当初からRealityViewの「update」クロージャでSwiftUIから RealityKitに情報を渡すことが可能でしたエンティティの「observable」プロパティを使うと逆方向に情報を送信できます RealityKitエンティティはモデルオブジェクトのように機能して SwiftUIビューの更新を行います情報は双方向に流れるようになりました SwiftUIからRealityKitへそしてRealityKitからSwiftUIへしかしこれにより無限ループが発生する可能性はありますかはい SwiftUIとRealityKitの間に無限ループを作らないようにする方法を説明しますビューの本体内の observableプロパティを読み取るとビューがそのプロパティに依存するという依存関係が作成されますプロパティの値が変更されると SwiftUIはビューを更新して本体を再実行します RealityViewには特別な動作があります例えばその更新クロージャをビュー本体の拡張と考えてください
SwiftUIはクロージャのビューの状態が変更されるたびにクロージャを呼び出しますクロージャで明示的に監視される状態が変化するときだけではありません RealityViewのアップデートクロージャでこれから位置を変更しますこれが位置の値に書き込まれ SwiftUIによってビューが更新され本体が再実行されますこれが無限ループを起こします
無限ループを発生させないよう監視された状態をupdateクロージャ内で変更しないでください
監視対象でないエンティティは自由に変更できますその変更は無限ループを発生させませんなぜなら SwiftUIによるビュー本体の再評価をトリガーしないからです監視対象のプロパティを変更する必要がある場合はそのプロパティの既存の値を確認し同じ値を書き戻さないようにしますこれによりサイクルが中断され無限ループが回避されます RealityViewのmakeクロージャは特殊なため注意してください makeクロージャでobservableプロパティにアクセスすることは依存関係を作りません収容するビューの監視範囲には含まれませんまた「make」クロージャは変更時に再実行されません収容するビューが最初に表示されたときにのみ実行されます監視対象エンティティのプロパティは独自のカスタムシステム内から更新することもできますシステムの更新関数は SwiftUIビュー本体評価の範囲内にないのでこれは監視対象エンティティの値を変更する場所として適しています
GesturesクロージャもSwiftUIビューの本体評価の範囲内にありませんこれらはユーザー入力に応答して呼び出されますここでも監視対象エンティティの値を変更できます要約すると監視対象エンティティをある場所では修正でき他の場所ではできないということです
アプリに無限ループがあることに気付いた場合の修正のヒントです大きなビューを小さな自己完結型のビュービューに分割しそれぞれが必要な状態のみを持つようにしますそうすれば無関係なエンティティの変更により小さなビューが再評価されることはありませんこれはパフォーマンスの面でも最適ですこれからは「update」クロージャを使う必要がないかもしれませんねエンティティをビューの状態にすることができるようになったためこれまで状態の変更をしていた通常の場所で変更できるので updateクロージャを完全にやめることができますそうですね無限ループを避ける方法は何度も学ばなければならないことのような気がしますしかしupdateクロージャを使わなければそれに遭遇する可能性は低くなるでしょうそろそろBoltsとSparkyを会わせましょう Boltsの仕事も終わり Sparkyとデートする時間です Sparkyを抱き上げて持っていくと 2体のロボットは近づき 2体の間の距離の短縮の関数として火花を飛ばします新しいUnified Coordinate Conversion API を使いこれを有効にします SparkyはModel3D SwiftUIビューにあり BoltsはRealityKit温室のエンティティですこの2つのロボットは異なる座標空間にありますがその間の絶対距離を取得する必要がありますこれを解決するためSpatialフレームワークで「CoordinateSpace3D」プロトコルを定義できますこれは抽象座標空間を表します異なるフレームワークからでも CoordinateSpace3Dに準拠する任意の2つの型の間で値を簡単に変換できます RealityKitの「Entity」型と「Scene」型は CoordinateSpace3Dに準拠しています SwiftUI側のGeometryProxy3Dには新しい.coordinateSpace3D()関数がありそれが座標空間を提供しますさらにGesture型は特定のCoordinateSpace3Dに対する相対値を指定できます CoordinateSpace3DプロトコルはまずSparkyの座標空間の値を RealityKitとSwiftUIの両方で共有される座標空間に変換することで機能しますその後共有空間から Boltの座標空間に変換しますがその際ポイントからメーターへの変換と軸方向など低レベルの詳細を考慮に入れます SparkyのModel3Dビューではビューのジオメトリが変更されるたびにシステムは「onGeometryChange3D」関数を呼び出します座標空間を取得するために使用する GeometryProxy3Dを渡します次にビューの位置をエンティティの空間内の点に変換すると 2体のロボットが互いからどれだけ離れているかがわかります AmandaがBoltsとSparkyを近づけると火花が増えます遠ざけると火花は減少します
次にこれらのロボットに一緒に動いてアクションを調和させることを教えます RealityKitコンポーネントには SwiftUIによるアニメーションを使います SwiftUIには優れたアニメーションAPIが搭載されていてビュープロパティの変更を暗黙的にアニメーション化しますここではSparkyがいるModel3Dビューをアニメーション化しています切り替えると左に動きもう一度切り替えると元の位置に跳ね返ります「isOffset」バインディングにアニメーションを追加してそれに特によく弾むアニメーションを指定しています visionOS 26では SwiftUIアニメーションを使用して RealityKitコンポーネントへの変更を暗黙的にアニメーション化できます必要なのは RealityKitアニメーションブロックでエンティティにサポートされているコンポーネントを設定することだけで残りはフレームワークが処理しますアニメーションを状態変化に関連付ける方法は2つあります RealityView内からは「content.animate()」を使用して animateブロック内でコンポーネントに新しい値を設定できます RealityKitは「update」クロージャをトリガしたSwiftUIトランザクションに関連付いたアニメーションを使用しますこの場合これは特によく弾むアニメーションです
もう1つの方法は新しい Entity.animate()関数を呼び出し SwiftUIアニメーションとコンポーネントに新しい値を設定するクロージャを渡すことですここでは「isOffset」プロパティが変更されるたびにエンティティの位置を使用して Sparkyを左右に動かします animateブロック内の位置を設定すると Transformコンポーネントの暗黙的なアニメーション化が開始されエンティティを新しい位置にスムーズに移動させます暗黙的なアニメーションの力は Amandaが紹介した Object Manipulation APIと組み合わせたときに本当に発揮されます SwiftUIアニメーションを使用してBoltsのカスタムリリース動作を実装できますまずオブジェクト操作のデフォルトリリース動作を.stayに設定して無効にします次に操作インタラクションの WillReleaseイベントをサブスクライブしますオブジェクトが解放されそうになったら Sparkyを元に戻すために Sparkyの変換を恒等に設定しますこの設定はエンティティのサイズ移動、回転をリセットするものです animateブロック内のSparkyの変換を修正しているので Sparkyはデフォルトの位置に跳ね返ります Sparkyが元の位置に戻るアニメーションがはるかに楽しくなりました内蔵のRealityKitコンポーネントはすべて暗黙的アニメーションをサポートしていますそれにはトランスフォームコンポーネントやオーディオコンポーネントカラープロパティがあるモデルやライトのコンポーネントもあります SparkyとBoltsの説明は以上です SwiftUIとRealityKitの機能の連携はすばらしいですねさらに仮想空間と実空間の実際のつながりを育むことで真に優れた空間アプリを開発できるようになりました SwiftUIコンポーネントを RealityKitシーンにシームレスに統合することやエンティティが SwiftUIの状態の変化を動的に促すことの可能性を想像してみてください皆さんがSparkyとBoltsのように SwiftUIとRealityKitを想像もできないような方法で連携させるきっかけになれば幸いです一緒に未来を構築しましょう

struct ContentView: View {
  var body: some View {
    Model3D(named: "sparky")
  }
}

1:52 - Sparky in Model3D with a name sign

struct ContentView: View {
  var body: some View {
    HStack {
      NameSign()
      Model3D(named: "sparky")
    }
  }
}

3:18 - Display a model asset in a Model3D and present playback controls
```
struct RobotView: View {
  @State private var asset: Model3DAsset?
  var body: some View {
    if asset == nil {
      ProgressView().task { asset = try? await Model3DAsset(named: "sparky") }
    }
  }
}
```

3:34 - Display a model asset in a Model3D and present playback controls

struct RobotView: View {
  @State private var asset: Model3DAsset?
  var body: some View {
    if asset == nil {
      ProgressView().task { asset = try? await Model3DAsset(named: "sparky") }
    } else if let asset {
      VStack {
        Model3D(asset: asset)
        AnimationPicker(asset: asset)
      }
    }
  }
}

4:03 - Display a model asset in a Model3D and present playback controls

struct RobotView: View {
  @State private var asset: Model3DAsset?
  var body: some View {
    if asset == nil {
      ProgressView().task { asset = try? await Model3DAsset(named: "sparky") }
    } else if let asset {
      VStack {
        Model3D(asset: asset)
        AnimationPicker(asset: asset)
        if let animationController = asset.animationPlaybackController {
          RobotAnimationControls(playbackController: animationController)
        }
      }
    }
  }
}

4:32 - Pause, resume, stop, and change the move the play head in the animation

struct RobotAnimationControls: View {
  @Bindable var controller: AnimationPlaybackController

  var body: some View {
    HStack {
      Button(controller.isPlaying ? "Pause" : "Play") {
        if controller.isPlaying { controller.pause() }
        else { controller.resume() }
      }

      Slider(
        value: $controller.time,
        in: 0...controller.duration
      ).id(controller)
    }
  }
}

5:41 - Load a Model3D using a ConfigurationCatalog

struct ConfigCatalogExample: View {
  @State private var configCatalog: Entity.ConfigurationCatalog?
  @State private var configurations = [String: String]()
  @State private var showConfig = false
  var body: some View {
    if let configCatalog {
      Model3D(from: configCatalog, configurations: configurations)
        .popover(isPresented: $showConfig, arrowEdge: .leading) {
          ConfigPicker(
            name: "outfits",
            configCatalog: configCatalog,
            chosenConfig: $configurations["outfits"])
        }
    } else {
      ProgressView()
        .task {
          await loadConfigurationCatalog()
        }
    }
  }
}

6:51 - Switching from Model3D to RealityView

struct RobotView: View {
  let url: URL = Bundle.main.url(forResource: "sparky", withExtension: "reality")!

  var body: some View {
    HStack {
      NameSign()
      RealityView { content in
        if let sparky = try? await Entity(contentsOf: url) {
          content.add(sparky)
        }
      }
    }
  }
}

7:25 - Switching from Model3D to RealityView with layout behavior

struct RobotView: View {
  let url: URL = Bundle.main.url(forResource: "sparky", withExtension: "reality")!

  var body: some View {
    HStack {
      NameSign()
      RealityView { content in
        if let sparky = try? await Entity(contentsOf: url) {
          content.add(sparky)
        }
      }
      .realityViewLayoutBehavior(.fixedSize)
    }
  }
}

8:48 - Switching from Model3D to RealityView with layout behavior and RealityKit animation

struct RobotView: View {
  let url: URL = Bundle.main.url(forResource: "sparky", withExtension: "reality")!

  var body: some View {
    HStack {
      NameSign()
      RealityView { content in
        if let sparky = try? await Entity(contentsOf: url) {
          content.add(sparky)
          sparky.playAnimation(getAnimation())
        }
      }
      .realityViewLayoutBehavior(.fixedSize)
    }
  }
}

10:34 - Add 2 particle emitters; one to each side of the robot's head

func setupSparks(robotHead: Entity) {
  let leftSparks = Entity()
  let rightSparks = Entity()

  robotHead.addChild(leftSparks)
  robotHead.addChild(rightSparks)

  rightSparks.components.set(sparksComponent())
  leftSparks.components.set(sparksComponent())

  leftSparks.transform.rotation = simd_quatf(Rotation3D(
    angle: .degrees(180),
    axis: .y))

  leftSparks.transform.translation = leftEarOffset()
  rightSparks.transform.translation = rightEarOffset()
}

// Create and configure the ParticleEmitterComponent
func sparksComponent() -> ParticleEmitterComponent { ... }

12:30 - Apply the manipulable view modifier

struct RobotView: View {
  let url: URL
  var body: some View {
    HStack {
      NameSign()
      Model3D(url: url)
        .manipulable()
    }
  }
}

12:33 - Allow translate, 1- and 2-handed rotation, but not scaling

struct RobotView: View {
  let url: URL
  var body: some View {
    HStack {
      NameSign()
      Model3D(url: url)
        .manipulable(
          operations: [.translation,
                       .primaryRotation,
                       .secondaryRotation]
       )
    }
  }
}

12:41 - The model feels heavy with high inertia

struct RobotView: View {
  let url: URL
  var body: some View {
    HStack {
      NameSign()
      Model3D(url: url)
        .manipulable(inertia: .high)
    }
  }
}

13:18 - Add a ManipulationComponent to an entity
```
RealityView { content in
  let sparky = await loadSparky()
  content.add(sparky)
  ManipulationComponent.configureEntity(sparky)
}
```

13:52 - Add a ManipulationComponent to an entity with configuration

RealityView { content in
  let sparky = await loadSparky()
  content.add(sparky)
  ManipulationComponent.configureEntity(
    sparky,
    hoverEffect: .spotlight(.init(color: .purple)),
    allowedInputTypes: .all,
    collisionShapes: myCollisionShapes()
  )
}

14:08 - Manipulation interaction events

public enum ManipulationEvents {

  /// When an interaction is about to begin on a ManipulationComponent's entity
  public struct WillBegin: Event { }
  
  /// When an entity's transform was updated during a ManipulationComponent
  public struct DidUpdateTransform: Event { }

  /// When an entity was released
  public struct WillRelease: Event { }

  /// When the object has reached its destination and will no longer be updated
  public struct WillEnd: Event { }

  /// When the object is directly handed off from one hand to another
  public struct DidHandOff: Event { }
}

14:32 - Replace the standard sounds with custom ones

RealityView { content in
  let sparky = await loadSparky()
  content.add(sparky)

  var manipulation = ManipulationComponent()
  manipulation.audioConfiguration = .none
  sparky.components.set(manipulation)

  didHandOff = content.subscribe(to: ManipulationEvents.DidHandOff.self) { event in
    sparky.playAudio(handoffSound)
  }
}

16:19 - Builder based attachments

struct RealityViewAttachments: View {
  var body: some View {
    RealityView { content, attachments in
      let bolts = await loadAndSetupBolts()
      if let nameSign = attachments.entity(
        for: "name-sign"
      ) {
        content.add(nameSign)
        place(nameSign, above: bolts)
      }
      content.add(bolts)
    } attachments: {
      Attachment(id: "name-sign") {
        NameSign("Bolts")
      }
    }
    .realityViewLayoutBehavior(.centered)
  }
}

16:37 - Attachments created with ViewAttachmentComponent

struct AttachmentComponentAttachments: View {
  var body: some View {
    RealityView { content in
      let bolts = await loadAndSetupBolts()
      let attachment = ViewAttachmentComponent(
          rootView: NameSign("Bolts"))
      let nameSign = Entity(components: attachment)
      place(nameSign, above: bolts)
      content.add(bolts)
      content.add(nameSign)
    }
    .realityViewLayoutBehavior(.centered)
  }
}

17:04 - Targeted to entity gesture API

struct AttachmentComponentAttachments: View {
  @State private var bolts = Entity()
  @State private var nameSign = Entity()

  var body: some View {
    RealityView { ... }
    .realityViewLayoutBehavior(.centered)
    .gesture(
      TapGesture()
        .targetedToEntity(bolts)
        .onEnded { value in
          nameSign.isEnabled.toggle()
        }
    )
  }
}

17:10 - Gestures with GestureComponent

struct AttachmentComponentAttachments: View {
  var body: some View {
    RealityView { content in
      let bolts = await loadAndSetupBolts()
      let attachment = ViewAttachmentComponent(
          rootView: NameSign("Bolts"))
      let nameSign = Entity(components: attachment)
      place(nameSign, above: bolts)
      bolts.components.set(GestureComponent(
        TapGesture().onEnded {
          nameSign.isEnabled.toggle()
        }
      ))
      content.add(bolts)
      content.add(nameSign)
    }
    .realityViewLayoutBehavior(.centered)
  }
}

- 0:00 - イントロダクション
- Learn about RealityKit SwiftUI enhancements that enable seamless integration of traditional UI and interactive 3D content. Key updates include enhancements to Model3D and RealityView, the introduction of the Object Manipulation API, new Component types, bidirectional data flow between SwiftUI and RealityKit, easier coordinate space conversion, and SwiftUI-driven animations for RealityKit components.
- 1:24 - Model3Dの機能強化
- In visionOS 26, Model3D enables the display of 3D models with animations and loading from a 'ConfigurationCatalog'. You can now create interactive 3D experiences with just a few lines of code. Use the new 'Model3DAsset' type to load and control animations, and 'ConfigurationCatalog' enables switching between different representations of an entity, such as outfits or body types. The example of a robot named Sparky, who you can animate, dress up in different outfits, and control using SwiftUI views and pickers, making it ready to interact with other robots in a virtual greenhouse, demonstrates these features.
- 6:13 - RealityViewへの移行
- To add a particle emitter to a 3D model at runtime, you must switch from using 'Model3D' to 'RealityView' in RealityKit because Model3D doesn't support adding components. RealityView is loaded with the model entity, but this causes layout issues as it defaults to taking up all available space. The 'realityViewLayoutBehavior' modifier is applied with 'fixedSize' to resolve this, making RealityView wrap the model's initial bounds tightly. There are three different 'realityViewLayoutBehavior' options: 'flexible', 'centered', and 'fixedSize', each affecting the RealityView's origin point without repositioning the entities. Use Reality Composer Pro to design particle emitters that are configurable in code. Particle emitters are added to entities as components. RealityKit is based on the "Entity Component System" paradigm. The example adds particle emitters to create spark effects, involving invisible entities as containers for the sparks. RealityView is great for detailed creation and fine-grained control over 3D content behavior, while Model3D is suitable for displaying self-contained 3D assets. You can transition smoothly between the two as needed.
- 11:52 - オブジェクトの操作
- The new Object Manipulation API in visionOS 26, enables people to interact with virtual objects in apps that use SwiftUI and RealityKit. People can move, rotate, and scale objects with their hands, and even pass objects between hands. For SwiftUI views, you can apply the 'manipulable' modifier, allowing customization of supported operations and object inertia. In RealityKit, add the 'ManipulationComponent' to entities via the static 'configureEntity' function, which also adds collision, input target, and hover effect components. The function has several parameters for behavior customization. Subscribe to 'ManipulationEvents' triggered during interactions, such as starts, stops, updates, releases, and hand-offs, to update app state and customize the experience, including replacing default sounds with custom audio resources.
- 15:35 - SwiftUIのコンポーネント
- The new SwiftUI RealityKit components enhance user interaction and connection within RealityKit scenes. These components enable you to seamlessly integrate SwiftUI views into 3D environments. Key features include the 'ViewAttachmentComponent', which allows you to add SwiftUI views directly to entities; the 'GestureComponent', making entities responsive to touch and gestures; and the 'PresentationComponent', which enables the presentation of SwiftUI views, like popovers, within the scene. The configuration parameter on 'PresentationComponent' is the type of presentation to show. These improvements simplify the development process, enabling you to create more dynamic and engaging experiences. In the example, a robot named Bolts can have a name sign that toggles on and off with a tap gesture, and people can choose Bolts' outfit from a popover menu, all within the immersive RealityKit environment.
- 19:08 - 情報のフロー
- In visionOS 26, entities are now observable, which allows entities, such as the robot Bolts, to notify other code when their properties change. This is particularly useful for tracking Bolts' movements as it waters plants in the greenhouse. The example uses SwiftUI to implement a minimap that displays Bolts' position in real-time. By accessing Bolts' observable position property, SwiftUI automatically updates the minimap whenever Bolts moves. This two-way data flow between SwiftUI and RealityKit, enabled by observable entities, is a significant new tool. This new observable functionality also introduces the potential for infinite loops if not managed carefully. To avoid these loops, be mindful of where you modify observed state. Don't make changes to observed state within the 'update' closure of 'RealityView', because this can trigger a recursive update cycle. Instead, make modifications in specific places like custom systems, gesture closures, or the 'make' closure, which are outside the scope of SwiftUI's view body evaluation. By breaking down larger views into smaller, self-contained ones, and being cautious about where state is modified, you can ensure smooth and efficient data flow between SwiftUI and RealityKit, avoiding infinite loops and enhancing the overall performance of the application.
- 24:56 - 統合座標への変換
- The new Unified Coordinate Conversion API bridges the gap between RealityKit and SwiftUI. By implementing the 'CoordinateSpace3D' protocol, you can seamlessly convert values between the two frameworks. This allows calculating the absolute distance between Bolts, an Entity in RealityKit, and Sparky, a Model3D in SwiftUI, as they move closer together, dynamically generating sparks based on their proximity.
- 27:01 - アニメーション
- In visionOS 26, you can now leverage SwiftUI's animation APIs to implicitly animate changes to RealityKit components. This enables smooth and bouncy movements of entities by simply setting supported components within an animation block. There are two methods to achieve this: using 'content.animate()' within a RealityView or calling 'Entity.animate()' directly. This integration allows for custom release behaviors when manipulating entities, making interactions with 3D objects more engaging and fun. Various RealityKit components, including Transform, Audio, Model, and Light, support these implicit animations.
- 29:41 - 次のステップ
- Use this new connection between SwiftUI and RealityKit to create innovative spatial apps by integrating SwiftUI components with RealityKit scenes, enabling dynamic interactions between the virtual and physical worlds, and inspiring new possibilities in app development.

関連する章

リソース

関連ビデオ

WWDC24

WWDC23

WWDC21

WWDC20