イマーシブなアプリを作成するためのMetalレンダリングの新機能

イマーシブなアプリを作成するためのMetalレンダリングの新機能

Compositor Servicesによりアプリのイマーシブ体験を向上させるための、Metalのレンダリングにおける最新の機能強化について確認します。アプリのインタラクティブな要素を強調表示するためにホバーエフェクトを追加する方法や、動的なレンダリング品質を使用してより高画質なレンダリングを行う方法を紹介するほか、新しい段階的イマーシブスタイルについて説明します。また、MetalコンテンツをMacからVison Proに直接レンダリングすることで、macOSアプリでイマーシブ体験を実現する方法を解説します。このセッションの内容を十分理解できるよう、まずWWDC23の「Discover Metal for immersive apps」を視聴することをおすすめします。

関連する章
- 0:00 - イントロダクション
- 1:58 - レンダリングループのための新しいAPI
- 4:21 - ホバーエフェクト
- 10:50 - 動的レンダリングの品質
- 14:44 - 段階的なイマーシブスタイル
- 18:32 - macOSの空間レンダリング
- 23:51 - 次のステップ
リソース
関連ビデオ

WWDC25
WWDC24
- visionOSでのパススルーによるMetalのレンダリング
WWDC23
- イマーシブアプリのためのMetal
こんにちは Ricardoです Appleのソフトウェアエンジニアですこのセッションでは Apple Vision Proで Metalを使用してイマーシブコンテンツを描画するための新機能をご紹介します昨年説明したのは Metal Compositor Services、ARKitを活用し visionOSでコンテンツを直接描画してイマーシブ体験を生み出す方法でした
この方法ではフルイマーシブ体験も実装できますがその例が Resolution Gamesの「Demeo」などですまたはmixedイマーシブスタイルを使い実世界と重ねてコンテンツを表示することもできます
そして皆さんのようなデベロッパからの有益なフィードバックを反映して visionOSのMetalレンダリングに注目すべき新機能を追加しました
アプリやゲームに豊かなディテールとインタラクティブなエフェクトを追加できる機能ですこのビデオではこの新機能 Compositor Servicesの詳細を説明します
この機能を最大限に活用するために必要となるのが Compositor Servicesフレームワークと Metalレンダリング手法の知識ですこれらの技術を使用したことがない場合は画面下部に示している過去のビデオで基礎を学ぶことができます
この新機能を導入するにはまず既存のレンダリングループに変更を加える必要があります最初にパイプラインを柔軟にする新しいAPIを導入する方法を説明しますそれを受けてホバーエフェクトを追加しアプリのインタラクティブな要素をハイライトする方法を紹介しますレンダリングされたコンテンツの解像度を動的に調整する方法も説明します新しい段階的なイマーシブスタイルでは Digital Crownを使用してイマーシブのレベルを調整できます Macを使用してイマーシブコンテンツを Vision Proに直接描画する方法も紹介しますすべての開始点となるのが新しいレンダリングループAPIですその説明から始めましょう
Metalイマーシブアプリの構築はコンポジタレイヤーを持つイマーシブ空間を SwiftUIで作成することから始まります
このレイヤーはレンダリングループで使うレイヤーレンダラオブジェクトを提供しますレイヤーレンダラからフレームをクエリし各フレームから描画可能オブジェクトを取得しますがこれにはコンテンツのレンダリングに使うテクスチャが含まれます Metalイマーシブアプリをすでに作成している場合はレンダリングされたフレームごとに1つずつ描画可能オブジェクトをクエリしています今年 Compositor Servicesには描画可能オブジェクトの配列を返す新しいqueryDrawables関数が追加されましたシステムコンテキストに応じて配列には1つか 2つの描画可能オブジェクトが含まれますほとんどの場合描画可能オブジェクトは1つですが Reality Composer Proで高品質のビデオを録画する場合は描画可能オブジェクトは2つ返されます描画可能オブジェクトの識別には新しいtargetプロパティを使用できます Vision Proディスプレイ用のものは .builtIn値を持ち録画用のものは .capture値を持ちます高品質ビデオのキャプチャ方法についてはデベロッパ向けドキュメントをご覧ください
このrenderFrame関数は皆さんにはおなじみかもしれません次のフレームをクエリしシーンの状態を更新した後 queryDrawable関数を呼び出します最適な入力時間を待機してシーンを描画可能オブジェクトにレンダリングします
今度はqueryDrawableを queryDrawablesに置き換えます配列が空でないことを確認しシーンをすべての描画可能オブジェクトに描画します
Metalイマーシブアプリの作成方法を示す便利なテンプレートがXcodeにはありますこれは優れた出発点です確認するには visionOSアプリ用の新しいXcodeプロジェクトを開始しでを選択します
なお Metal 3は今年も従来と同様にフルサポートされており Xcodeテンプレートでオプションを選択することで使用できます
最新バージョンのMetalの導入方法については「Discover Metal 4」をご覧ください新しいqueryDrawables関数を導入すると今年の新機能すべてが使用可能になりますシーンのインタラクティブオブジェクトへのホバーエフェクトの追加などです
この機能を使うとアプリユーザーはどのオブジェクトがインタラクティブか簡単にわかりアクションの対象を予測できますユーザーが見ているオブジェクトをシステムが動的にハイライトします例えばパズルゲームでプレーヤーが選択可能なピースを強調表示できます
複数の3Dオブジェクトを含むシーンをレンダリングするアプリで一部のオブジェクトしか操作できないというケースでシーンのインタラクティブオブジェクトのみホバーエフェクトを適用したいとしますオブジェクトがインタラクティブでない場合トラッキングされずホバーエフェクトも適用されません通常通りレンダリングしますこれに対しオブジェクトがインタラクティブな場合トラッキング対象の新しい領域を描画可能オブジェクトに追加します登録した各トラッキング領域に一意のオブジェクト識別子を割り当てる必要があります
次にオブジェクトにホバーエフェクトを適用すべきか確認します不要な場合はトラッキング領域のレンダリング値で描画しますこれはオブジェクトのピンチを検出するのに便利ですホバーエフェクトをオブジェクトに適用すべき場合はレンダリング前にトラッキング領域でエフェクトを設定します
コードではホバーエフェクトを使うようにレイヤーレンダラを設定する必要があります 8ビットピクセル形式を使うようにトラッキング領域のテクスチャを設定しますインタラクティブオブジェクトを同時に最大255個サポートしますフォーマットがレイヤー機能のサポートの対象であることを確認し構成で設定します
トラッキング領域の登録コードでオブジェクトがインタラクティブか確認しインタラクティブであればオブジェクト識別子を使用して描画可能オブジェクトに新しいトラッキング領域を登録します必ずオブジェクトのライフサイクルを通じ一意の識別子をトラッキングしてください次にオブジェクトにホバーエフェクトを適用するか確認し適用している場合は .automatic属性を使用して追加しますこれによりユーザーがオブジェクトを見ると自動的にホバーエフェクトが追加されます最後にレンダリングします
Compositor Servicesではコンテンツのレンダリングのための複数のテクスチャを描画可能オブジェクトが提供します
ユーザーに表示される色を示す色テクスチャは皆さんおなじみでしょう深度テクスチャもあり暗い色はユーザーから遠いオブジェクトを示しますシステムはこのテクスチャを使いユーザーのシーン内での移動に合わせてコンテンツをより正確に表示します今年はシーン内の様々なインタラクティブ領域を定義するトラッキング領域テクスチャも追加されました描画可能オブジェクトは色と深度のテクスチャを提供しますこれで新しいトラッキング領域のテクスチャもクエリできますインタラクティブオブジェクトに対応する個別の領域をそのテクスチャで描画しますホバーエフェクトではユーザーがシーンのインタラクティブオブジェクトを見た時にシステムはトラッキング領域テクスチャを使用して対応する領域を見つけ色テクスチャの一致する部分にホバーエフェクトを適用しますここでも設定したトラッキング領域を使うオブジェクトレンダリング関数がありますトラッキング領域テクスチャのレンダリングにはシステムが計算するレンダリング値が必要なのでその値を格納するローカル変数を宣言し対応するトラッキング領域からその変数を取得しますオブジェクトがインタラクティブでない場合既定のレンダリング値nilを使用できます最後にそれをdraw関数に渡してフラグメントシェーダに送信します
シェーダのコードを見てみましょう
フラグメントシェーダの出力にはトラッキング領域のレンダリング値がありインデックス1の色アタッチメントにマップされていますそこにトラッキング領域テクスチャを設定しましたレンダリング値を uniforms構造体にバインドしシェーダ出力で色の値とともに返しますこれでインタラクティブなホバーエフェクトがアプリに追加されましたマルチサンプルのアンチエイリアシング（MSAA）を使う場合は注意点があります
この手法では中間の高解像度テクスチャをレンダリングしてからサンプリング期間の全体で色の値を平均化しますこれを行うには通常ターゲットテクスチャ格納アクションで multisampleResolveオプションを使います色ピクセルを解決するのと同じ方法でトラッキング領域テクスチャを解決することはできませんその方法ではレンダリング値が平均化されてどのトラッキング領域にも対応しない無効なスカラ値が生成されます multisampleResolveを色に使用する場合トラッキング領域テクスチャ用にカスタムのタイルリゾルバを実装する必要がありますこれを行うにはカスタムのタイルレンダリングパイプラインで dontCare格納オプションを使いますおすすめの方法は MSAAソーステクスチャのサンプリング期間において最も頻繁に表れるレンダリング値を選択することです MSAAでの使用方法などホバーエフェクトの詳細についてはデベロッパ向けドキュメントの「Rendering hover effects in Metal immersive apps」をご覧ください
トラッキング領域を使用するとオブジェクトのインタラクションの処理も以前よりも簡単になります空間イベントでは nullを許容するトラッキング領域識別子を使用できますこの識別子はシーンオブジェクトと領域の一致の確認に使用できます対象のオブジェクトが見つかったらそれに対しアクションを実行できます
ホバーエフェクトを使うことでアプリがよりインタラクティブになりました操作可能なオブジェクトやピンチするとアクティブになるオブジェクトをアプリユーザーは明確に把握できますこれで入力イベントの処理もこれまで以上に簡単になります今年の進化により以前よりも高い忠実度でコンテンツを描画できるようになりました動的レンダリングの品質を使用するとシーンの複雑さに応じてコンテンツの解像度を調整できます
まず中心窩レンダリングの仕組みを簡単に説明します標準の非中心窩のテクスチャではピクセルは表面全体に均等に分散されます中心窩レンダリングでは中心のピクセル密度が高いテクスチャを描画できるようにシステムが支援しますこれによりアプリで計算リソースと電力リソースを使用してユーザーが見る可能性が高い場所でコンテンツの見栄えを良くすることができます今年の改善により中心窩レンダリングで動的な品質を活用できるようになりましたアプリによってレンダリングされるフレームの品質を制御できますまずアプリに適した最大のレンダリング品質を指定する必要がありますこれはアプリのレンダリングセッションの上限の設定です次に実行時の品質の許容範囲を表示するコンテンツの種類に応じて設定できます
レンダリング品質を上げるとテクスチャの関連性の高い領域が拡大しテクスチャ全体のサイズが大きくなります念のためですが品質を上げるとアプリでのメモリと電力の使用量も増加しますテキストやユーザーインターフェイス要素をレンダリングする場合はレンダリング品質を高く設定すると有効ですただし複雑な3Dシーンを表示する場合は計算リソースの制約を受けることがありますアプリをスムーズに動作させるには高品質なビジュアルとアプリの消費電力をバランスよく考慮する必要があります
Instrumentsを使うとアプリのパフォーマンスをリアルタイムで分析できますまた Metalデバッガを使用すれば Metalコードとシェーダを詳しく調査して最適化できます重要なのは最も複雑なシーンはどこかアプリをプロファイリングしてフレームを安定したペースで描画するために十分な時間を確保することです
デベロッパ向けドキュメントで Metalレンダリングアプリの最適化についてご確認いただけます
このコードサンプルではアプリをプロファイリングしアプリのメニューを 0.8の品質でレンダリングすることを判断しましたこれならテキストがより鮮明に見えます世界は複雑なシーンなので 0.6の品質でレンダリングします ‭また計算プロパティを追加して使用する最大レンダリング品質を指定していますこれが今回のレイヤー設定です動的レンダリングの品質は中心窩でしか使用できないので有効になっているか確認します次に最大レンダリング品質を計算プロパティの値に設定しますコンテンツに適した最小値に設定するよう注意してくださいそうしないとアプリは必要以上のメモリを消費します
新しいシーンをロードする時に adjustRenderQuality関数を呼び出しますレンダリング品質の調整は中心窩が有効な場合のみ可能ですシーンタイプを切り替えてそれに応じてレンダリング品質を調整します
品質の値の遷移は瞬時には完了せず少し時間がかかりますシステムによって遷移がスムーズになります
動的レンダリングの品質により非常に詳細なシーンの魅力が高まりますレンダリングされるシーンの解像度を高くすると細かいディテールがよりクリアに表示されますただし非常に複雑なシーンでは品質を下げる必要があるかもしれませんこれでアプリのコンテンツのレンダリング品質を調整できるようになりました
今年の新機能として段階的なイマーシブのポータル内で Metalアプリをレンダリングできるようになりました段階的なイマーシブスタイルではアプリのユーザーは Digital Crownを回すことでイマーシブのレベルを制御できますこのモードではユーザーは動きのある複雑なシーンを観る時も実世界の環境を感じられるので安心感を得ることができます段階的なイマーシブモードで Metalアプリを表示している場合現在のイマーシブレベルに含まれるコンテンツのみがレンダリングされます
これはフルイマーシブでレンダリングされたゲームシーンの例ですそしてこれはユーザーがDigital Crownを調整して部分的なイマーシブでレンダリングされた同じシーンです 2つのシーンを比較してわかるのはポータル外の領域をレンダリングしないため計算能力を節約できるということですポータル外の部分は見えないのでレンダリングする必要はありません新しいAPIではシステムが計算するポータルステンシルを使ってコンテンツをマスクできますこの白い楕円は対応するポータルステンシルを示していますステンシルのバッファはレンダリングされたシーンのマスクとして機能しますこれによりポータル内のコンテンツのみがレンダリングされますご覧の通りレンダリングされているシーンはエッジが滑らかではありませんコマンドバッファの最終ステップとしてフェードがシステムによって適用されユーザーに表示されるシーンが作成されます
ステンシルを使って不要なコンテンツがレンダリングされないようにするにはまずコンポジタレイヤーを設定しますレイヤー機能が適用するステンシルのフォーマットをサポートしていることを確認し構成で設定しますポータルステンシルマスクを適用するにはコマンドバッファで描画可能オブジェクトにレンダリングコンテキストを追加しますステンシルにマスクを描画すると表示されないピクセルがレンダリングされなくなりますまたレンダリングコンテキストを介してエンコードを終了する必要がありますコマンドエンコーダを直接終了するのではありませんこれによりポータルエフェクトがコンテンツに効率的に適用されますこのアプリでは SwiftUIでイマーシブ空間を作成し段階的なイマーシブスタイルを新しいオプションとしてリストに追加しますアプリユーザーは段階的とフルのスタイルを切り替えられます次にレイヤーを設定しますまず注意点として段階的なイマーシブスタイルはレイヤーレイアウトでしか機能しません目的のステンシル形式をピクセルあたり8ビットに指定しますこのフォーマットがサポートされていることを確認し構成で設定しますまた MSAAは使用していないのでサンプル数を1に設定します MSAAを使用する場合は MSAAのサンプル数に設定します
レンダラで描画可能オブジェクトにレンダリングコンテキストを追加しますレンダリングコマンドに使用するのと同じコマンドバッファを渡します次にポータルマスクをステンシルアタッチメントに描画します他のステンシル操作では使用しないステンシル値を選択しましたステンシルの参照値をレンダリングエンコーダで設定しますレンダラは現在のイマーシブレベルの外の領域を描画しなくなりますシーンをレンダリングした後描画可能オブジェクトのレンダリングコンテキストでエンコードを終了します
段階的なイマーシブスタイルを使ったレンダラの実際の例を確認するには visionOSのMetalアプリテンプレートでオプションを選択しますこれでポータルスタイルの Metalアプリの構築を開始できます
最後に取り上げるのは macOSの空間レンダリングです
ここまでは Vision Proでのネイティブなイマーシブ体験の構築について見てきました今年 Macのパワーを活用してイマーシブコンテンツをVision Proに直接レンダリングしストリーミングできるようになりましたこれにより既存のMacアプリにイマーシブ体験を追加できます
例えば 3Dモデリングアプリからシーンを直接 Vision ProでプレビューできますまたイマーシブなmacOSアプリをゼロから構築することもできますこれにより Vision Proの電力消費に制約されることなく高い計算能力を必要とする複雑なイマーシブ体験を実現できますリモートイマーシブセッションを Macアプリから開始するのはとても簡単です macOSでイマーシブ空間を開くと Vision Proで接続を受け入れるように求められます
受け入れると Macでレンダリングされたイマーシブコンテンツが表示されます
一般的なMacアプリは SwiftUIまたはAppKitで構築されますこれらのフレームワークのいずれかを使いウインドウを作成して表示しますウインドウのコンテンツは Core Animationでレンダリングされます様々なmacOSフレームワークを採用してアプリの機能を実装できますそしてコンテンツは Macのディスプレイに表示されます Macを活用したイマーシブ体験を構築する際はイマーシブなvisionOSアプリを作成できる使い慣れたフレームワークを使用しますまずSwiftUIと新しいシーンタイプの RemoteImmersiveSpaceを使用します次に Compositor Services フレームワークを導入します ARKitとMetalを使用してコンテンツを配置しレンダリングしますするとイマーシブシーンが Vision Proに直接表示されます macOSのRemoteImmersiveSpaceはネイティブのvisionOSアプリと同様にコンポジタレイヤーと ARKitセッションをホストしますこれらは Vision Proのディスプレイやセンサーにシームレスに接続されます ARKitセッションを visionOSに接続するための remoteDeviceIdentifierという新しいSwiftUI環境オブジェクトがありますこのオブジェクトをセッションイニシャライザに渡しますこれが Macイマーシブアプリの構造です
コンポジタコンテンツを含む新しいリモートイマーシブ空間を定義しますこの空間でコンポジタレイヤーがどのように使われるかは後ほど説明します Macでサポートされるイマーシブスタイルは段階的とフルのみです Macアプリのインターフェイスで supportsRemoteScenesという新しい環境変数を使用して Macにこの機能があるか確認しますリモートシーンがサポートされていない場合メッセージを表示するようUIを設定できますサポートされていてまだイマーシブ空間を開いていない場合は起動できますこのアプリの最後の部分はコンポジタコンテンツですコンポジタレイヤーと ARKitセッションがあります visionOSの場合と同じ方法でコンポジタレイヤーを作成して使用します新しいSwiftUI環境オブジェクトの remoteDeviceIdentifierにアクセスし ARKitセッションのイニシャライザに渡しますこれで MacのARKitセッションが Vision Proに接続されます最後に一般的なMetalイマーシブアプリと同じようにレンダリングループを開始します
ARKitとワールドトラッキングプロバイダが macOSで利用可能になりましたこれにより空間内での Vision Proの位置をクエリできますネイティブイマーシブアプリの場合と同様にレンダリング前にデバイスのポーズを使ってシーンと描画可能オブジェクトを更新します macOSの空間アプリは Macに接続されたすべての入力デバイスをサポートしますキーボードとマウスのコントロールを使用できますまたゲームパッドを接続し Game Controllerフレームワークを使い入力を処理することもできますさらにレイヤーレンダラの onSpatialEventモディファイアを使用してイマーシブシーンのインタラクティブ要素でピンチイベントを使えます
また今年既存のAppKitやUIKitアプリからも SwiftUIシーンを作成可能になりましたこれは新しいイマーシブ体験を既存の Macアプリに追加するための優れた方法ですこの方法の詳細については「What's new in SwiftUI」をご覧ください
レンダリングエンジンは CまたはC++で実装されるのが一般的です説明したすべてのAPIには Cのネイティブな同等機能があります Compositor Servicesフレームワークの Cデータ型は接頭辞cpで始まりますこれらの型では Core Foundationなどよく利用されるCライブラリと同様のパターンと規則を使用します ARKitの場合 cDeviceプロパティは C互換の remoteDeviceIdentifierを提供しますこれをCフレームワークに渡し create_with_device関数で ARKitセッションを初期化できますこれらすべての要素により Macを使用して Vision Proで表示するイマーシブコンテンツを強化できます
これらの新機能を皆さんがどのように活用してイマーシブアプリを拡張するか楽しみですこれらの機能によりアプリはよりインタラクティブかつ忠実度が高くなり新しい段階的なイマーシブスタイルも利用できます新しいmacOSの空間機能で皆さんが実現するアプリに期待していますイマーシブアプリを次のレベルに引き上げる方法の詳細については「Set the scene with SwiftUI in visionOS」をご覧くださいその他のプラットフォームの機能強化の概要については「What's new in visionOS」をご覧くださいご視聴ありがとうございました

