ボリュームとイマーシブな空間の詳細

ボリュームとイマーシブな空間の詳細

visionOSでボリュームとイマーシブな空間をカスタマイズするための、新しいパワフルな方法をご紹介します。ボリュームのサイズ変更の方法を微調整し、ボリュームを周囲のユーザーの移動に反応させる方法を習得できます。座標変換を活用することで、ボリュームやイマーシブな空間とのインタラクションが可能になります。ユーザーがDigital Crownでイマーシブな体験を調整した際にアプリを反応させる方法と、サラウンドエフェクトを使用して、イマーシブな空間体験でのパススルーの色合いを動的にカスタマイズする方法をご紹介します。

関連する章
- 0:00 - Introduction
- 2:04 - Volumes
- 2:06 - Volumes: Baseplate
- 4:08 - Volumes: Size
- 6:59 - Volumes: Toolbars
- 8:48 - Volumes: Ornaments
- 11:36 - Volumes: Viewpoints
- 15:34 - Volumes: World alignment
- 16:52 - Volumes: Dynamic scale
- 18:26 - Intermezzo
- 18:42 - Immersive spaces
- 19:38 - Immersive spaces: Coordinate conversions
- 22:40 - Immersive spaces: Immersion styles
- 26:08 - Immersive spaces: Anchored UI interactions
- 29:03 - Immersive spaces: Surroundings effects
- 31:21 - Next steps
リソース
関連ビデオ

