はじめてのイマーシブなアプリの開発

はじめてのイマーシブなアプリの開発

XcodeとReality Composer Proを使用して、visionOS用アプリを作成する方法を紹介します。新規visionOSプロジェクトを開始する方法、SwiftUI開発にXcode Previewsを使用する方法、RealityKitとRealityViewを活用して3Dコンテンツをレンダリングする方法を紹介します。

関連する章
- 0:00 - Introduction
- 1:06 - Create an Xcode project
- 8:57 - Simulator
- 12:12 - Xcode Previews
- 13:34 - Reality Composer Pro
- 20:18 - Create an immersive scene
- 25:28 - Target gestures to entities
- 30:16 - Wrap-up
リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
ダウンロード

♪ ♪ ♪ こんにちは Peterです AppleのRealityKit Tools チームに所属しています今日は初めての方むけにイマーシブなアプリの開発について解説します空間コンピューティングはまったく新しい方法でコンテンツを表示したりより深いレベルの没入感をアプリに提供しますプラットフォーム自体は新しいもののアプリを構築する方法はすでに馴染みのあるワークフローを使用しますこのセッションではまず Xcodeで新しいアプリプロジェクトを作成します Simulatorを使用してシミュレートしたシーンでアプリを体験する方法と Xcode Previewsを使って迅速にコードを記述する方法を解説しますアプリのための空間コンテンツの準備とプレビューを支援する新しいツール Reality Composer Proを紹介します最後にイマーシブなシーンを作成し RealityKitのエンティティを対象に SwiftUIジェスチャーを使用してみます何百万人ものデベロッパが毎日Xcodeを使ってアプリを作成プレビューデバッグプロファイルそして配信の準備を行っています Xcodeは皆さんが初めてアプリを作るための最適な場所です Xcodeのプロジェクト作成プロセスを通じてこのプラットフォームの新機能を確認しましょう Xcodeで新しいプロジェクトを作成すると新しいプロジェクトアシスタントが表示されますプラットフォームやプロジェクトの種類でテンプレートが整理されていますアプリのプロジェクトテンプレートは「Platform」タブの「Application」セクションで使用できます新しいプロジェクトではプラットフォームサポートがインストールされていない場合ダウンロードを求められることがあります新しいプロジェクトアシスタントにはいくつかのオプションがありそのうち2つはこのプラットフォームでは新しいものですこの新しいオプションを詳しく見てみましょう 1つ目の新しいオプション Initial Sceneではアプリに自動的に含まれる初期シーンのタイプを指定することができます新しいプロジェクトアシスタントは常にここで選択したタイプのシーンを含むスタートポイントを作成しますデベロッパは後からシーンを追加できますこれは初期シーンと同じタイプにもできますしまったく別のシーンタイプにもできますこのテンプレートではウィンドウとボリュームの 2つの初期シーンが用意されていますこの2つの違いを見ていきましょうウィンドウは主に2次元のコンテンツを表示するようデザインされています平面的なサイズは変更可能ですが奥行きは固定されていますウィンドウは一般的に他の実行中のアプリと一緒に表示されますウィンドウシーンタイプの詳細と SwiftUIへの追加要素と変更点については “Meet SwiftUI for spatial computing”をご覧くださいボリュームは主に3Dコンテンツの表示用にデザインされています 3次元の大きさはアプリでコントロールできますがアプリのユーザーが調節することはできませんウィンドウと同様にボリュームは一般的に他の実行中のアプリと一緒に表示されます “Take SwiftUI to the next dimension”セッションでボリュームシーンタイプについて詳しく解説しています 2番目のオプションの Immersive Spaceでは皆さんのアプリにイマーシブなコンテンツのスタートポイントを提供します Immersive Spaceシーンタイプをアプリに追加するとそれを使って無限のキャンバス上の任意の場所に好きなコンテンツを表示できますアプリがこのシーンタイプをアクティブ化すると Shared SpaceからFull Spaceに移動します Full Spaceでは他の実行中のアプリが邪魔にならないように隠されますアプリは専用のレンダリングリソースにアクセスすることもできハンドトラッキングのような ARKit機能を有効にする許可を要求することもできますアプリで没入型エクスペリエンスを作成する場合 SwiftUIは3つの異なるスタイルを提供します Mixed Immersion Progressive Immersion Full Immersionの3種類です Mixed Immersionスタイルでは Full Spaceに自由な仮想コンテンツを配置しながらパススルーで周囲とのつながりを保つことができます Progressive Immersionスタイルでは人々を周囲から完全に排除することなくより没入感のあるエクスペリエンスを提供するポータルを開けますポータルが開くと約180度の視野で没入感のあるコンテンツを見ることができ Digital Crownでポータルのサイズを調整できます Full Immersionスタイルはパススルーを完全に隠し人々はアプリの環境に包まれ新しい場所へと移動します Immersive Spacesについては後ほど詳しく説明しますより深く掘り下げるには “Go beyond the window with SwiftUI”をご覧くださいデフォルトではアプリに Immersive Spaceは追加されませんこれはオプションで Noneを選択した時の動作ですしかし Immersive Spaceオプションのいずれかを選ぶとテンプレートは自動的に選択された Immersive Spaceスタイルで 2番目のSwiftUIシーンを追加しますデフォルトでは誰かがイマーシブなコンテンツを開くことができるようにウィンドウシーンにも SwiftUIボタンが提供されます一般的にこのプラットフォームではアプリは常にウィンドウで起動しコンテンツに没入するタイミングを決められる明確な出入り口を提供するようおすすめします人々が気づかないうちにイマーシブエクスペリエンスに移動することが無いようにしましょうこのセッション用のプロジェクトを設定しましょうまず初期シーンはボリューム Immersive Space無しで始めますいつも通りプロジェクトを作成します名前を付け Xcodeに保存場所を指定し終了します作成が終わると新規プロジェクトが開きます左側にXcodeの Project Navigatorが表示されます最初のファイルは MyFirstImmersiveApp.swiftですアプリが初期ボリュームを提供する WindowGroupを宣言します WindowGroupはiOSで見たのと同じ構成要素でアプリが提供するトップレベルのSwiftUIビューを指定します 2つ目のファイルはContentView.swiftですこの初期ボリュームで表示されるビューですプロジェクトはメインエディタに ContentView.swiftが表示された状態で開きます Xcodeではプロジェクトに自動的に含まれる RealityKitコンテンツパッケージの内容をロードする ContentViewのプレビューも表示されます新規プロジェクトのコードのほとんどはContentViewにあります ContentViewはいくつかの新しいプラットフォーム固有の機能を使用しています詳しく見てみましょう ContentViewはボリュームによって提供されるSwiftUIビューの名称ですシンプルなエフェクトを提供する “enlarge”という単一のSwiftUI State プロパティを定義しています SwiftUIビューとしてコンテンツは bodyプロパティによって提供されます bodyはVStackに入れ子になっている 2つのビューで構成されます VStackはネストされたビューを垂直にスタックします最初のネストされたビューは RealityViewです RealityViewは新たに登場しましたこれについては後ほど説明します 2つ目のネストされたビューは別のVStackに埋め込まれた標準的なSwiftUIトグルビューですトグルビューは拡大プロパティの値を切り替えます VStackはボタンが見やすく操作しやすいように glassBackgroundEffectを提供しています SwiftUIを使ったことがあるならおそらくすでにToggleビューをご存知でしょう他のプラットフォームですでにサポートされている SwiftUIコントロールのほとんどは期待通りに動作します後ほど拡大プロパティを切り替えるジェスチャーの使用方法を見てみますしかしその前に RealityViewを詳しく見てみましょう RealityViewでは Realityコンテンツを SwiftUIビュー階層に配置できます ContentViewで使用される RealityViewイニシャライザはパラメータとして makeクロージャと updateクロージャの2つを使用します makeクロージャは初期RealityKitコンテンツをビューに追加します RealityKitコンテンツパッケージの内容を読み込みます成功すれば content.addで読み込んだコンテンツをビューに追加しますまた初期コンテンツを手続き的に生成したり手続き型とロード型コンテンツを組み合わせて使用することもできます updateクロージャはオプションですが使用した場合 SwiftUIの状態が変化するたびに呼び出されます makeクロージャで追加された最初のエンティティを最初にcontent.entitesから取得しますそして SwiftUIの拡大プロパティの値に基づいてuniformScaleのファクターを選択しエンティティにこのスケールを適用します RealityViewのupdateクロージャはレンダリング更新ループではなくすべてのフレームで呼び出されるわけではありません代わりに updateクロージャは SwiftUIの状態が変化した時のみ呼び出されます最後に RealityViewに gestureを追加します RealityKitコンテンツをタップすると拡大プロパティの値が切り替わり先ほど取り上げたToggleビューをタップするのと同じ効果を生み出します RealityViewとジェスチャーについては “Build spatial experiences with RealityKit”をご覧ください ContentViewについて見ましたので次にSimulatorを紹介しますシミュレートされたシーンで実行されているアプリを操作してみましょうその後 Simulatorでアプリがどう見えるかを確認しましょう Simulatorは他のプラットフォームで使ったことのある方にはおなじみのウィンドウで表示されます最初に起動するとアプリケーションランチャーが表示されます Simulatorはデバイスを装着して見える風景を再現しますデフォルトではポインターで見ているものを操作しますマウスやトラックパッドのクリックはタップをクリックの長押しでピンチを再現します空間コンピューティングの大きな特徴は周囲を見たり移動できることです Simulatorはそれを実現するための操作を提供します Simulatorウィンドウの右下にはシミュレートされたデバイスを操作するボタンがありますマウスやトラックパッドを長押ししながら動かすと周囲を見渡したり… …平行移動したり… …回転したり… …前後に移動できますこれらのボタンを長押ししたまま操作することでコンテンツの操作を素早く切り替え見まわしたり移動できますまたこれらのボタンをクリックするとマウスボタンを押し続ける必要なく各操作モードに切り替えることができます例えばこのパンボタンをクリックしてビューをドラッグするとビューが移動します左端のボタンをクリックするとルック＆タップの操作に切り替わります Simulatorには様々な部屋や照明条件でアプリの動作を確認できるシミュレーションシーンが用意されていますツールバーの「Simulated Scenes」メニューで切り替えることができます
Simulatorの詳しい使用方法については developer.apple.comのドキュメントをご覧ください Simulatorに慣れたところで新しいアプリを動かしてみましょういつものように Xcodeから ProductメニューのRunをクリックしてアプリを起動しますアプリが起動すると RealityKitのコンテンツパッケージの中身を示すボリュームが表示されます RealityViewのコンテンツ拡大ボタンをタップするとコンテンツが拡大され再度タップすると元の大きさに戻ります球体をタップしても RealityViewのジェスチャーの効果により拡大されます
球体をタップするとボタンのハイライトが変化しますタップジェスチャーにより SwiftUIの状態が更新され RealityViewとToggleビューの両方が状態の変化に反応します Xcode Previewsではアプリのビューの見た目と動作に焦点を当てた記述が可能です SwiftUIプレビュープロバイダを含むソースファイルを編集している間 Xcodeはプレビューキャンバスを自動で開きます Simulatorと同様に Xcode Previewsはシミュレートされたデバイスのビューを表示しますプレビューウィンドウは Simulatorと同じ方法で操作できますコントロールを使って少しコンテンツに近づいてみますまた右下のコントロールを使ってシミュレートするシーンやカメラアングルを変更できます SwiftUIのコードに変更を加えプレビューの変化をリアルタイムで確認できますではトグルスイッチのテキストを “Change Size”に変更してみましょうテキストを変更するとプレビューも更新されましたまたボタンは Xcode Previewsで引き続き機能していますこれを利用して RealityViewクロージャの内容も反復作業が可能です Xcode Previewsにはアプリの境界を越えて広がるコンテンツを発見できるオブジェクトモードやカスタムカメラアングルなど高度な機能がたくさんあります Xcode Previewsの詳細についてはデベロッパ向けドキュメントをご覧ください RealityKitコンテンツパッケージの作業を支援する新しいツールを用意しました Reality Composer Proはアプリのための空間コンテンツを準備しプレビューするのに最適な場所ですアプリのContentViewは RealityViewを使用して RealityKitコンテンツパッケージからコンテンツをロードしますテンプレートによって作成されたコンテンツパッケージは Xcodeプロジェクトの Packagesグループに配置されていますこのプロジェクトでは RealityKitContentが選択されています RealityKitコンテンツパッケージは RealityKitコンテンツを含む Swiftパッケージですビルド時に処理されコンテンツをランタイム用に最適化します RealityContentのDisclosure Indicatorをクリックするとコンテンツパッケージの中身が表示されます立方体のPackageをクリックするとコンテンツパッケージ内の 1つのシーンのプレビューが表示されますコンテンツパッケージを編集するには右上のReality Composer Proで開くボタンをクリックしますすると Reality Composer Proが起動します Reality Composer Proが起動すると ContentViewによって読み込まれた 3Dコンテンツが表示されます Xcodeがソースファイルやアプリのリソースの編集を主な目的としているのに対し Reality Composer Proは 3Dコンテンツが中心になっていますメインビューは3Dビューポートで Simulatorと同様のコントロールを使ってナビゲートできます Reality Composer Proはコンテンツをシーンごとに整理しますプロジェクトテンプレートに含まれるコンテンツパッケージは 1つのシーンから始まりますプロジェクトを強化するために Immersive Space用のコンテンツを含むシーンを作成しましょう Reality Composer ProのFileメニューから New＆Sceneを選択し名前を付けますここではImmersiveSceneにしますそしてSaveをクリックしますシーンを作成すると自動的に開きウィンドウ下部のプロジェクトブラウザに空のシーンのサムネイルが表示されますシーンの切り替えはウィンドウ上部のシーンの名前をクリックするかプロジェクトブラウザでシーンをダブルクリックして行いますこれで新しいシーンにイマーシブなコンテンツを追加する準備が出来ました Xcodeプロジェクトを構成した際に SwiftUIのImmersiveSpaceを使って周囲の好きな場所にコンテンツを表示できるとすでに説明しましたがこのシーンタイプにはさらに2つの重要なポイントがありますまずウィンドウやボリュームシーンタイプと異なり ImmersiveSpaceではコンテンツの基準点として足の位置を使用しますこの座標システムでは正のX軸はあなたの右側正のY軸はあなたの上負のZ軸はあなたの正面を示しています次にアプリがフルスペースで動作する場合手の正確な位置や向きなど追加のデータへのアクセスを要求することが可能ですデータの中にはプライバシーへの配慮が必要となものもありますアプリがプライバシーへの配慮が必要なデータを要求する場合アプリを使用するユーザーはこの要求を承認するよう促されます共有スペースにあるアプリでは使用できません Immersive Spaceを使用するアプリで利用できる追加データやプライバシーへの配慮については “Meet ARKit for spatial computing”のセッションをご覧ください没入感あるエクスペリエンスを作成する方法が分かったところで ImmersiveSpaceでうまく動作するコンテンツを作ってみましょう USDZクラウドモデルがあるのでそれを使ってイマーシブエクスペリエンス向けコンテンツを作ってみます USDZモデルをReality Composer Pro シーンに追加するには Fileメニューを開き Importをクリックしますそしてファイルを選択しますプロジェクトブラウザに USDZモデルが表示されていますビューポートにドラッグしてシーンに追加しますまた Finderウィンドウから USDZファイルをビューポートにドラッグアンドドロップするだけでインポートとシーンへの追加を同時に行えますでは雲を没入感あるシーンに配置してみましょうオブジェクトを選択し表示されるハンドルを使って移動させることができます右側のInspectorパネルで値を手動で設定することもできますこのシーンタイプでは足の位置が基準となるためすぐ目に入る場所に雲が現れるように配置する必要があります今回は正面から見て少し右側目の高さよりやや上に配置しますこの雲を少し右に出現させます正のX軸が右側になるので Xを50に設定しますこの変更を行うと雲がビューポイントの外に移動しました再び焦点を合わせるには左側のシーン階層で雲をダブルクリックします雲が見えるようになったので Y座標を考えてみましょう雲を上に表示したいので高さ200センチに配置します床からおよそ6.5フィートの高さです雲がまた外に行きました再び視界内に戻します真上を見ないですむように雲をやや奥に配置します遠ざける方向は負のZ軸ですので Z座標を-200センチに設定します再びシーン階層でダブルクリックし中央に表示させますシーン内の雲は小さいので大きくする方法を見てみましょう大きくするには円を外側にドラッグしますインポートした時の 5倍ぐらいの大きさにします最後に 2つ目の雲を今度は左に追加します EditメニューからDuplicateコマンドを使い最初の雲のコピーを作成しますコピーを左に配置するために X座標を-50に設定します
すべてのコンテンツを視界に入れるため階層内のRootをダブルクリックしますこれで没入感あるコンテンツのシーンが出来ました Xcodeに戻る前に File＆Save Allで変更内容を保存します Reality Composer Proは空間コンテンツを準備しプレビューしアプリに統合できる強力なツールですより詳しい内容については “Meet Reality Composer Pro”のセッションをご覧ください “Work with Reality Composer Pro content in Xcode”では 1つ目のセッションをベースに RealityKitコンテンツパッケージのコンテンツをアプリと緊密に統合する方法を紹介しています次に作成したイマーシブなコンテンツをアプリに導入しましょうアプリで表示するシーンはプロジェクト名が先頭についたファイル App.swiftに入っています詳しく見てみましょうなぜ作成したアプリが ContentViewで表示できるのでしょうかこのアプリはボリュームのコンテンツとして単一のWindowGroupを使って ContentViewで表示しています WindowGroupは1つまたは複数のウィンドウまたはボリュームを作成し任意のビューを表示します bodyプロパティの最初のシーンはアプリが起動したときに表示され最初のシーンの後に追加することでアプリにシーンを追加できます Reality Composer Proで作成したコンテンツをアプリで表示して没入感のある空間を表現しますこの空間にImmersiveViewという新しいビューをアプリに追加し表示します空間にIDを割り当てます文字列“ImmersiveSpace”をIDにします後ほど空間を開く時に使用しますこのコードをApp.swift ソースファイルに追加し Reality Composer Proで作成した新しいシーンを読み込むためのコードをImmersiveViewに追加します Xcodeの SwiftUI Viewテンプレートを使ってすでにImmersiveView.swiftをプロジェクトに追加してありますプロジェクトのApp.swiftに ImmersiveSpaceを追加しますそして ImmersiveView.swiftの先頭で RealityKitContentをインポートして RealityKitコンテンツパッケージを使えるようにしますまた RealityViewを使うために RealityKitをインポートします ImmersiveViewのデフォルトのコンテンツはただのテキストボックスですこれをコンテンツパッケージに追加した新しいシーンからコンテンツをロードする RealityViewに置き換えます左側のプロジェクト階層で ContentViewをダブルクリックし RealityViewのコードを最初のクロージャと一緒に選択してコピーしますファイルタブを使って ImmersiveViewに戻りテキストビューを選択しペーストして RealityViewのコードと置き換えます RealityViewの updateクロージャをコピーしていませんがこれはSwiftUIの状態の変化に応じてビューの内容を更新する必要が無いからです最後に作成した Immersive Sceneのコンテンツを読み込むためシーンの名前を“Scene”から “ImmersiveScene”に変更します
プレビューがImmersiveSceneのシーンを読み込みましたがプレビューキャンバスに表示されません ImmersiveViewを作成した時は Xcode Previewが自動的に作成されました詳しく見てみましょう ImmersiveView.swiftの下部を見ると Xcodeにプレビューを表示するようコードが書かれています #Previewで始まるコードのブロックですデフォルトではプレビューはデフォルトのシーン境界でクリップされます境界の外にコンテンツをロードするビューを表示する場合コンテンツは表示されません境界の外にある没入型コンテンツのプレビューを有効にするには準備中のビューを .previewLayout(.sizeThatFits)に変更しますやってみましょう ImmersiveViewのプレビューに .previewLayout(.sizeThatFits)を追加するとプレビューが更新されコンテンツが表示されます
最後にアプリがImmersive Spaceを開くようにしましょう iOSでマルチシーン SwiftUIアプリを扱ったことがあれば追加シーンをSwiftUIのコードから開く方法はすでにご存知かもしれませんまずはビューのSwiftUI環境からクロージャをキャプチャしボタンを押すなどのイベントに応答して呼び出すようにします Immersive Spaceの表示は新しいプラットフォームの SwiftUIでも同じように動作しますがキャプチャするクロージャは “openImmersiveSpace”と呼ばれ非同期であるため Immersive Spaceを表示したことをコードで検知します ContentViewに戻り SwiftUI環境から openImmersiveSpace クロージャをキャプチャしそれを呼び出すボタンを追加します
これでイマーシブなコンテンツを表示するための変更が完了しました Simulatorでコンテンツを体験できますがデバイスを使うとより没入感を感じられます試してみましょう新しいボタンが表示されこれを押すと ImmersiveSpaceのコンテンツとして雲が表示されます前方に2つの雲が見えます左と右に1つずつあります Immersive Spaceは最初のシーンから独立しています最初のシーンを移動しても ImmersiveSpaceのコンテンツは同じ場所に固定されていますアプリの初期ボリュームは自由に動かせるのに対し ImmersiveSpaceは開いた時点で決まった場所に配置されます Immersive Spaceを動かすのではなく Immersive Spaceの中を移動することになります Immersive Spaceを使って頭上に雲を表示するシンプルなアプリができましたアプリを雲とのインタラクションに反応させるにはどうすれば良いでしょうか？簡単に言えば雲をタップすると雲が上空を漂うイメージですこれを実現してみましょう SwiftUIビューを入力に反応させるためジェスチャーを追加しますこの例ではシンプルなテキストビューを用意しますこのビューにTapGestureを追加してビューをタップした時に反応するようにしますジェスチャーをビューに追加するとジェスチャーを認識した時に呼び出されるクロージャが追加されます RealityViewはSwiftUIビューなので同じようにジェスチャーに反応しますしかし RealityViewは複数のエンティティをもつ RealityKitコンテンツを含むことができます例えば私たちのアプリは雲のモデルを含む RealityViewコンテンツを ImmersiveSpaceに表示します雲をタップすると SwiftUIは RealityView上でTapGestureを呼び出しますしかしどの雲がタップされたかを知るにはどうすれば良いでしょうか？ここでentity targetingが登場します targetedToAnyEntity修飾子はどのエンティティに対して RealityViewに追加されたジェスチャーが行われたかを判別しますエンティティをターゲットにする方法は他にもあります特定のエンティティを対象にしたりクエリに一致するすべてのエンティティを対象にもできます詳しくは developer.apple.comのドキュメントをご覧ください onEndedなどのジェスチャーのハンドラに渡される値には RealityViewの中でエンティティとの接触を示す entityプロパティが存在しますなお RealityKitのエンティティでターゲティングが機能するためにはそのエンティティに CollisionComponentと InputTargetComponentの両方が必要です RealityKitエンティティにこれらのコンポーネントを要求することで RealityView内のコンテンツの選択された部分のみにインタラクションを制限することができますこれらのコンポーネントは Reality Composer Proでエンティティに追加することもできますしアプリのプログラムで追加することも可能です entity targetingについての解説は以上ですでは雲へのタップを検出してみましょうこのやり取りが発生すると RealityKitのアニメーションが始まりますまず Reality Composer Proで必要なコンポーネントを追加しましょう RealityKitコンテンツパッケージでは Command-clickでビュー階層から両方の雲を一度に選択できますそして Inspectorパネルの下にある “Add Component”をクリックし Collisionを選択します
Inspectorパネルで雲にCollisionComponentが追加されているのが分かります Reality Composer Proは適切なコリジョンシェイプを自動的に選択してモデルの CollisionComponentを作成しますコリジョンシェイプは必要に応じて変更できます InputTargetComponentについても同様に行います再びAdd Componentボタンをクリックし今度はInput Targetを選択します
File＆Save Allで変更を保存します実際に雲を空で動かすには雲をタップした時に呼び出されるジェスチャーハンドラで RealityKitのアニメーションを使いますまず雲の変化の現在の値を可変値として取得して translationにオフセットを追加し奥と右に100センチずつ移動させますそして雲のエンティティに.moveを呼び出し RealityKitのアニメーションを適用します Xcodeに戻りアプリを完成させます ImmersiveViewは RealityViewにイマーシブなコンテンツを表示させるためのソースファイルです RealityViewにTapGestureを追加して entity targetingを使用するコードを追加しますそしてタップを検出したらアニメーションを実行しますではSimulatorで動かしてみましょうボタンをタップすると先ほどと同様に ImmersiveSpaceが開きます雲をタップすると今度は雲が空中で移動します Entity targetingによって SwiftUIのインタラクションが RealityKitのコンテンツにつながりました今回の例ではタップに反応する雲の簡単なアニメーションを実行しましたより複雑なアプリでは entity targetingを使用して追加ビューの表示オーディオの再生アニメーションの開始などより高度なアクションをトリガーすることが可能です今日は多くのトピックに触れたのでまとめます Xcodeの新しいアシスタントを使用して初めてのイマーシブなアプリを作りました次に新しいプラットフォーム用の Simulatorを紹介し Xcode Previewsでアプリのコンテンツを簡単に再現できることを説明しました Reality Composer Proを紹介し RealityKitのコンテンツの準備とプレビューが簡単に行えることを説明しました最後に ImmersiveSpaceを開き entity targetingを使用してイマーシブなコンテンツとのインタラクションをプログラムで可能にしましたお楽しみいただけたでしょうか新しいSwiftUIやRealityKitのAPI Reality Composer Proのより高度な使用例などその他の数多くのセッションもぜひご覧くださいありがとうございました ♪