// Scene render loop

extension Renderer {
    func renderFrame(with scene: MyScene) {
        guard let frame = layerRenderer.queryNextFrame() else { return }

        frame.startUpdate()
        scene.performFrameIndependentUpdates()
        frame.endUpdate()

        let drawables = frame.queryDrawables()
        guard !drawables.isEmpty else { return }

        guard let timing = frame.predictTiming() else { return }
        LayerRenderer.Clock().wait(until: timing.optimalInputTime)
        frame.startSubmission()
        scene.render(to: drawable)
        frame.endSubmission()
    }
}

5:54 - Layer configuration

// Layer configuration

struct MyConfiguration: CompositorLayerConfiguration {
    func makeConfiguration(capabilities: LayerRenderer.Capabilities,
                           configuration: inout LayerRenderer.Configuration) {
        // Configure other aspects of LayerRenderer

        let trackingAreasFormat: MTLPixelFormat = .r8Uint
        if capabilities.supportedTrackingAreasFormats.contains(trackingAreasFormat) {
            configuration.trackingAreasFormat = trackingAreasFormat
        }
    }
}

7:54 - Object render function

// Object render function

extension MyObject {
    func render(drawable: Drawable, renderEncoder: MTLRenderCommandEncoder) {
        var renderValue: LayerRenderer.Drawable.TrackingArea.RenderValue? = nil
        if self.isInteractive {
            let trackingArea = drawable.addTrackingArea(identifier: self.identifier)
            if self.usesHoverEffect {
                trackingArea.addHoverEffect(.automatic)
            }
            renderValue = trackingArea.renderValue
        }
		self.draw(with: commandEncoder, trackingAreaRenderValue: renderValue)
    }
}