WWDC24
- RealityKitによる空間描画アプリの構築
WWDC23
- はじめてのイマーシブなアプリの開発
こんにちはSwiftUIエンジニアの OwenですそしてTroyです同じくSwiftUIエンジニアです本ビデオでは visionOSのボリュームとイマーシブ空間における3Dコンテンツの操作について説明します
visionOSには3つのシーンタイプがありますウインドウ、ボリューム、イマーシブ空間ですこの3つを組み合わせることで独自の魅力的な体験を創出できます本ビデオではボリュームとイマーシブ空間を取り上げますこれらのシーンタイプはvisionOS独自のもので豊かなイマーシブ3Dコンテンツを実現しますこれらのシーンタイプを使用したボリュメトリックアプリは特に魅力的で Apple Vision Proならではの機能の一つと言えますアプリやゲームに新たな次元の可能性をもたらしアプリの体験を実世界の体験のようにユーザーに感じさせることができます
visionOSではすでに楽しい空間体験が多数提供されていますこれらのアプリは3次元を活かしたものでスマートに情報を表示し遊び心のある楽しいインタラクションを実現しています実世界を模したものも新たな別世界を現出するものもあります
これらのアプリでは visionOS用の Spatial APIが使用されていますそしてvisionOS 2では多数の新機能が追加されこれまで以上に生き生きしたボリュメトリックアプリを実現できます本ビデオでは BOT-anistという新しいボリュメトリックアプリを構築する手順をお見せしますまずボリュームの追加方法を解説しアプリを構築する中で新しいAPIのメリットをご紹介します
Troyはそのアプリをさらに拡張しイマーシブ空間により部屋全体に表示します
では早速ボリュームを使ってみましょうボリュメトリックアプリを新規作成する場合や visionOS 2 SDKに対して既存のアプリをリンクする場合最初に注意すべきことの一つが新しいベースプレートです
目を向けると自動的に現れボリュームの底面がハイライトされます
これが新規作成したボリュームの実際のベースプレートですボリュームの底面が自然にわかるので対象とする空間がどの程度あるかがすぐにわかります
ベースプレートが適しているのはコンテンツがボリューム内にあり境界一杯まで占めていない場合ですコンテンツがボリューム内の空間の一部しか占めていない場合でもそのボリュームの端がどこまでかがわかりますただしアプリのコンテンツがボリュームの境界をはみ出している場合やすでに独自のサーフェスを描画している場合はベースプレートを無効にすることをおすすめしますそれによりアプリとの衝突を避けられますコンテンツ自体でユーザーに端がわかるようにしましょう
visionOS 2ではデフォルトでベースプレートが有効になっており volumeBaseplateVisibility モディファイアで制御できます visionOS 2によるこの自動的な挙動はベースプレートに視線が向くと実行されますモディファイアを記述してvisibleを指定した場合と同様の動作になりますベースプレートを明示的に無効にするには hiddenを設定します
ベースプレートを使用することでほかのコンテンツがなくてもボリュームの境界がすぐにわかります
BOT-anistアプリに円形の水準器を追加した場合にボリュームの端や隅を見つけるのにベースプレートが役立ちますここにウインドウコントロールがあります visionOS 2ではこれが特に重要ですボリュームの新しいサイズ変更ハンドルは隅にあるためですウインドウと同様です
ベースプレートによって隅のサイズ変更ハンドルがわかりやすくなりますしかしシーンのサイズを変更しようとしてもすぐに元のサイズに戻ります何が起きているのでしょうかボリュームはデフォルトではコンテンツのサイズから最小サイズと最大サイズを継承します SwiftUIでこの挙動を操作するには windowResizabilityモディファイアの contentSizeの挙動を使いますボリュームの自動的な挙動はモディファイアの記述と同様に機能しますこの場合ボリュームの最小サイズと最大サイズはいずれもビューのサイズによって決まります
ExplorationViewでframeを記述し width、height、depthを指定しましたこれによりボリュームのサイズはビューのフレームに合わせて固定されます
ここに変更を加えてフレームの最小値を指定するとビューのサイズを拡大できるようになりますボリュームはコンテンツのサイズを継承するためボリュームのサイズも変更可能になります
また最大サイズを指定するとボリュームのサイズの上限を指定できます
サイズ変更ハンドルによるスムーズなボリュームサイズ変更が可能になりました
いいですね
この挙動を使うとボリュームのサイズをコードで変更することもできますアプリでコンテンツが更新されビューのフレームに変更があった場合にそのサイズがボリュームにも通知されますこれによりコンテンツの変化に簡単に対応できシーンの境界で切り取られてしまう心配もありません
サイズ変更ハンドルはコンテンツに近い隅の部分に表示されるためコントロールが遠く離れた場所に行ってしまうこともありません
ボリュームのサイズをプログラムで変更するにはスケールに対応する新しい状態変数を追加します
このスケール変数の値を変更するとビューのフレームの値が更新されその新しいサイズに合うようにボリュームのサイズが自動変更されます
RealityKitエンティティのスケールについても円形のexplorationLevelを量で指定しますここでスケールを変更するコントロールが必要です
サイズの切り替えボタンを追加してここではオーバーレイに配置します
これでボタンを押すと小さいサイズから大きいサイズへとレベルが切り替わりそれに応じてボリュームの境界が調整されるようになりましたただしボタン自体は少し場違いに見えますツールバーに入れるのがよいでしょう
ボリュームではツールバーがサポートされており下部のオーナメントに表示されますツールバーはアプリでよく使うコントロールをまとめて表示するのに適しています
ツールバーはボリュームの動きに応じて自動的に大きさが変わるのでボリュームの配置に関わらずコンテンツにアクセスできますこのツールバーはアプリでよく使うコントロールのグループ化に便利なのでこのアプリに追加しましょう
ツールバーにコントロールを配置するには toolbarモディファイアをアプリのビューに記述します
toolbar内にToolbarItemと ToolbarItemGroupを作成します
各アイテムの配置をplacementで .bottomOrnamentと指定しますこれはvisionOS 1との互換性確保のために必要ですただし visionOS 2では配置を自動にしても下部のオーナメントに配置されます visionOS 2のみを対象とするアプリではこの引数を省略できます
ToolbarItem内にボタンを追加しゲームで様々なアクションを実行可能にします
このようにツールバーにコントロールが表示されます
visionOS 2の新機能によりツールバーはウインドウコントロールと共にプレイヤーが立つ場所のボリュームの横に自動的に移動しますこれによりプレイヤーは新しい角度からコンテンツを見ることができその際ツールもすべて必要な場所に表示されますツールバーだけでなく付加的なオーナメントもボリュームに追加できますオーナメントは付加的なコントロールの表示や現在のコンテンツの詳細情報の提供に適しています
オーナメントを使用してアプリのウインドウの上部や周辺に補足情報を表示させることでメインウインドウの見た目がすっきりしますウインドウではどこにでもオーナメントを追加できツールバーとしてだけでなくウインドウ周辺の任意の場所に配置できますボリュームでも同じことが可能ですボリューム内部にもオーナメントを配置でき深さも制御可能ですオーナメントのサイズも動的に変更されボリュームが遠く離れた場合でも適切なサイズが維持されます
オーナメントは非常に柔軟ですがやりすぎないことが重要です
ボリュームの周囲に多数のオーナメントを配置するとそのアプリで本当に目立たせたいコンテンツが目立たなくなります 1つのオーナメントにコントロールや情報をまとめて格納すると見やすくなりますまたシステムで用意されているコントロールの中にはツールバーやタブビューなどオーナメントになっているものがありますカスタムオーナメントがそれらと競合しないように注意してください
アプリ内で栽培の目標達成に向けた進捗を表示するこのようなビューを追加しました現在このビューはボリュームのメインビュー内にあります
そのためボリュームの周りを歩いても更新されませんボリュームを遠ざけるとビューが小さくなり読みにくくなりますこのビューを取り出してオーナメントに配置すれば自動的な挙動を使用できますここではビューがボリュームのボディ内にあります
ビューをオーナメント内に配置するために ornamentモディファイア内に移動します
UnitPoint3Dを使用して sceneアンカーを指定しますこれによりオーナメントを配置する際にボリュームの幅、高さ、奥行きが考慮されますここでtopBackの配置を指定するとメインレベルの背後の上部中央にオーナメントが表示されます
アプリで試してみましょう
このようにメインレベルの背後に浮かんでいますツールバーと同じようにオーナメントも視点に追従してボリュームの周囲を移動しどの方向からでも常にアクセスできますシーン内での位置はプレイヤーがどの方向からボリュームを見ているかに応じて決まります
ボリュームの各側面がビューポイントになりますプレイヤーがボリュームの周りを動くとウインドウコントロールとオーナメントがプレイヤーに最も近いビューポイントに自動的に移動します
現在のビューポイントに応じてオーナメントの位置が自動的に更新されますここで小さなロボットを追加するとロボットは正面を向いておりプレイヤーがどこにいるかわかっていませんプレイヤーの動きに応じてロボットがプレイヤーの方向を向いてくれたらアプリが生き生きします
まずビューポイントの更新情報を取得するために新しいモディファイアを追加します onVolumeViewpointChangeですこれはアクティブなビューポイントが更新されるたびに呼び出されますこれを使いアクティブなビューポイントを追跡する appStateの変数を設定しますロボットは更新時にこの値を使用することで現在のビューポイントの方向を向きます
ビューポイントの squareAzimuthの値を使用しますこの型ではボリュームに対する位置が 4つの値のいずれかに正規化されます 4つの値はボリュームの4つの側面に対応します
SquareAzimuthの4つの側面は front、left、right、backのセマンティックな値を取りますこれらのセマンティックな値には特殊なRotation3Dも含まれますこれはビューやエンティティに対し回転として直接適用できます
ロボットの動きを処理するコードでロボットがアイドルモードのときにプレイヤーの方を向くようにコードを少し追加しましたさらに手を振るアニメーションを実行します
これでロボットが私の方を向いて
手を振ってくれるようになりましたこれでアプリに動きが出て楽しい雰囲気になってきました
ただしすべてのビューポイントへの対応はすべてのアプリで必須とは限りませんこの例では正面と左右だけにビューポイントを限定しています
サポートされるビューポイントを指定するには別の新しいViewモディファイアを使用します supportedVolumeViewpointsですデフォルトではすべてのビューポイントがサポートされます
ここではボリュームの正面と左右のみをサポートし背面は除外します
そのために front、left、rightの値をオプションセットとして渡します
オーナメントとウインドウコントロールはプレイヤーがボリュームの背面に行くと移動してきませんロボットも停止しています今まではプレイヤーの動きに応じてロボットが反応していたのでプレイヤーが適切でない方向にいることを知らせてほしいところです
サポートされるビューポイントに新しい値が含まれていない場合でも VolumeViewpointChangeのブロックが呼び出されるようにビューポイントの新しい引数である updateStrategyを追加します .allを指定するとすべてのビューポイントの更新情報を取得できますサポートされていないビューポイントも含まれますサポートされる値に新しい値が含まれているかどうかをチェックし含まれていない場合はロボットの新しいアニメーションをトリガーしてサポートされるビューポイントのいずれかに戻るようにプレイヤーに伝えます
これでボリュームの背面に向かうとサポートされている側面のところでオーナメントの動きが止まり
ロボットは怒ったような動きをして元の場所に戻るように伝えます
これで良くなりました
新しいオプションもいくつかありますこの空間内でボリュームをどのように表示するかを制御するオプションです 1つ目のオプションはアプリの世界に応じた配置です .gravityAlignedではボリュームは鉛直方向に配置され底面が床面と平行になります .adaptiveではボリュームを持ち上げると傾きます通常は Adaptiveを使用して傾かせる方が見やすくなります visionOS 2ではこちらがデフォルトですボリュームは最初は地面と平行ですが水平よりも高くなると傾き始めます
これによりボリュームのコンテンツを利用しやすくなります仰向けの状態でも利用できますインタラクティブなコンテンツではこの方が快適に利用できます
ただしボリュメトリックアプリでも必要なインタラクションが少ない場合や主に環境コンテンツを提供するアプリの場合には
Gravity alignedの動作が適しています
volumeWorldAlignmentモディファイアでは .adaptiveの配置をオーバーライドしてボリュームの向きを床と水平に維持できます
このたびボリュームで動的なスケールを使用できるようになりました
visionOSのウインドウのスケールが空間内での移動に応じて変化しますウインドウを遠ざけると視界での大きさを維持するために拡大されますウインドウにはテキストやコントロールが含まれていることが多く距離が離れると使いにくくなるのでこの機能が役立ちます
これはボリュームのツールバーやオーナメントと同様の動作です
これに対してボリューム自体はデフォルトではスケールが固定されていますその方が空間内での実在感が強くなるためです
遠く離れてもサイズが固定されたままなので距離が離れるとコンテンツは小さく見えます
ボリュメトリックアプリでは多くの場合これが適しています室内の仮想コンテンツがあたかもそこに実在するかのように見えるからです
ただしボリュメトリックアプリで使用するコンテンツの密度が高く種類の異なる多数のインタラクティブな領域がある場合は動的なスケールが適します
ボリュームに動的なスケールを適用するには defaultWorldScalingBehaviorという新しいシーンモディファイアを使用します BOT-anistはインタラクティブなゲームなので動的なスケールの方が適していますそこで .dynamicオプションを指定してこの挙動を有効にします
順調なスタートですボリュームを活用した楽しいアプリができそうですボリュームについてたくさん説明してくれましたね次はなんでしょうこのロボットをイマーシブ空間により現実の世界に連れ出したいと思います魔法のような話ですね
多くのデベロッパの方々がイマーシブ空間により Apple Vision Proで魅力的な体験を創出しています Owenはここまで BOT-anistアプリを使って共有スペースにおけるボリュームについて説明してくれましたここからはウインドウからさらに話を進め素晴らしいイマーシブ体験を構築して部屋全体を温室にしてみましょう
最初のタスクはイマーシブ空間の作成です Xcodeの新規プロジェクト作成ダイアログに構成のためのオプションがありますがここでは自分で追加します
イマーシブ空間がありますが現時点では空の状態です
イマーシブ空間を開いたらボリュームからイマーシブ空間に RealityKitのコンテンツをすべて移植しますこのプロセスは非常にシームレスで驚くほど快適ですこれで BOT-anistで現実の世界を探索できるようになります
ここで利用できる名前付きの座標空間があります visionOS 1.1で導入されたもので immersiveSpaceと呼ばれます
座標空間は特定の座標系に対する相対位置を正確に指定するための手段です
新しいイマーシブな座標空間は SwiftUIの既存のローカルおよびグローバルの座標空間に適合します
.localは現在のビューの座標空間であり起点はビューの左上です
.globalはウインドウの座標空間であり起点はウインドウの左上です
ボリュームでは起点はボリュームの左上背面です
.immersiveSpaceは .globalを基盤としておりイマーシブ空間が開かれている間起点はプレイヤーが立つ地面の位置になります
ここでは RealityViewの座標空間を使用してイマーシブ空間への移行を実現します RealityViewには多数の変換関数が用意されていますそれらを使ってRealityKitとSwiftUIの間の座標空間の変換を行いますまずロボットのtransformの変換を処理しボリュームのRealityKitのシーン空間から SwiftUIのイマーシブ空間へ変換しますこのRealityViewのupdateクロージャで最初の変換関数を呼び出します
ここでロボットのtransformをローカルのボリュームのRealityKitシーン空間から SwiftUIのイマーシブ空間に変換します次に変換されたtransformを後で使用できるようappModelに保存します
さらにロボットの親をボリュームからイマーシブ空間のルートエンティティに変更しますロボットの親が変更されボリュームからロボットを取り出す transformが計算されたらボリュームビューからの変換を完了としてマークしますここからはイマーシブ空間ビューで変換を続けます
イマーシブ空間ビューで別の変換関数を呼び出します
次に SwiftUIのイマーシブ空間から RealityKitシーン空間に移行するための transformの計算を行いますそしてこの2つのtransformを合成しますこの合成では今の計算結果と先ほどappModelに保存しておいた結果を乗算しますその結果ボリュームのローカル座標空間からイマーシブ空間の座標空間への変換が行われますロボットのtransformを更新するとロボットはイマーシブ空間でボリュームで表示されていた時と同じ位置に配置されるようになります
ロボットのtransformが変換されたらジャンプを開始します
移行の準備は整っています座標変換のAPIを活用することでロボットはボリュームから飛び出してイマーシブ体験の世界へ移行できるようになります着地が決まりました
次に BOT-anistアプリのイマーシブ体験のスタイルを選択します
デフォルトのイマーシブ体験のスタイルは Mixedですプレイヤーの周囲を背景としてアプリが表示されます Progressiveスタイルはパススルーとフルイマーシブの中間です曲面型のポータルにアプリが表示されアプリの周囲はパススルーが適用されます Fullスタイルでは周囲の環境が完全にイマーシブアプリに置き換えられますここではProgressiveスタイルを選択します
BOT-anistで世界を探索するのに適したスタイルです
BOT-anistアプリに Progressiveスタイルを適用するとデフォルトではポータルの初期サイズはプレイヤーの視界の半分を占める大きさですまたサポートされるイマーシブ度の範囲もシステムにより定義されますこの定義ではイマーシブ度の範囲の最小値と最大値を指定します
BOT-anistアプリのイマーシブ感をさらに高めたいと思います visionOS 2の新機能としてイマーシブ度のカスタム範囲を指定できますイマーシブ度を増減させることができロボットがボリュームからイマーシブ空間に飛び出したという感覚を魅力的に演出できますこの新しいAPIを詳しく見てみましょう
まず新しいイニシャライザを使ってイマーシブ度のカスタム範囲と初期のイマーシブ度の値を考慮して Progressiveのイマーシブ体験スタイルを作成しますイマーシブ空間に Progressiveスタイルを適用するとシステムは指定した値を使用してシーンに適用されるProgressive効果の最小値、最大値、初期値を定義します
BOT-anistアプリのイマーシブ体験をよりイマーシブ感の高いものにするためにイマーシブ度の初期値を80%にします BOT-anistアプリのイマーシブ度のカスタム範囲については最小値を20% 最大値を100%に設定します 100%はFullスタイルに相当します
イマーシブ度のカスタム範囲の効果を実際に確認してみましょうイマーシブ度を高めることはロボットがボリュームから飛び出した感じを演出するうえで有効です範囲を指定したことで素晴らしい表示になりましたイマーシブ体験の調整に Digital Crownを使うこともできます
次にサポートされるイマーシブ度の調整に Digital Crownを使う場合にロボットが反応するようにします
onImmersionChangeモディファイアを使ってイマーシブ度の変更に反応させますこれにより新しいイマーシブ度を持つ context値が得られます
イマーシブ度が変更されたら得られたcontextから値を読み込みます BOT-anistではこの値を保存して変更前後の値を比較できるようにします
onChangeを使用して保存されているイマーシブ度に対する変更を処理しますクロージャから新旧の値を取得して渡します
イマーシブ度の変化にロボットが反応するようにするにはイマーシブ度が高くなるとロボットが外に出てくる処理をトリガーする関数を呼び出します
またイマーシブ度が低くなるとロボットが中に入る処理をトリガーする関数も呼び出します確かめてみましょうイマーシブ度が変わるとロボットが反応するようになりましたイマーシブ度を高くするとこちらに向かってきます低くすると向こうへ遠ざかります
もう一度イマーシブ度を高くしてみましょうイマーシブ度が高くなるとロボットは反応し外に出てきて広い空間を探索しますが現時点では環境に隙間が多いようです
対策として床をタップして植物を置けるようにします環境の床に対して植物を置きロボットが探索できるようにします床の特定の場所に植物を配置するには床のアンカーに対して植物を置く必要がありそのためにはそのアンカーの3D位置情報が必要です
アプリでアンカーの3D位置情報にアクセスできるようにするには RealityKitの新しい SpatialTrackingSession APIを使用してトラッキングの必要なアンカー機能をプレイヤーが許可できるようにします
このAPIを使用するにはまず空間トラッキングセッションを作成します
タスクを作成しイマーシブ空間を開けたら空間トラッキングセッションを実行する関数を呼び出します
セッションを実行するにはまず平面アンカーのトラッキングの設定を行います
その設定を使用してセッションを実行し平面アンカーの変換の許可についてプロンプトを表示します
平面のトラッキングを登録できたのでトラッキングするアンカーを追加する必要があります
ターゲットの平面について水平方向の配置を指定し .floorのclassificationでトラッキングするフロアアンカーエンティティを作成します
次にフロアアンカーをイマーシブ空間の RealityViewコンテンツに追加します最後に新しいアンカーの3D位置情報を使用して室内に植物を配置します
イマーシブ空間のターゲットエンティティに対するタップの検出に使用できる SpatialTapGestureを追加します
ジェスチャーが終了したらそのジェスチャーの値をタップを処理する関数に渡します
タップを処理するにはまずジェスチャーの値に対して convert関数を使用して floorAnchorに対するジェスチャーの位置を取得しますこの処理ではアプリで floorAnchorのtransformを使用できる必要があります
最後に植物を配置するために floorAnchorの子として植物を追加し変換済みの位置情報を使用して植物エンティティの位置を設定します
リストから植物を選びます床の上のホバーエフェクトは植物を配置できる場所を示していますタップすると植物が配置されます室内に植物を置くと BOT-anistアプリに精彩が加わります
SpatialTrackingSession APIの詳細を知りたい方に視聴をおすすめするセッションは「Build a spatial drawing app with RealityKit」です
イマーシブな温室体験がだいぶ完成に近づいてきました
ロボットが近づくと成長を喜ぶ直物のアニメーションが再生されます
嬉しい気分をさらに高めましょう現時点ではこの環境の植物はそれぞれ関連する色が付いたプランターに配置されていますプランターの色合いに合わせてパススルーに色を付けるとさらに楽しそうな雰囲気が加わるでしょう
preferredSurroundingsEffect APIを使うと周囲のパススルーに色を付けられます BOT-anistアプリのイマーシブ体験をアップデートしてプランターの色使いに合わせてパススルーに色を付け植物を育てる喜びを表現できるようにします
まずはプランターに合わせて色合いを選びます
カスタムのPlantComponentに tintColorプロパティを追加します switchで植物の種類ごとに条件分岐を作り色合いを選択します例えばコーヒーベリーはライトブルーです
色を付けるエフェクトを実行するにはロボットがプランターに近付いたら検出できるようにする必要がありますこれを実現するには RealityKitによる衝突検出を使用します
ロボットの経時的な動作を処理するには collisionクロージャを使用して衝突したエンティティを処理しますそしてcollisionの値をヘルパー関数に渡します
RealityKitを使用した衝突検出の詳細については「Develop your first immersive app」をご覧ください
このヘルパー関数ではまずロボットが植物と衝突したかどうかをチェックしてしていなければreturnを返し
衝突すれば喜びのアニメーションを再生します
最後にイマーシブ空間にいる場合は appModelのactiveTintColorを後で使用できるように保存します
イマーシブビューに戻り保存されているアクティブなtintColorをもとに SurroundingsEffectの colorMultiplyを作成しますそのSurroundingsEffectを使用してパススルーに色を付けます
では確認してみましょうロボットが植物に近づくと更新された配色でパススルーに色が付くでしょうか
ポピーはマゼンタ、
ユッカはライトグリーン、
コーヒーベリーはライトブルーですうまくいきました
本セッションではアプリでボリュームやイマーシブ空間を構築するための様々な新しい方法をご紹介しました新しいresizabilityの挙動でアプリのボリュームサイズの変更を調整できますビューポイントを使うとボリュームの周囲を歩くプレイヤーにアプリを反応させることができますボリュームからイマーシブ空間へと世界を移すには座標変換が役立ちますイマーシブ空間でのイマーシブ度の変更に反応させることができます空間アプリは従来想像もできなかった体験を実現できるまったく新しい世界です SwiftUIとRealityKitというパワフルで表現力に優れたツールを利用すれば可能性は無限ですほんの少し斬新な感覚と想像力を働かせることでみなさんも驚異的な世界を創出できますご視聴ありがとうございました

