イマーシブアプリのためのMetal

イマーシブアプリのためのMetal

イマーシブアプリのためのMetalMetalを使って、visionOSでフルイマーシブ体験をレンダリングする方法について確認しましょう。プラットフォーム上でのレンダリングセッションの設定方法や、基本的なレンダーループの作成方法、そして空間インプットを組み込むことでインタラクティブな体験を生み出す方法について紹介します。

関連する章
- 0:06 - Intro
- 1:50 - App Architecture
- 5:58 - Render configuration
- 11:29 - Render Loop
- 13:00 - Render a frame
- 17:28 - User input
- 20:22 - Wrap-Up
リソース
関連ビデオ

WWDC23
WWDC21
- EDRによるHDRレンダリング
ダウンロード

♪心地よいヒップホップ音楽♪ ♪ こんにちは Pau Sastre Miguelです Appleのソフトウェアエンジニアです今日は xrOSでMetalを使ってどのようにイマーシブな体験を作成するのかについて話します今年は xrOSの発売によって Appleのエコシステムでお馴染みのテクノロジーを使ってイマーシブな体験が作れるようになりました RealityKitを使って自分のVRコンテンツを現実世界と一体化する体験が作成できますその一方でみなさんのアプリでユーザーにフルイマーシブ体験を提供する場合は xrOSで現実世界のコンテンツを VRコンテンツに完全に置き換えることも可能ですフルイマーシブ体験を作る時はレンダリングメソッドにいくつかの選択肢があります引き続き RealityKitも使えますしあるいは MetalとARKit APIを選ぶことも可能です RecRoomがそのようなアプリの良い例でフルイマーシブ体験を生み出すのに CompositorServicesでレンダリングセッションを作成し Metal APIでフレームをレンダリングし ARKitでワールドトラッキングとハンドトラッキングをしていますこれらのテクノロジーすべてにサポートが行われているのは Unityのエディタのおかげです自分自身のエンジンを書きたい場合 CompositorServices APIなら xrOSで Metalレンダリングへのアクセスが得られます ARKitと組み合わせればワールドトラッキングとハンドトラッキングを追加してフルイマーシブ体験が作れるようになります xrOSでの作業にはCompositorServicesがエンジン設定のキーとなりますまたレンダーループの設定の仕方と 1フレームのレンダリングの仕方を説明します最後に ARKitを使ってどのように体験をインタラクティブにできるかを説明しますでは xrOSアプリでのアーキテクチャから始めましょう既にMetal APIや Metalレンダリングテクニックを使ったことがある方には非常に有益なセッションです Metalを使ったことがなければ developer.apple.com/Metalでコードサンプルやドキュメントsを見てください MetalでxrOSにイマーシブな体験を作る時はアプリとレンダリングセッションを SwiftUIで作ることから始めますレンダリングセッションを作ったあとは CやC++などの馴染みのある言語に切り替えてエンジン内の部分を定義できますまずは SwiftUIアプリのプロトコルに準拠するタイプを作成しますこのプロトコルに準拠するためにアプリのシーンリストを定義します xrOSでは主に3つのシーンタイプがありますウインドウタイプはmacOSのような 2D プラットフォームと似た体験を提供しますボリュームタイプはその範囲内のコンテンツをレンダリングしほかのアプリと共有スペースで共存します ImmersiveSpaceはコンテンツをどこでもレンダリングできます Metalでフルイマーシブ体験を作成する時は必ずImmersiveSpaceタイプを選びます ImmersiveSpaceはxrOSで利用可能な SwiftUIの新しいシーンタイプですフルイマーシブ体験のコンテナとしての役割を果たします ImmersiveSpaceの使い方については「Go beyond the window with SwiftUI」をご確認ください ImmersiveSpaceシーンを作成する時は ImmersiveSpaceContentプロトコルに準拠するタイプを使ってアプリがコンテンツを提供します ImmersiveSpaceシーンのコンテンツを作成する時は多くの場合アプリは RealityKitを使います内部ではCoreAnimationや MaterialXが使われますですが代わりにパワフルなMetalを使ってアプリのコンテンツをレンダリングしたい場合にはほかのオプションがあります CompositorServices APIが MetalとARKitを使ってアプリにイマーシブなレンダリング機能を与えてくれます xrOSに導入された新しいCompositorServices APIで Metalのレンダリングインターフェイスは ImmersiveSpaceのコンテンツをレンダリングできるようになりました CompositorServicesでアプリはコンポジターサーバに直接レンダリングができます IPCオーバーヘッドが低いのでレイテンシを最小限に抑えられ CとSwift APIを両方サポートできるように新規で構築されています CompositorServicesを使う時は ImmersiveSpaceContentは CompositorLayerと呼ばれます CompositorLayerの作成には 2つのパラメータを提供する必要があります 1つ目は CompositorLayerConfiguration プロトコルですこのプロトコルはレンダリングセッションの動作と機能を定義するものです 2つ目はLayerRendererですこれはレイヤーレンダリングセッションのインターフェイスですアプリはこのオブジェクトを使って新規フレームをスケジュールしレンダリングします Metalでのイマーシブな体験を書く時はアプリのタイプを定義することから始めますシーンタイプとしては ImmersiveSpaceを使いますコンテンツタイプには CompositorLayerを使います CompositorLayerがコンテンツをレンダリングする準備ができたらシステムはアプリをレンダリングセッションのインスタンスで呼び出しますここがカスタムのエンジンのインスタンスを作成する絶好の場所ですこれでエンジンインスタンスができたので startを呼び出すことでレンダースレッドを作成しレンダーループを実行できますアプリのシーンリストを定義する時に 1つ考慮に入れるべきことはたとえアプリの最初のシーンが ImmersiveSpaceであっても SwiftUIはデフォルトでウインドウシーンを作るということですそのデフォルトの動作を変更するためにアプリのinfo.plistを修正しますアプリのシーンマニフェストに UIApplicationPreferred DefaultSceneSessionRoleのキーを追加することでアプリのデフォルトのシーンタイプが変更できます Compositor SpaceContentで spaceを使っている場合は代わりに使うキーは CPSceneSessionRole ImmersiveSpaceApplicationですアプリを設定し終わったらレンダーループに着手する前に CompositorServicesにLayerRendererの構成の仕方を伝えます CompositorLayerを構成するには CompositorLayer Configurationプロトコルに準拠する新しいタイプを作成しますこのプロトコルで設定やレンダリングセッションの一部を修正することができます CompositorLayerConfigurationが付与するパラメータは2つあります 1つ目はレイヤー機能ですこれによりデバイスでどの機能が利用可能かというクエリを実行できますその機能を使って有効な構成を作成します 2つ目のパラメータは LayerRenderer Configurationですこのタイプはレンダリングセッションのタイプを定義するものですこの構成でエンジンがコンテンツをどのようにレイヤーにマップするのか定義したり Foveated Renderingを有効にしたりパイプラインのカラーマネジメントを定義したりできますこれらのプロパティがそれぞれエンジンに対してどう影響するのか説明します最初は Foveated Renderingですこの機能の主な目標は大きなテクスチャサイズを用いずにより高い画素密度でコンテンツをレンダリングできるようにすることです通常ディスプレイのパイプラインではピクセルはテクスチャに直線的に配分されます xrOSはディスプレイのどの領域がより低いサンプリングレートを使えるかを定義するマップを作成してこのワークフローを最適化しますこれによりフレームのレンダリングに必要なパワーが削減できディスプレイの視覚的忠実性も保たれます可能な時はいつでもフォビエーションを使うことが重要でそれがより優れた視覚的体験に繋がりますフォビエーションがどのようにレンダリングパイプラインに影響するのか分かりやすい例が Xcodeの Metal Debuggerの使用です Metal Debuggerを使えばレンダリングパイプラインで使われているターゲットテクスチャやラスタライズ率マップが検査できますこのキャプチャが表示するのはラスタライズ率マップ用にスケーリングしていないテクスチャのコンテンツですより圧縮されているテクスチャの領域に焦点を当てるとサンプルレートが違うことに気づきます Metal Debuggerの添付ファイルビューアオプションで画像を拡大してディスプレイが表示する最終結果を見ることができます Compositorは各フレームに MTLRasterizationRateMapを使ってフォビエーションマップを付与しますフォビエーションがサポートされているか常にチェックするのは良い習慣ですこれはプラットフォームにより変わります例えば xrOSシミュレータではフォビエーションは利用不可能ですフォビエーションを有効化するには設定で isFoveationEnabled をセットします 2つ目のプロパティは LayerRendererレイアウトですこのプロパティはエンジンにとって最も重要な設定の1つですヘッドセットの各ディスプレイがレンダリングされたアプリのコンテンツにどうマップされるかを決めます Compositorが付与する Metalテクスチャにそれぞれの目が最初にマップされますそしてCompositorはそのテクスチャ内でどのスライスを使うかのインデックスを付与しますそして最後にCompositorはそのテクスチャスライス内で使うべきviewportを付与します LayerRendererレイアウトではテクスチャスライスとviewport間で異なるマッピングが選べますレイヤードレイアウトでは Compositorは2つのスライスと 2つのviewportのある 1つのテクスチャを使います専用レイアウトでは Compositorは1つのスライスと 1つのviewportをそれぞれ持つテクスチャを2つ使いますそして共有レイアウトでは Compositorは1つのスライスとその中に2つの異なるviewportがあるテクスチャを1つ使いますどのレイアウトを選ぶかはレンダリングパイプラインの設定次第です例えばレイヤードや共有レイアウトではレンダリングの実行が単一のpassでできるのでレンダリングパイプラインが最適化できます共有レイアウトでは Foveated Renderingが選べない場合は既存のコードベースをポートする方が簡単かもれませんレイヤードレイアウトが最適なレイアウトでシーンのレンダリングが単一のpassで行える一方 Foveated Renderingも維持されています最後の構成プロパティはカラーマネジメントです Compositorはコンテンツのレンダリングに ExtendedLinearDisplay P3色空間を予測しています xrOSはHeadroom 2.0のEDRをサポートしていますこれはSDRのレンジの2倍ですデフォルトでは Compositorは HDRでのレンダリングが可能なピクセル形式を使いませんが HDRをサポートするアプリの場合はレイヤー設定でrgba16Floatを特定できます EDRでHDRをレンダリングする方法についての詳細は「Explore HDR rendering with EDR」をご参照くださいアプリでカスタムの構成を作成するには CompositorLayerConfiguration に準拠する新しいタイプを定義することから始めますこのプロトコルに準拠するには makeConfigurationメソッドを追加しますこのメソッドを使うとレイヤー機能とレイヤー設定が修正できます前出の3つのプロパティを有効にするためにまずはフォビエーションがサポートされているかをチェックします次にこのデバイスでどのレイアウトがサポートされるかをチェックしますこの情報を使って構成内に有効なレイアウトが設定できますシミュレータのようなデバイスでは Compositorは一つのビューしかレンダリングできないのでレイヤードレイアウトは利用不可能ですフォビエーションはデバイスがサポートするならtrueにします最後に HDRコンテンツをレンダリングできるようにするために colorFormatをrgba16Floatにします Compositorレイヤーを作成したコードに戻って今作成した構成タイプを追加しましょうこれでレンダリングセッションが構成されたのでレンダーループが設定できます CompositorLayerの LayerRendererを使って始めますまずリソースをロードしてフレームをレンダリングするのにエンジンが必要とするあらゆるオブジェクトを初期化しますそしてレイヤーの状態をチェックしますレイヤーが一時停止ならレイヤーが動作するまで待ちますレイヤーが待機から解放されたら再びレイヤーの状態をチェックしますレイヤーが動作中ならフレームをレンダリングできますフレームがレンダリングされたらそのレイヤーの状態をチェックしてから次のフレームをレンダリングしますレイヤーの状態が無効の場合はレンダーループに作成したリソースを解放します今度はrender_loopの主な機能の定義ですこれまではSwiftを使っていましたがそれはImmersiveSpace APIが Swiftでしか利用できないからですですがここからは Cに切り替えてレンダーループを書きます繰り返しますがレンダーループの最初のステップはフレームのレンダリングに必要なすべてのオブジェクトの割り当てと初期化ですそのためにカスタムエンジン内の設定機能を呼び出します次はループの主要セクションですまずは layerRendererの状態をチェックします状態が一時停止なら layerRendererが動作するまでスレッドはスリープになりますレイヤーの状態が動作中ならエンジンは1フレームをレンダリングしますそしてレイヤーが無効ならレンダーループは終了です render_loop機能の最後のステップは使用されたリソースをすべてクリアすることですこれでアプリがレンダーループを実行できるので今度は1フレームのレンダリング方法を説明します xrOSでのコンテンツのレンダリングは常にデバイスの視点から行います ARKitを使ってデバイスのオリエンテーションや変換が取得できます ARKitは既にiOSで利用可能で今度はxrOSが真新しいAPIを導入しそこにはイマーシブな体験を作成しやすくなる追加機能が含まれています ARKitではワールドトラッキングやハンドトラッキングやそのほかのワールド感知機能をアプリに追加できます新しいARKit APIは CやSwift APIをサポートするためにゼロから構築されているので既存のレンダリングエンジンと統合がしやすくなっています xrOSでのARKitについての詳細は「Meet ARKit for spatial computing」をご確認くださいレンダーループ内で 1フレームをレンダリングしましょうフレームをレンダリングする時は Compositorが2つの主要セクションを定義します 1つ目はアップデートです入力レイテンシが重要でない作業はすべてここで行いますここに含まれるのはシーンのアニメーションアップデートやキャラクターのアップデートやあるいは手の骨のポーズなどのシステム内の入力収集などですフレームの2つ目のセクションはサブミッションですレイテンシが重要な作業はすべてここで行いますまたヘッドセットポーズに依存するコンテンツもすべてここでレンダリングしますこれらの各セクションへのタイミングを定義するために Compositorはタイミングオブジェクトを付与しますこの図式はタイミングがどのように異なるフレームセクションに影響するかを定義しています CPUとGPUの追跡はアプリによって行われた作業を表示していますそしてCompositorの追跡はフレームのディスプレイのために Compositorサーバが行った作業を表示しています Compositor Servicesのタイミングタイプは 3つの主要な時間の値を意味します最初は最適な入力時間ですこれはレイテンシが重要な入力をクエリしフレームのレンダリングを開始するベストの時間を意味します 2つ目はレンダリング終了時間ですこれは CPUやGPUがフレームのレンダリングを終了しているべき時間です 3つ目は提示時間ですこれはフレームがディスプレイに提示される時間ですフレームの2つのセクションのうちアップデートセクションは最適な入力時間の前に起こるべきですアップデートのあとはフレームサブミッション開始の前に最適な入力時間になるのを待ちますそしてフレームのサブミッションを行いレンダリングの結果が GPUにサブミットされます重要なのは CPUとGPUの作業はレンダリング終了時間の前に終わっていなければならずでなければCompositorサーバはこのフレームを使えずに代わりに前のフレームを使うことになってしまいます最後にレンダリング終了時になると Compositorサーバがシステム内のほかのレイヤーとこのフレームを複合しますレンダーループコードに戻って render_new_frame機能を定義しましょうエンジンのrender_new_frame機能内で最初にlayerRendererからのフレームをクエリしますフレームオブジェクトでタイミング情報が取得できますそのタイミング情報を使ってアップデート調べインターバルをサブミットします次にアップデートセクションを実行しますフレームに開始と終了のアップデートを呼び出してこのセクションを定義しますその中でデバイスの入力を収集しフレーム内のコンテンツをアップデートしますアップデートが終わったら最適な入力時間を待ってからサブミッションを開始します待ち終わったら開始と終了のサブミッションを呼び出してサブミッションセクションを定義しますこのセクション内では最初に描画可能なオブジェクトをクエリします CAMetalLayerと同様に描画可能なオブジェクトはレンダリングパイプラインの設定に必要なターゲットテクスチャと情報を含みます描画可能なオブジェクトができたので Compositorがこのフレームのレンダリングに使う最終的なタイミング情報が取得できます最終のタイミングを使って ar_poseがクエリできます描画可能オプジェクトにポーズを設定するのが重要なのはそれをCompositorが使ってフレームに再投影を行うからですここではエンジンオブジェクトに get_ar_pose機能を呼び出してポーズを取得していますですがこの機能のコンテンツは ARKitのワールドトラッキングAPIを使っているものを実行する必要がありますこの機能の最後のステップは GPUの全作業をエンコードしフレームをサブミットすることです submit_frame内で描画可能なオブジェクトを使って通常通りフレームのコンテンツをレンダリングしますこれでレンダーループがフレームをレダリングしているのでイマーシブな体験をインタラクティブなものにしましょうこの動画で分かるように Unityを使ったRecRoomは既にARKitとCompositorのAPIを利用してアプリにインタラクティブ性を加えていますこのインタラクションを動かしているのは 2つの主要な入力ソースです ARKitのHandTrackingはバーチャルハンドをレンダリングするためのハンドスケルトンを提供していますそしてLayerRendererのピンチイベントがユーザーインタラクションを動かします体験をインタラクティブにするためにはまずはユーザー入力を収集してそれをシーンのコンテンツに適用しますこの作業はすべてフレームのアップデートセクションで行われます入力ソースには主に2つあり LayerRendererと ARKit HandTrackingプロバイダです LayerRendererではアプリがピンチイベントを受け取るたびにアップデートが来ますこれらのアップデートは空間イベントの形式で公開されますこれらのイベントには 3つの主要なプロパティがあります Phaseはイベントがアクティブなのか終了したのかあるいは中止になったのかを教えてくれます Selection rayではイベントの開始時に注目されたシーンのコンテンツが決められます最後のイベントプロパティは Manipulator poseですこれはピンチのポーズでイベント中フレームごとにアップデートされます HandTracking APIから右手と左手両方にスケルトンが付与されますそれでは入力サポートをコードで追加しましょう入力を収集する前にアプリがバーチャルハンドをレンダリングするのかパススルーの手を使うのか決めます upperLimbVisibilityのシーン修飾子を ImmersiveSpaceに追加してパススルーの手を可視にしたり隠したりします空間イベントにアクセスするには CompositorLayerのレンダーハンドラを定義した所に戻りますここでは layerRendererでブロックを登録して新しい空間イベントがあるたびにアップデートを受けるようにしますエンジンコードをCで書いている場合は SwiftUIの空間イベントを C型にマップします Cコードの中で Cイベントのコレクションが受けられるようになります空間イベントのアップデートを扱っている時に1つ覚えておきたいのはアップデートはメインスレッドで配信されるということですつまりエンジンでのイベントの読み書きには何らかの同期メカニズムを使うということを意味しますこれでイベントはエンジンに保存されたので今度は入力収集機能を実行しましょう最初はこのフレームの現在の入力状態を保存するオブジェクトの作成ですこの入力状態が LayerRendererから受け取ったイベントを保存します必ず安全な方法で内部ストレージにアクセスしてくださいハンドスケルトンに関しては ARKitのハンドトラッキングプロバイダAPIを使って最新のハンドアンカーが取得できますこれでアプリに入力サポートができたので思いのままにxrOSでフルイマーシブ体験を作成するすべてのツールが揃いました復習しますがアプリの定義は SwiftUIで行います CompositorServicesとMetalでレンダーループを設定し 3Dコンテンツを提示しますそして ARKitを使えば体験をインタラクティブにできますご視聴ありがとうございました！ ♪