8:26 - Metal fragment shader

// Metal fragment shader

struct FragmentOut
{
    float4 color [[color(0)]];
    uint16_t trackingAreaRenderValue [[color(1)]];
};

fragment FragmentOut fragmentShader( /* ... */ )
{
    // ...

    return FragmentOut {
        float4(outColor, 1.0),
        uniforms.trackingAreaRenderValue
    };
}

10:09 - Event processing

// Event processing

extension Renderer {
    func processEvent(_ event: SpatialEventCollection.Event) {
       let object = scene.objects.first {
           $0.identifier == event.trackingAreaIdentifier
       }
       if let object {
           object.performAction()
       }
   }
}

13:08 - Quality constants

// Quality constants

extension MyScene {
    struct Constants {
        static let menuRenderQuality: LayerRenderer.RenderQuality = .init(0.8)
        static let worldRenderQuality: LayerRenderer.RenderQuality = .init(0.6)
        static var maxRenderQuality: LayerRenderer.RenderQuality { menuRenderQuality }
    }
}

13:32 - Layer configuration

// Layer configuration

struct MyConfiguration: CompositorLayerConfiguration {
    func makeConfiguration(capabilities: LayerRenderer.Capabilities,
                           configuration: inout LayerRenderer.Configuration) {
       // Configure other aspects of LayerRenderer

       if configuration.isFoveationEnabled {
           configuration.maxRenderQuality = MyScene.Constants.maxRenderQuality
       }
}

13:57 - Set runtime render quality

// Set runtime render quality

extension MyScene {
    var renderQuality: LayerRenderer.RenderQuality {
        switch type {
        case .world: Constants.worldRenderQuality
        case .menu: Constants.menuRenderQuality
        }
    }
}

extension Renderer {
    func adjustRenderQuality(for scene: MyScene) {
        guard layerRenderer.configuration.isFoveationEnabled else {
            return;
        }
        layerRenderer.renderQuality = scene.renderQuality
    }
}

16:58 - SwiftUI immersion style

// SwiftUI immersion style

@main
struct MyApp: App {
    @State var immersionStyle: ImmersionStyle