// Baseplate

WindowGroup(id: "RobotExploration") {
    ExplorationView()
        .volumeBaseplateVisibility(.visible) // Default!
}
.windowStyle(.volumetric)

4:29 - Enabling resizability

// Enabling resizability

WindowGroup(id: "RobotExploration") {
    let initialSize = Size3D(width: 900, height: 500, depth: 900)

    ExplorationView()
        .frame(minWidth: initialSize.width, maxWidth: initialSize.width * 2,
               minHeight: initialSize.height, maxHeight: initialSize.height * 2)
        .frame(minDepth: initialSize.depth, maxDepth: initialSize.depth * 2)
}
.windowStyle(.volumetric)
.windowResizability(.contentSize) // Default!

6:10 - Programmatic resize

// Programmatic resize

struct ExplorationView: View {
    @State private var levelScale: Double = 1.0

    var body: some View {
        RealityView { content in
            // Level code here
        } update: { content in
            appState.explorationLevel?.setScale(
                [levelScale, levelScale, levelScale], relativeTo: nil)
        }
        .frame(width: levelSize.value.width * levelScale,
               height: levelSize.value.height * levelScale)
        .frame(depth: levelSize.value.depth * levelScale)
        .overlay { Button("Change Size") { levelScale = levelScale == 1.0 ? 2.0 : 1.0 } }
    }
}