@main
struct MyApp: App {
    var body: some Scene {
        ImmersiveSpace {
            CompositorLayer { layerRenderer in
                let engine = my_engine_create(layerRenderer)
                let renderThread = Thread {
                    my_engine_render_loop(engine)
                }
                renderThread.name = "Render Thread"
                renderThread.start()
            }
        }
    }
}

10:32 - CompositorLayer Configuration

// CompositorLayer configuration

struct MyConfiguration: CompositorLayerConfiguration {
    func makeConfiguration(capabilities: LayerRenderer.Capabilities,
                           configuration: inout LayerRenderer.Configuration) {

        let supportsFoveation = capabilities.supportsFoveation
        let supportedLayouts = capabilities.supportedLayouts(options: supportsFoveation ?
                                                             [.foveationEnabled] : [])

        configuration.layout = supportedLayouts.contains(.layered) ? .layered : .dedicated

        configuration.isFoveationEnabled = supportsFoveation

        // HDR support
        configuration.colorFormat = .rgba16Float
   }
}

12:20 - Render loop

void my_engine_render_loop(my_engine *engine) {
    my_engine_setup_render_pipeline(engine);

    bool is_rendering = true;
    while (is_rendering) @autoreleasepool {
        switch (cp_layer_renderer_get_state(engine->layer_renderer)) {
            case cp_layer_renderer_state_paused:
                cp_layer_renderer_wait_until_running(engine->layer_renderer);
                break;
            case cp_layer_renderer_state_running:
                my_engine_render_new_frame(engine);
                break;
            case cp_layer_renderer_state_invalidated:
                is_rendering = false;
                break;
        }
    }

    my_engine_invalidate(engine);
}