VStack {
        Toggle("Enlarge RealityView Content", isOn: $enlarge)
            .toggleStyle(.button)
    }
    .padding()
    .glassBackgroundEffect()

7:28 - RealityView

RealityView { content in
    // Add the initial RealityKit content
    if let scene = try? await Entity(named: "Scene", in: realityKitContentBundle) {
        content.add(scene)
    }
} update: { content in
    // Update the RealityKit content when SwiftUI state changes
    if let scene = content.entities.first {
        let uniformScale: Float = enlarge ? 1.4 : 1.0
        scene.transform.scale = [uniformScale, uniformScale, uniformScale]
    }
}
.gesture(TapGesture().targetedToAnyEntity().onEnded { _ in
    enlarge.toggle()
})

20:31 - ImmersiveView

// MyFirstImmersiveApp.swift

@main
struct MyFirstImmersiveApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }.windowStyle(.volumetric)

        ImmersiveSpace(id: "ImmersiveSpace") {
            ImmersiveView()
        }
    }
}

22:58 - Size that fits

#Preview {
    ImmersiveView()
        .previewLayout(.sizeThatFits)
}

23:48 - openImmersiveSpace

struct ContentView: View {

    @Environment(\.openImmersiveSpace) var openImmersiveSpace

    var body: some View {
        Button("Open") {
            Task {
                await openImmersiveSpace(id: "ImmersiveSpace")
            }
        }
    }
}

25:48 - Entity targeting

import SwiftUI
import RealityKit

struct ContentView: View {
    var body: some View {
        RealityView { content in
            // For entity targeting to work, entities must have a CollisionComponent
            // and an InputTargetComponent!
        }
        .gesture(TapGesture().targetedToAnyEntity().onEnded { value in
            print("Tapped entity \(value.entity)!")
        })
    }
}

28:56 - Move animation

.gesture(TapGesture().targetedToAnyEntity().onEnded { value in
    var transform = value.entity.transform
    transform.translation += SIMD3(0.1, 0, -0.1)
    value.entity.move(
        to: transform,
        relativeTo: nil,
        duration: 3,
        timingFunction: .easeInOut
    )
})

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

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

関連する章

リソース

関連ビデオ

WWDC23