7:39 - Toolbar ornament

// Toolbar ornament

ExplorationView()
.toolbar {
		ToolbarItem {
      	Button("Next Size") {
          	levelScale = levelScale == 1.0 ? 2.0 : 1.0
        }
    }
  	ToolbarItemGroup {
      	Button("Replay") {
          	resetExploration()
        }
      	Button("Exit Game") {
          	exitExploration()
          	openWindow(id: "RobotCreation")
        }
    }
}

10:41 - Ornaments

// Ornaments

WindowGroup(id: "RobotExploration") {
    ExplorationView()
    .ornament(attachmentAnchor: .scene(.topBack)) {
        ProgressView()
    }
}
.windowStyle(.volumetric)

12:08 - Volume viewpoint

// Volume viewpoint

struct ExplorationView: View {
    var body: some View {
        RealityView { content in
            // Some RealityKit code
        }
        .onVolumeViewpointChange { oldValue, newValue in
            appState.robot?.currentViewpoint = newValue.squareAzimuth
        }
    }
}

13:06 - Using volume viewpoint

// Volume viewpoint

class RobotCharacter {

    func handleMovement(deltaTime: Float) {
        if self.robotState == .idle {
            characterModel.performRotation(toFace: self.currentViewpoint, duration: 0.5)
            self.animationState.transition(to: .wave)
        } else {
            // Handle normal movement
        }
    }
}