15:56 - Render new frame

void my_engine_render_new_frame(my_engine *engine) {
    
    cp_frame_t frame = cp_layer_renderer_query_next_frame(engine->layer_renderer);
    if (frame == nullptr) { return; }
    
    cp_frame_timing_t timing = cp_frame_predict_timing(frame);
    if (timing == nullptr) { return; }

    cp_frame_start_update(frame);

    my_input_state input_state = my_engine_gather_inputs(engine, timing);
    my_engine_update_frame(engine, timing, input_state);

    cp_frame_end_update(frame);

    // Wait until the optimal time for querying the input
    cp_time_wait_until(cp_frame_timing_get_optimal_input_time(timing));

    cp_frame_start_submission(frame);

    cp_drawable_t drawable = cp_frame_query_drawable(frame);
    if (drawable == nullptr) { return; }

    cp_frame_timing_t final_timing = cp_drawable_get_frame_timing(drawable);
    ar_pose_t pose = my_engine_get_ar_pose(engine, final_timing);
    cp_drawable_set_ar_pose(drawable, pose);

    my_engine_draw_and_submit_frame(engine, frame, drawable);

    cp_frame_end_submission(frame);
}

18:57 - App architecture + input support

@main
struct MyApp: App {
    var body: some Scene {
        ImmersiveSpace {
            CompositorLayer(configuration: MyConfiguration()) { layerRenderer in
                let engine = my_engine_create(layerRenderer)
                let renderThread = Thread {
                    my_engine_render_loop(engine)
                }
                renderThread.name = "Render Thread"
                renderThread.start()
                layerRenderer.onSpatialEvent = { eventCollection in
                    var events = eventCollection.map { my_spatial_event($0) }
                    my_engine_push_spatial_events(engine, &events, events.count)
                }
            }
        }
        .upperLimbVisibility(.hidden)
    }
}

18:57 - Push spatial events

void my_engine_push_spatial_events(my_engine *engine,
                                   my_spatial_event *spatial_event_collection,
                                   size_t event_count) {
    os_unfair_lock_lock(&engine->input_event_lock);
    
    // Copy events into an internal queue
    
    os_unfair_lock_unlock(&engine->input_event_lock);
}

19:57 - Gather inputs

my_input_state my_engine_gather_inputs(my_engine *engine,
                                       cp_frame_timing_t timing) {
    my_input_state input_state = my_input_state_create();

    os_unfair_lock_lock(&engine->input_event_lock);
    input_state.current_pinch_collection = my_engine_pop_spatial_events(engine);
    os_unfair_lock_unlock(&engine->input_event_lock);

    ar_hand_tracking_provider_get_latest_anchors(engine->hand_tracking_provider,
                                                 input_state.left_hand,
                                                 input_state.right_hand);

    return input_state;
}

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

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

関連する章

リソース

関連ビデオ

WWDC23

WWDC21