visionOSでのパススルーによるMetalのレンダリング

visionOSでのパススルーによるMetalのレンダリング

Metalの利用体験をvisionOSへと拡張しましょう。レンダリングしたコンテンツを、パススルーを利用してユーザーの物理環境に統合する際のベストプラクティスをご紹介します。レンダリングしたコンテンツを物理世界と一致するように配置する、トラッキング可能なアンカー予測で遅延を抑制するなど、さまざまなことを実現する方法を学べます。

関連する章
- 0:00 - Introduction
- 1:49 - Mix rendered content with surroundings
- 9:20 - Position render content
- 14:49 - Trackable anchor prediction
- 19:22 - Wrap-up
リソース
関連ビデオ

WWDC24
- ARKitを活用したより高度な空間コンピューティング体験の創出
WWDC23
ダウンロード

こんにちは Pooyaです Appleでエンジニアをしています今日ご紹介するのは皆さんが visionOSを最大限に活用できるよう Metalの完全なイマーシブ体験を mixedイマーシブスタイルに拡張する方法です嬉しいことにここで使用するツールやフレームワークはおそらくみなさんがすでに慣れ親しんでいるものです
昨年 ARKit、Metal Compositor Servicesを使用して独自のレンダリングエンジンを用いた完全なイマーシブ体験を生む方法を紹介しましたそして今年は Metalを活用することで現実世界と想像の世界の境界を曖昧にする mixedイマーシブスタイルのレンダリングをご紹介します
皆さんはすでに Compositor Servicesを使用して Metalによるレンダリングエンジンを実装し ARKitをRealityKitでのレンダリングに使用しているかもしれません Compositor Servicesを使用してレンダリングセッションを作成したら Metal APIで美しいフレームをレンダリングし ARKitでワールドトラッキングやハンドトラッキングにアクセスできます今日のセッションでは Metal、ARKit CompositorServices APIを使用して mixedイマーシブスタイルを生み出すアプリを作る方法をご紹介します最初の手順ではアプリでレンダリングしたコンテンツを周囲の物理環境にシームレスに融合させます次に物理的環境を基準としたレンダリングコンテンツの配置を改善する方法を説明します最後にトラッキング可能なアンカーのポーズの正確な予測時間を取得して使用する方法を説明します例えば誰かの手とその手が扱っているバーチャルオブジェクトをトラッキングする場合などですではまずレンダリングしたコンテンツと周囲環境を融合させてみましょう今日のセッションを最大限に活用するには Compositor Services API Metal APIおよびMetalでのレンダリングに慣れていることが望ましいですまだこれらを使ったことがない場合は以前のビデオをぜひチェックしてくださいサンプルコードやドキュメントは developer.apple.com/jpでも参照できますでは始めましょう
mixedイマーシブスタイルではレンダリングされたコンテンツとユーザーの周囲環境の両方が表示されますいくつかの手順を踏むことでこのエフェクトをできるだけリアルに見せることができますまず描画可能なテクスチャをクリアして正しい値に設定しますこの値は完全イマーシブ型で使用した値とは異なります次にレンダリングパイプラインで正しい色と深度の値が生成されていることを確認します例えば乗算済みアルファやP3色空間などです visionOSではそれらが必要になります
次に ARKitのシーン認識を利用してレンダリングしたコンテンツを現実世界に固定し物理シミュレーションを行います最後にアプリの内容に合わせて上肢の可視性のタイプを指定しますアプリを mixedイマーシブスタイルにするための最初の手順はとてもシンプルです immersionStyleの設定時にオプションの1つとして mixedを追加するだけです SwiftUIではデフォルトでウインドウシーンが作成されますこれはアプリの最初のシーンが ImmersiveSpaceであっても同じです PreferredDefaultSceneSessionRole キーをアプリケーションシーンマニフェストに追加すればデフォルトのシーン動作を変更できます Compositor Space Contentを持つスペースを使用している場合は CPSceneSessionRoleImmersive Applicationを使用しますまた InitialImmersionStyleキーをシーンに合わせて調整することもできます mixedイマーシブスタイルで起動する場合は UIImmersionStyleMixedを使用するとよいでしょう
レンダリングループの開始時に描画可能なテクスチャをクリアする必要がありますクリアカラーの値はレンダリングに使用するイマーシブスタイルによって変わりますこれは典型的なレンダリングループですアプリは新しい描画可能オブジェクトを取得し読み込みとクリアのアクションでパイプラインの状態を構成して GPUワークロードをエンコードしオブジェクトを表示してコミットします
エンコードの段階ではまず色と深度のテクスチャをクリアしますレンダリングではテクスチャの全ピクセルに触れない可能性があるためです深度の値は必ずクリアしてゼロにする必要がありますただし色テクスチャの正しい値はどのイマーシブスタイルを使用するかによって異なります完全イマーシブ型の場合は色テクスチャを(0,0,0,1)にクリアする必要があります mixedイマーシブスタイルではすべてゼロを使用しますこちらがコードですここでは renderPassDescriptorを作成し色と深度のテクスチャを定義しましたそして組み込みと保存のアクションを調整しレンダリングの開始前にテクスチャがクリアされるようにしています深度と色のアタッチメントはすべてクリアしてゼロにしましたこの例はmixedイマーシブスタイル用なので色テクスチャのアルファ値は0に設定されています
次にアプリがサポートする色の規則で正しくレンダリングされているか確認します
おそらくアルファブレンディングはすでにご存知のことでしょうこれは前景と背景の2つのテクスチャを現実的な方法で重ね合わせるために使用されます visionOSのカラーパイプラインでは乗算済みアルファという手法を使用していますつまりシェーダでカラーチャンネルをアルファ値で乗算してから Compositor Servicesに渡すことを意味します
visionOSのカラーパイプラインは Display P3の色空間で機能します色の一貫性を高めるためアプリでレンダリングしたコンテンツとパススルーの間ではアセットはDisplay P3の色空間にある必要があります詳細については developer.apple.com/jpのドキュメントをご覧ください
Compositor Servicesは色と深度の両方のテクスチャをレンダラから取得して合成処理を行います注目すべき点は Compositor Servicesは深度のテクスチャを逆Z軸の規則に従っていると解釈することです特定のピクセルのレンダリングされたコンテンツがディスプレイに表示されるのはアルファチャンネルが0より大きく有効な視点深度の値がある場合です視差効果を避けるためにレンダラ側ですべてのピクセルに対して正しい深度値を指定する必要がありますまたシステムのパフォーマンス向上のためレンダラはアルファ値がゼロのピクセルにゼロの深度値を渡す必要があります次に ARKitからのデータを使用してレンダリングされたコンテンツにシーン認識を実装します mixedイマーシブスタイルではレンダリングされたコンテンツがユーザーの物理的な周囲の環境と共に表示されますよりリアルな体験を提供するためにアプリのレンダリングロジックにシーン認識を統合します ARKitを使用するとレンダリングされたコンテンツを現実世界の物体や表面に固定したりレンダリングされたコンテンツと現実の物理的なオブジェクトとの間でリアルな相互作用のために必要な物理シミュレーションを行ったり物理的なオブジェクトの背後にあるレンダリングコンテンツを隠すこともできます visionOSでのARKitの詳細については「Meet ARKit for spatial computing」をご覧くださいもうすぐ完成です最後の手順はvisionOSでユーザーの手や腕をどのように表示するか指定することですこれを「上肢の可視性」といいます mixedイマーシブスタイルでの上肢の可視性には 3つの選択肢があります 1つ目は「Visible」です「Visible」モードを選択するとオブジェクトの相対的深度に関わらず常に手が最前面に表示されます
2つ目のモードは「Hidden」ですこのモードでは手は常にレンダリングコンテンツの奥に隠れますそして最後が「Automatic」モードですこのモードでは手の可視性はレンダリングコンテンツの深度によって変わります手はオブジェクトの手前にある時は表示され深度が増すにつれてフェードアウトしますこの処理はシステムが自動的に行いますこの仕組みを詳しく見てみましょうヘッドセットを装着したユーザーが mixedイマーシブスタイルにいるとしますシーンには赤い円と黄色い立方体の 2つのオブジェクトがあるとしますまたユーザーの手も視界の中にありますシーンをレンダリングしたあと描画可能な深度と色のテクスチャはこのように見えます Compositor ServicesのAPIではレンダラに期待される深度テクスチャが逆Z値であることに注意してください上肢の可視性を「Automatic」に設定した場合 Compositor Servicesはテクスチャに設定した深度値を使用しますフレームワークはそれらの値を使用して手や腕の表示方法を判断します手がオブジェクトの手前にある場合は完全に表示しオブジェクトの背後や内側にある場合は部分的に非表示にします
コードではこのようになります upperLimbVisibilityを使用してアプリが「上肢の可視性」にどのモードを要求しているかをシステムに知らせますここではAutomaticモードを要求しましたレンダリングされたコンテンツを物理環境と視覚的に融合させたらコンテンツがその環境内に実際に存在しているように配置することが重要ですそのためにはまずコンテンツをワールド座標空間から正規化デバイス座標空間に変換しますここではシーン認識型の投影行列を利用してコンテンツの配置を改善する方法を紹介します次に Compositor Services フレームワークの入力に対応した正規化デバイス座標規約について説明しますそして最後にレンダリングエンジンで利用できる代替の中間的な手法をご紹介します Vision Proの位置と向きに関してオブジェクトをレンダリングする場合はコンテンツを3Dワールド空間から正規化デバイス座標空間とも呼ばれる 2.5D空間に変換しますこれは ProjectionViewMatrixと呼ばれます ProjectionViewMatrixは ProjectionMatrixとViewMatrixを組み合わせたものです ViewMatrixはさらに 2つの変換に展開することができますまず原点空間をデバイス空間に変換する deviceFromOriginです 2つ目はデバイス空間をビュー空間に変換する viewFromDeviceです
visionOS APIに合わせて ProjectionViewMatrixは ProjectionMatrixに originFromDeviceの逆行列を掛けそこにdeviceFromViewを掛けたものと等しくなります deviceFromView変換は Compositor Services APIの cp_view_get_transformを呼び出すことで取得できますレンダリングされたビューをデバイス空間に変換するための行列が返されます OriginFromDeviceについては ARKit APIがこのデータを提供し ar_anchor_get_origin_from_anchorを呼び出すと取得できます今年、レンダリングコンテンツと現実世界のオブジェクトとの位置関係を改善するためシーン認識型の投影行列を取得できるようになりましたこの行列はカメラの内部パラメータとリアルタイムのフレームごとのシーン認識要素を組み合わせてレンダリングされたコンテンツを現実世界のオブジェクトとより良く配置させ mixedイマーシブスタイルの体験を向上させますアプリがCompositor Servicesを通じて mixedイマーシブスタイルを要求する場合はこの新しいAPIを使用する必要がありますコンテンツをワールド空間からテクスチャ座標空間に変換するとアプリの描画可能な色と深度のテクスチャはレンダリング後にこのように見えますテクスチャ空間では X軸は左から右へ Y軸は上から下へ進みます想定される深度の値は逆Z軸の規則になっていることに注意してください
さらに詳しく見ると visionOSがフォビエーションされたカラーパイプラインを使用していることを考慮して描画可能テクスチャは画面空間と物理空間ではこのように見えますこれは物理空間のサイズが画面空間のテクスチャ寸法よりも小さいことを意味しています画面空間はユーザーが値を認識する場所であり物理空間は実際の値がメモリに保存される場所です
フォビエーションされたレンダリングの仕組みの詳細については developer.apple.comで「Rendering at different rasterization rates」を参照してくださいではCompositor Servicesが期待する描画可能な正規化デバイス座標空間についてもう少し詳しく見ていきましょう正規化デバイス座標空間には 3つの軸があります水平のX軸垂直のY軸そして垂直方向のWinding Orderですそのすべてがレンダラの方向に影響します
Compositor Servicesは色と深度の両方のテクスチャをレンダリングするために使用される正規化デバイス座標空間が X軸が左から右へ Y軸が下から上へ Winding Orderが前から後ろになることを期待していますただしレンダリングエンジンが別の正規化デバイス座標空間で中間テクスチャをレンダリングする可能性がありますまた Compositor Servicesは Y軸やWinding Orderを反転させるなど様々な方法でシーン認識型の投影行列を提供できます最終的にレンダリングエンジンは描画可能なテクスチャが Compositor Servicesの規則に従っていることを確認する責任がありますではサンプルコードを使用して visionOS APIからプロジェクションビュー行列を構成する方法を詳しく見てみましょう指定されたpresentationTimeに対して deviceAnchorを取得したあと Compositor Services APIに deviceAnchorを渡します
そのdeviceAnchorを使用して描画可能オブジェクトのビューを反復処理することでビューごとの projectionViewMatrixを計算しますまず対応するビューを取得します次に ARKit APIを使用して originFromDeviceの変換を取得しますさらに Compositor Services APIで deviceFromViewの変換を取得しますこの2つを使ってviewMatrixを作成し原点からのビューを得ることができます computeProjection APIを呼び出し指定されたビューに対して Compositor Servicesの規則で投影行列を取得します .rightUpBack空間ですそして最後に projectionにviewMatrix変換を乗算して projectionViewMatrixを構成します注意点としてアプリではこれらをフレームごとに取得する必要がありこれらの変換を古いフレームから再利用することはできませんレンダリングコンテンツを配置したら次にユーザーがそれらを操作する時のことを考えてみましょうアンカーは現実世界における位置や方向を表しますトラッキング可能なアンカーは一連のエンティティのリストでシステムはセッション中にトラッキング状態を取得したり失ったりしますトラッキング可能なアンカーはレンダリングコンテンツの配置に使用できます例えば人の手はトラッキング可能なアンカーエンティティですトラッキング可能なアンカーを設定するにはまず ARKitへの接続を認証しますセッションを利用してアクセスしたいデータの種類に対する認証をリクエストします次にプロバイダを設定しますデータプロバイダを利用するとアンカー変更などのデータ更新をポーリングまたは観察して最終的に ARKit APIからトラッキング可能なアンカーを取得できますフレームごとにレンダリングループ内でまずレンダラのロジックを更新し次に Compositor Servicesにデータを送信しますではレンダリングループをよく見てみましょう 2つのステージで構成されています 1つ目は更新ステージですインタラクションや物理シミュレーションなどシミュレーション側のロジックが含まれますこのステージは通常CPU側で行われますシミュレーションロジックを正確に計算するためにはトラッキング可能アンカーとデバイスのポーズの両方が必要です 2つ目は提出ステージで最終結果がテクスチャにレンダリングされますこの処理はGPU側で行われますアンカーのポーズ予測関数の精度はフレームの表示時間が予測クエリが呼び出される時間に近いほど向上しますより良いアンカー結果を得るためにアンカーとデバイスのポーズを再度照会して結果ができるだけ正確であることを確認しますこの図は様々なフレームセクションに対するタイミングの影響を示したものです Compositor Servicesからは 4種類のタイミングを取得できます「フレームタイムライン」はアプリが行っている作業を表します
「最適な入力時間」はアプリがインタラクションや物理シミュレーションなど重要でないタスクを完了する時間です更新ステージの開始時にアプリがトラッキング可能アンカーとデバイスアンカーの両方を問い合わせます「最適な入力時間」の直後が遅延が重要となる入力をクエリしてフレームのレンダリングを開始するのに最適なタイミングです「レンダリング期限」は CPUとGPUによるフレームのレンダリングが終了するべき時間です「トラッキング可能アンカー時間」はカメラが周囲を認識する時間ですこの時間はアンカーの予測に利用する必要があります最後に「プレゼンテーション時間」はフレームがディスプレイに表示される時間ですこの時間はデバイスのアンカー予測に使用される必要があります例えばデバイスの視野内のシーンを想像してくださいそこには人の手に持たれている赤い球体がありますまた環境内には黄色い立方体もありますレンダリング後デバイスのディスプレイではこのように見えるでしょうこの黄色い立方体のようなトラッキング可能アンカーにアタッチされないレンダリングコンテンツの場合は表示時間のデバイスのポーズを照会すればデバイス変換に対する相対的な変換を計算することができますただし赤い球体のようにトラッキング可能アンカーにアタッチされたレンダリングコンテンツの場合はトラッキング可能アンカーの位置とデバイスの位置の両方を使用することになりますトラッキング可能なアンカー予測ではトラッキング可能なアンカー時間を使用しますではサンプルコードを見てみましょうレンダリングループ内で頭部の姿勢とトラッキング可能アンカーのポーズの取得前にアプリは重要でない作業を処理する必要がありますそれによって予測精度が向上します重要度の低い作業が終わった後アプリは最適なタイミングで作業を開始しますアンカーに依存する作業の開始時はまず frameTimingのデータから presentationTimeと trackableAnchorTimeの両方を取得する必要があります
そしてそれらのタイムスタンプを秒に変換します
presentationTimeを使用して deviceAnchorをクエリします trackableAnchorTimeを使用してトラッキング可能なアンカーをクエリしますトラッキング可能なアンカーが追跡されたらその位置を基準にロジックを実行します ARKit APIの詳細を確認するには「Create enhanced spatial computing experiences with ARKit」をご覧くださいこれで visionOSで素晴らしいmixedイマーシブスタイルを生み出すために必要なツールが揃いました Compositor Servicesと Metalを使えばレンダリングループを設定して 3Dコンテンツを表示できますそして最後に ARKitを使用して体験をインタラクティブにすることができます詳しくはこちらのビデオをご覧くださいご視聴ありがとうございました