13:43 - Supported viewpoints

// Supported viewpoints
struct ExplorationView: View {
  	let supportedViewpoints: Viewpoint3D.SquareAzimuth.Set = [.front, .left, .right]
  
  	var body: some View {
      	RealityView { content in
        		// Some RealityKit code
        }
      	.supportedVolumeViewpoints(supportedViewpoints)
      	.onVolumeViewpointChange { _, newValue in
        		appState.robot?.currentViewpoint = newValue.squareAzimuth
        }
    }
}

14:30 - Viewpoint update strategy

// Viewpoint update strategy

struct ExplorationView: View {
    let supportedViewpoints: Viewpoint3D.SquareAzimuth.Set = [.front, .left, .right]

    var body: some View {
        RealityView { content in
            // Some RealityKit code
        }
        .supportedVolumeViewpoints(supportedViewpoints)
        .onVolumeViewpointChange(updateStrategy: .all) { _, newValue in
            appState.robot?.currentViewpoint = newValue.squareAzimuth
            if !supportedViewpoints.contains(newValue) {
                appState.robot?.animationState.transition(to: .annoyed)
            }
        }
    }
}

16:42 - World alignment

// World alignment

WindowGroup {
    ExplorationView()
    .volumeWorldAlignment(.gravityAligned)
}
.windowStyle(.volumetric)