    var body: some Scene {
        ImmersiveSpace(id: "MyImmersiveSpace") {
            CompositorLayer(configuration: MyConfiguration()) { @MainActor layerRenderer in
                Renderer.startRenderLoop(layerRenderer)
            }
        }
        .immersionStyle(selection: $immersionStyle, in: .progressive, .full)
    }
}

17:12 - Layer configuration

// Layer configuration

struct MyConfiguration: CompositorLayerConfiguration {
    func makeConfiguration(capabilities: LayerRenderer.Capabilities,
                           configuration: inout LayerRenderer.Configuration) {
        // Configure other aspects of LayerRenderer
        
        if configuration.layout == .layered {
            let stencilFormat: MTLPixelFormat = .stencil8 
            if capabilities.drawableRenderContextSupportedStencilFormats.contains(
                stencilFormat
            ) {
                configuration.drawableRenderContextStencilFormat = stencilFormat 
            }
            configuration.drawableRenderContextRasterSampleCount = 1
        }
    }
}

17:40 - Render loop

// Render loop

struct Renderer {
    let portalStencilValue: UInt8 = 200 // Value not used in other stencil operations

    func renderFrame(with scene: MyScene,
                     drawable: LayerRenderer.Drawable,
                     commandBuffer: MTLCommandBuffer) {
        let drawableRenderContext = drawable.addRenderContext(commandBuffer: commandBuffer)
        let renderEncoder = configureRenderPass(commandBuffer: commandBuffer)
        drawableRenderContext.drawMaskOnStencilAttachment(commandEncoder: renderEncoder,
                                                          value: portalStencilValue)
        renderEncoder.setStencilReferenceValue(UInt32(portalStencilValue))
        
        scene.render(to: drawable, renderEncoder: renderEncoder)

        drawableRenderContext.endEncoding(commandEncoder: commandEncoder)
        drawable.encodePresent(commandBuffer: commandBuffer)
    }
}

20:55 - App structure

// App structure

@main
struct MyImmersiveMacApp: App {
    @State var immersionStyle: ImmersionStyle = .full