@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()
            }
            .immersionStyle(selection: $style, in: .mixed, .full)
        }
    }
}

4:43 - Create a renderPassDescriptor

let renderPassDescriptor = MTLRenderPassDescriptor()
        
renderPassDescriptor.colorAttachments[0].texture = drawable.colorTextures[0]
renderPassDescriptor.colorAttachments[0].loadAction = .clear
renderPassDescriptor.colorAttachments[0].storeAction = .store
renderPassDescriptor.colorAttachments[0].clearColor = .init(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)            

renderPassDescriptor.depthAttachment.texture = drawable.depthTextures[0]
renderPassDescriptor.depthAttachment.loadAction = .clear
renderPassDescriptor.depthAttachment.storeAction = .store
renderPassDescriptor.depthAttachment.clearDepth = 0.0

9:08 - Set Upper Limb Visibility

@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()
            }
            .immersionStyle(selection: $style, in: .mixed, .full)
						.upperLimbVisiblity(.automatic)
        }
    }
}

13:37 - Compose a projection view matrix

func renderLoop {
    //...
   
    let deviceAnchor = worldTracking.queryDeviceAnchor(atTimestamp: presentationTime)
    drawable.deviceAnchor = deviceAnchor
    
    for viewIndex in 0...drawable.views.count {
        let view = drawable.views[viewIndex]
        let originFromDevice = deviceAnchor?.originFromAnchorTransform
        let deviceFromView = view.transform
        let viewMatrix = (originFromDevice * deviceFromView).inverse
        let projection = drawable.computeProjection(normalizedDeviceCoordinatesConvention:
                                                    .rightUpBack,
                                                    viewIndex: viewIndex)
  
        let projectionViewMatrix = projection * viewMatrix;
        
        //...
    }
}

18:27 - Trackable anchor prediction

func renderFrame() {
    //...

    // Get the trackable anchor and presentation time.
    let presentationTime = drawable.frameTiming.presentationTime
    let trackableAnchorTime = drawable.frameTiming.trackableAnchorTime

    // Convert the timestamps into units of seconds
    let devicePredictionTime = LayerRenderer.Clock.Instant.epoch.duration(to:     presentationTime).timeInterval
    let anchorPredictionTime = LayerRenderer.Clock.Instant.epoch.duration(to:     trackableAnchorTime).timeInterval

    let deviceAnchor = worldTracking.queryDeviceAnchor(atTimestamp: devicePredictionTime)
    let leftAnchor = handTracking.handAnchors(at: anchorPredictionTime)

    if (leftAnchor.isTracked) {
        //...
    }

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

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

関連する章

リソース

関連ビデオ

WWDC24

WWDC23