18:05 - Dynamic scale

// Dynamic scale

WindowGroup {
    ContentView()
}
.windowStyle(.volumetric)
.defaultWorldScalingBehavior(.dynamic)

19:16 - Starting with an empty immersive space

struct BotanistApp: App {
    var body: some Scene {
        // Volume
        WindowGroup(id: "Exploration") {
            VolumeExplorationView()
        }
        .windowStyle(.volumetric)

        // Immersive Space
        ImmersiveSpace(id: "Immersive") {
            EmptyView()
        }
    }
}

20:52 - Callout to convert function from volume view

// Coordinate conversions
// Convert from RealityKit entity in volume to SwiftUI space
struct VolumeExplorationView: View {
    @Environment(ImmersiveSpaceAppModel.self) var appModel

    var body: some View {
        RealityView { content in
            content.add(appModel.volumeRoot)
            // ...
        } update: { content in
            guard appModel.convertingRobotFromVolume else { return }

            // Convert the robot transform from RealityKit scene space for
            // the volume to SwiftUI immersive space
            convertRobotFromRealityKitToImmersiveSpace(content: content)
        }
    }
}

21:08 - Convert robot's transform to SwiftUI immersive space

// Coordinate conversions
// Convert from RealityKit entity in volume to SwiftUI space
func convertRobotFromRealityKitToImmersiveSpace(content: RealityViewContent) {
    // Convert the robot transform from RealityKit scene space for
    // the volume to SwiftUI immersive space
    appModel.immersiveSpaceFromRobot =
        content.transform(from: appModel.robot, to: .immersiveSpace)

    // Reparent robot from volume to immersive space
    appModel.robot.setParent(appModel.immersiveSpaceRoot)

    // Handoff to immersive space view to continue conversions.
    appModel.convertingRobotFromVolume = false
    appModel.convertingRobotToImmersiveSpace = true
}