    var body: some Scene {
        WindowGroup {
            MyAppContent()
        }

        RemoteImmersiveSpace(id: "MyRemoteImmersiveSpace") {
            MyCompositorContent()
        }
        .immersionStyle(selection: $immersionStyle, in: .full, .progressive)
   }
}

21:14 - App UI

// App UI

struct MyAppContent: View {
    @Environment(\.supportsRemoteScenes) private var supportsRemoteScenes
    @Environment(\.openImmersiveSpace) private var openImmersiveSpace
    @State private var spaceState: OpenImmersiveSpaceAction.Result?

    var body: some View {
        if !supportsRemoteScenes {
            Text("Remote SwiftUI scenes are not supported on this Mac.")
        } else if spaceState != nil {
            MySpaceStateView($spaceState)
        } else {
            Button("Open remote immersive space") {
                Task {
                    spaceState = await openImmersiveSpace(id: "MyRemoteImmersiveSpace")
                }
            }
        }
    }
}

21:35 - Compositor content and ARKit session

// Compositor content and ARKit session

struct MyCompositorContent: CompositorContent {
    @Environment(\.remoteDeviceIdentifier) private var remoteDeviceIdentifier

    var body: some CompositorContent {
        CompositorLayer(configuration: MyConfiguration()) { @MainActor layerRenderer in
            guard let remoteDeviceIdentifier else { return }
            let arSession = ARKitSession(device: remoteDeviceIdentifier)
            Renderer.startRenderLoop(layerRenderer, arSession)
        }
    }
}

23:17 - C interoperability

// Swift
let remoteDevice: ar_device_t = remoteDeviceIdentifier.cDevice Renderer.start_rendering(layerRenderer, remoteDevice)

// C
void start_rendering(cp_layer_renderer_t layer_renderer, ar_device_t remoteDevice) {     ar_session_t session = ar_session_create_with_device(remoteDevice);     // ... }

関連する章

リソース

関連ビデオ

WWDC25

WWDC24

WWDC23