21:42 - Callout to convert function from immersive space view

// Coordinate conversions
// Convert from SwiftUI immersive space back to RealityKit local space
struct ImmersiveExplorationView: View {
    @Environment(ImmersiveSpaceAppModel.self) var appModel

    var body: some View {
        RealityView { content in
            content.add(appModel.immersiveSpaceRoot)
        } update: { content in
            guard appModel.convertingRobotToImmersiveSpace else { return }

            // Convert the robot transform from SwiftUI space for the immersive
            // space to RealityKit scene space
            convertRobotFromSwiftUIToRealityKitSpace(content: content)
        }
    }
}

21:48 - Compute transform to place robot in matching position in immersive space

// Coordinate conversions
// Calculate transform from SwiftUI to RealityKit scene space
func convertRobotFromSwiftUIToRealityKitSpace(content: RealityViewContent) {
    // Calculate transform from SwiftUI immersive space to RealityKit
    // scene space
    let realityKitSceneFromImmersiveSpace =
    content.transform(from: .immersiveSpace, to: .scene)

    // Multiply with the robot's transform in SwiftUI immersive space to build a
    // transformation which converts from the robot's local
    // coordinate space in the volume and ends with the robot's local
    // coordinate space in an immersive space.
    let realityKitSceneFromRobot =
    realityKitSceneFromImmersiveSpace * appModel.immersiveSpaceFromRobot

    // Place the robot in the immersive space to match where it
    // appeared in the volume
    appModel.robot.transform = Transform(realityKitSceneFromRobot)

    // Start the jump!
    appModel.startJump()
}

23:54 - Customizing immersion

// Customizing immersion
struct BotanistApp: App {
    // Custom immersion amounts
    @State private var immersionStyle: ImmersionStyle = .progressive(0.2...1.0, initialAmount: 0.8)

    var body: some Scene {
        // Immersive Space
        ImmersiveSpace(id: "ImmersiveSpace") {
            ImmersiveSpaceExplorationView()
        }
        .immersionStyle(selection: $immersionStyle, in: .mixed, .progressive, .full)
    }
}

25:17 - Callout to function to handle immersion amount changed

// Reacting to immersion
struct ImmersiveView: View {
    @State var immersionAmount: Double?
  
    var body: some View {
        ImmersiveSpaceExplorationView()
            .onImmersionChange { context in
                immersionAmount = context.amount
            }
            .onChange(of: immersionAmount) { oldValue, newValue in
                handleImmersionAmountChanged(newValue: newValue, oldValue: oldValue)
            }
    }
}

25:39 - Handle function to make robot react to changed immersion amount

// Reacting to immersion
func handleImmersionAmountChanged(newValue: Double?, oldValue: Double?) {
    guard let newValue, let oldValue else {
        return
    }

    if newValue > oldValue {
        // Move the robot outward to react to increasing immersion
        moveRobotOutward()
    } else if newValue < oldValue {
        // Move the robot inward to react to decreasing immersion
        moveRobotInward()
    }
}

26:57 - Create spatial tracking session

// Create and run spatial tracking session
struct ImmersiveExplorationView {
    @State var spatialTrackingSession: SpatialTrackingSession
        = SpatialTrackingSession()

    var body: some View {
        RealityView { content in
            // ...
        }
        .task {
            await runSpatialTrackingSession()
        }
    }
}

27:11 - Run spatial tracking session

// Create and run the spatial tracking session
func runSpatialTrackingSession() async {
    // Configure the session for plane anchor tracking
    let configuration =
        SpatialTrackingSession.Configuration(tracking: [.plane])

    // Run the session to request plane anchor transforms
    let _ = await spatialTrackingSession.run(configuration)
}

27:32 - Create a floor anchor to track

// Create a floor anchor to track
struct ImmersiveExplorationView {
    @State var spatialTrackingSession: SpatialTrackingSession
        = SpatialTrackingSession()

    let floorAnchor = AnchorEntity(
        .plane(.horizontal, classification: .floor, minimumBounds: .init(x: 0.01, y: 0.01))
    )

    var body: some View {
        RealityView { content in
            content.add(floorAnchor)
        }
        .task {
            await runSpatialTrackingSession()
        }
    }
}

27:54 - Detect taps on entities in immersive space

// Detect taps on entities in immersive space
RealityView { content in
    // ...
}
.gesture(
    SpatialTapGesture(
        coordinateSpace: .immersiveSpace
    )
    .targetedToAnyEntity()
    .onEnded { value in
        handleTapOnFloor(value: value)
    }
)

28:09 - Handle tap event to place plant

// Handle tap event
func handleTapOnFloor(value: EntityTargetValue<SpatialTapGesture.Value>) {
    let location =
        value.convert(value.location3D, from: .immersiveSpace, to: floorAnchor)

    plantEntity.position = location
    floorAnchor.addChild(plantEntity)
}

29:47 - Add tint color to custom plant component

// Add tint color to custom plant component
struct PlantComponent: Component {
    var tintColor: Color {
        switch plantType {
        case .coffeeBerry:
            // Light blue
            return Color(red: 0.3, green: 0.3, blue: 1.0)
        case .poppy:
            // Magenta
            return Color(red: 1.0, green: 0.0, blue: 1.0)
        case .yucca:
            // Light green
            return Color(red: 0.2, green: 1.0, blue: 0.2)
        }
    }
}

30:09 - Handle collisions with robot

// Handle collisions with robot
//
// Handle movement of the robot between frames
func handleMovement(deltaTime: Float) {
    // Move character in the collision world
    appModel.robot.moveCharacter(by: SIMD3<Float>(...), deltaTime: deltaTime, relativeTo: nil) { collision in
        handleCollision(collision)
    }
}

30:29 - Set active tint color when colliding with plant

// Set active tint color when colliding with plant
//
// Handle collision between robot and hit entity
func handleCollision(_ collision: CharacterControllerComponent.Collision) {
    guard let plantComponent = collision.hitEntity.components[PlantComponent.self] else {
        return
    }

    // Play the plant growth celebration animation
    playPlantGrowthAnimation(plantComponent: plantComponent)

    if inImmersiveSpace {
        appModel.tintColor = plantComponent.tintColor
    }
}

30:48 - Apply effect to tint passthrough

// Apply effect to tint passthrough
struct ImmersiveExplorationView: View {
    var body: some View {
        RealityView { content in
            // ...
        }
        .preferredSurroundingsEffect(surroundingsEffect)
    }

    // The resolved surroundings effect based on tint color
    var surroundingsEffect: SurroundingsEffect? {
        if let color = appModel.tintColor {
            return SurroundingsEffect.colorMultiply(color)
        } else {
            return nil
        }
    }
}

関連する章

リソース

関連ビデオ

WWDC24

WWDC23