iOS/iPadOSゲームのvisionOSへの展開

iOS/iPadOSゲームのvisionOSへの展開

iOS／iPadOS向けゲームをvisionOSに展開し、比類のない体験を実現する方法をご紹介します。3Dフレームやイマーシブな背景を追加すると、臨場感やワクワク感が高まります。立体視機能やヘッドトラッキングを利用してウインドウに奥行きを持たせ、プレイヤーをゲームの世界にいざないましょう。

関連する章
- 0:00 - Introduction
- 1:42 - Render on visionOS
- 3:48 - Compatible to native
- 6:41 - Add a frame and a background
- 8:00 - Enhance the rendering
リソース
関連ビデオ

WWDC24
WWDC23
- RealityKitを使用した空間体験の構築
ダウンロード

こんにちは RealityKitとvisionOSのソフトウェアエンジニアのOlivierですこのビデオでは iOSやiPadOS向けのゲームを visionOSでよりイマーシブなゲームへと変身させる方法を紹介します
例えば Wylde Flowersというゲームは居心地のよい暮らしと農業を体験できますこれはiPadバージョンです
これも同じくiPadバージョンを互換性のあるアプリとして visionOSのウインドウで実行したものです
visionOS用のApp Storeから入手可能な最新バージョンの Wylde Flowersにはこのプラットフォームに固有の多くの機能強化が行われています
例えばウインドウが 3Dフレームで囲まれています
このフレームはゲームプレイに基づいて変化します例えばプレイヤーが庭を操作すると庭の3Dモデルと追加のUIがフレームに表示されます
ゲームの周囲に舞い落ちてくるタンポポの種や周囲を飛び回るハチドリなどイマーシブな背景が表示されます
ゲームビューはステレオスコピック（3次元）でレンダリングされシーンに奥行きを加えています
これらの機能強化により visionOSでの Wylde Flowersはさらに良くなりましたこのビデオでは同じことを皆さんのiOSおよびiPadOS向けゲームでも行う方法を紹介します
まず visionOSで利用可能なレンダリング技術について説明します次に iOSアプリをネイティブのvisionOS アプリに変換する方法を紹介しますさらにゲームに RealityKitフレームや背景を追加する方法を紹介します最後にゲームのMetalレンダリングをステレオスコピックヘッドトラッキング VRRを使用して強化する方法を紹介します
まず visionOSで利用可能なレンダリング技術を見てみましょう visionOSでは RealityKitとMetalを使用した3Dレンダリングを実行できます
RealityKitは Swiftで直接使用するか Unity PolySpatialなどのテクノロジーを介して間接的に使用できるフレームワークですこれによりvisionOSでは複数のアプリを同じ共有スペースで実行できます例えば RealityKitを使用して Game Roomや LEGO Builder’s Journeyのようなボリュメトリックウインドウ内のコンテンツをレンダリングできますまたは Super Fruit Ninjaや Synth Ridersのようにイマーシブな空間にコンテンツをレンダリングできます
Metalを使ってvisionOSで直接レンダリングすることもできますこの方法はカスタムレンダリングパイプラインが必要な場合やゲームをRealityKitに移植することが実用的ではない場合に選択できます
visionOSでのMetalを使ったレンダリングには2つの方法があります
ゲームは互換性のあるアプリとしてウインドウで実行できますその場合アプリの動作は iPadでの動作と非常によく似ています
これは Wylde FlowersのiPadバージョンが visionOS上で互換性のあるアプリとして動作している例です
アプリをウインドウに表示することの大きな利点は共有スペース内でほかのデバイスと並行して実行できることです例えば Safariを使ったり友達にメッセージを送ったりしながらゲームをプレイすることができます
また CompositionorServicesを使用してフルイマーシブアプリとして実行できますその場合ゲームのカメラはプレイヤーの頭部の動きによって制御されます例えば「Render Metal with passthrough in visionOS」のビデオにあるサンプルは CompositorServicesを使用してレンダリングされています詳しくはビデオをご覧ください
iPadアプリをvisionOSで互換性のあるアプリとして実行するのはとても簡単です一方 CompositionorServicesを使用してゲームをイマーシブなアプリにすることでアプリはより鮮やかになりますが大幅な再設計ややり直しが必要になるかもしれませんなぜならプレイヤーがカメラを完全に制御しシーン内のどこでも見ることができるからです
このビデオではこの2つの方法の中間にある一連のテクニックを紹介します互換性のあるアプリから始めて徐々に機能を追加してイマーシブ感を向上させていき Vision Proの機能を活用する方法を紹介します
最初の最も簡単なステップはゲームをvisionOSで互換性のあるアプリとして実行することです
Metal Deferred Lightingのサンプルを iOSゲームの例として使用しますこのビデオにはiPadで実行したサンプルが示されています
このサンプルのiOSバージョンをデベロッパWebサイトの developer.apple.com/jp からダウンロードできます
最初に iOS SDKを使ってアプリをコンパイルし visionOSで互換性のあるアプリとして実行しましょう
互換性のあるアプリは visionOSのウインドウ内で実行されます
visionOSではタッチコントロールとゲームコントローラの両方が利用できるためすべてのプラットフォームで一貫した体験をすぐに提供できます
ゲーム入力についての詳細は「Explore game input in visionOS」というビデオをご覧ください
互換性のあるアプリでも正常に動作しますがアプリをネイティブアプリに変換して visionOS SDKを使ってみましょうアプリのに移動し iOSターゲットを選択します現在は visionOSでiOS SDKが使用されているためと表示されています
サポートする出力先として Apple Visionを追加して visionOS SDKでコンパイルしましょう
エラーが発生することもありますがアプリがiOS向けに作られている場合ほとんどのコードはコンパイルされます
例えば Metal iOSゲームのコンテンツを visionOSに表示するにはオプションがいくつかあります
CAMetalLayerにレンダリングして UIビューに簡単に統合できますまたは新しいLowLevelTexture APIを使用してRealityKitテクスチャに直接レンダリングすることができます
もし使いやすければ CAMetalLayerから始めてもよいですが LowLevelTextureに移行して制御性を最大にすることをお勧めします
CAMetalLayerにレンダリングする場合それを含むビューを作成します
CADisplayLinkを作成してフレームごとにコールバックを取得します
コードはこのようになります UIViewはCAMetalLayerを layerClassとして宣言しています次に CAMetalDisplayLinkを作成してレンダリングコールバックを取得します
最後にフレームごとにコールバックで CAMetalLayerをレンダリングします
LowLevelTexturesも同様に使用できます指定されたピクセル形式と解像度から LowLevelTextureを作成できます次に LowLevelTextureから TextureResourceを作成し RealityKitシーンの任意の場所で使います CommandQueueを使用して MTLTextureを介して LowLevelTextureに描画できます
コードではこのようになります LowLevelTextureを作成しますそれからTextureResourceを作成し RealityKitシーンの任意の場所で使用します
次にフレームごとにテクスチャに描画します
LowLevelTextureについて詳しくは「Build a spatial drawing app with RealityKit」というビデオをご覧くださいこれでゲームをネイティブの visionOSアプリに変換できたので visionOS固有の機能を追加できます例えば ImmersiveSpaceでゲームビューの周りにフレームや背景を追加することでアプリのイマーシブ感を向上させることができます
Cut The Rope 3ではウインドウが動的なフレームで囲まれています
フレームはRealityKitでまたゲームは Metalでレンダリングされています
少し前に見たように ZStackを使用してMetalビューでゲームをテクスチャにレンダリングして実現できます RealityViewを使用してフレームを作成しゲームの周囲に3Dモデルを読み込みます
@State変数を使用してフレームを動的することができます例えば Cut The Rope 3では盤面に応じてフレームが変化しますゲームの背後にイマーシブな背景を追加することもできます Void-Xはその良い例ですゲームプレイの大部分はウインドウ内で行われますが Void-Xでは背景で雨を降らせたり稲妻を光らせたり 3Dで部屋中に銃弾が飛び交うようにしてイマーシブ感を高めています
背景は SwiftUIで ImmersiveSpaceを使って作成します
そして iOSゲームをWindowGroupに入れます
SwiftUIの@Stateオブジェクトを使ってウインドウとImmersiveSpaceの間で @Stateを共有します
ここまでゲームの周囲に要素を追加する方法を説明しました次にゲームのMetalレンダリングの向上に役立つ様々なテクニックを紹介しますまずステレオスコピックを追加してゲームに奥行きを追加する方法を紹介します次にヘッドトラッキングを追加してゲームを別世界につながる物理的な窓のように見せる方法を紹介します最後に VRRをゲームに追加してパフォーマンスを向上させる方法を紹介します
ゲームにステレオスコピックを追加してシーンに奥行きを追加することができますこれは3D映画の仕組みと同じです
これはステレオスコピックでレンダリングした Deferred Lightingサンプルの 1シーンです説明のため赤とシアンの色合いを使用したアナグリフでステレオスコピック画像を示していますが Vision Proでは左右の目に異なる画像が表示されます
ステレオスコピックは基本的に左右の目に異なる画像を見せることで機能します visionOSでは RealityKitのShaderGraphを使って具体的に言うと CameraIndexノードを使って
左右の目に異なる画像を提供してステレオスコピックを実現します
ステレオスコピックによる奥行き効果は各画像におけるオブジェクトのビュー間の距離に由来しこれを視差と呼びます
程度の差はありますがこの視差によってオブジェクトまでの距離に応じて目が収斂します遠くを見るときは目が平行になり近く見るときに目は収斂します人間の脳はこれを1つの手がかりとして距離を判断していますこのようにしてステレオスコピックにより物理的なミニチュアが目の前にあるかのようにまた別の世界につながる物理的な窓のように見せることでシーンに奥行きを出します
負の視差を持つオブジェクトは画像の前側にあるように見えます視差のないオブジェクトは 2つの画像が重なり合っていることを意味し 2D画像と同じように画像平面にあるように見えます正の視差を持つオブジェクトは画像平面の後ろ側にあるように見えます
これは正面から見た時にステレオスコピックがどのように感じるかを示したものです
実際には横から見るとウインドウから外に何も出ていないように見えますこれは単純にコンテンツが長方形の上に表示されているからです
長方形の境界からオブジェクトが飛び出てくるようにしたい場合は新しいポータルクロッシングAPIなどの APIとRealityKitを使用してレンダリングしますポータルクロッシングの例については「Discover RealityKit APIs for iOS, macOS and visionOS」をご覧ください
プレイヤーの頭部の位置を使用しない場合横から見た時にシーンは投影されたように見えます頭部の位置の使い方については後ほど説明しますこれはステレオスコピックの仕組みを示した図ですオブジェクトは2本の光線の交点にあるように見えます 2つの画像間の視差によって奥行きの見え方は変化します視差が変化すると交点の位置も変化します
このステレオスコピック画像について画像が変化しなくてもウインドウのサイズや位置が変化すると奥行きの見え方が変化することにも注目してください
「Build compelling spatial photo and video experiences」ビデオで Vision Pro向けにステレオスコピックコンテンツを作成する方法をご覧ください
特に避けてもらいたい主な状況の1つはコンテンツを無限遠を超えてレンダリングすることですコンテンツを見る時は目が収斂するか平行であるべきですプレイヤーの両目の間の距離よりも視差を大きくするとコンテンツが無限遠を超えてしまいます光線が発散し交点がなくなります実際のコンテンツを見ている時はこのようなことは決して起こらないためプレイヤーは非常に不快に感じますこれを解決する1つの方法は無限遠の平面にステレオスコピック画像を表示することです例えばこの画像はウインドウ平面にレンダリングされています一部のコンテンツは画像平面の後ろ側にあるように見え一部のコンテンツは前側にあるように見えます例えば空間写真のようにポータルを通じてコンテンツを無限遠の画像平面にレンダリングすることにより視差がゼロのコンテンツが無限遠点に見えるようになりますその他のすべてが負の視差となりそれより前側に表示されるようになりますこうすることですべてのコンテンツが無限遠点の前側に表示されます
またゲームの設定にスライダを追加することをお勧めしますプレイヤーがステレオスコピックの強さを快適なレベルに調整できるようにするためですスライダを実装するには 2つのバーチャルカメラの距離を変化させますステレオスコピック画像を生成するにはゲームループを更新して左右の目に対してレンダリングする必要があります iOS上のDeferred Lightingサンプルのゲームループはこのようになっています
このサンプルはゲームの状態とアニメーションを更新します次にシャドウマップなどのオフスクリーンレンダリングを行ったら画面にレンダリングします最後にレンダリングの結果を表示します
ステレオスコピックでは画面を複製して左右の目に対してレンダリングする必要がありますパフォーマンスを最大限に引き出すには Vertex Amplificationを使って同じ描画関数の呼び出しで左右の目に対してレンダリングします
デベロッパ向けドキュメントで Vertex Amplificationに関する記事をご覧ください
例えば Deferred Lightingサンプルのコードをこのように調整しました最初にシャドウパスを一度エンコードします次に各ビューについて記述し適切なカメラ行列を設定します最後に該当するビューの色や奥行きテクスチャにレンダリングコマンドをエンコードします
ステレオスコピックは 3D映画や空間写真のようにシーンに奥行きを追加しますゲームをもっと別世界につながる物理的な窓のように見せるためにヘッドトラッキングも追加できますこれはヘッドトラッキングを追加した Deferred Lightingサンプルです頭部の動きに合わせてカメラが動きます
プレイヤーの頭部の位置を取得するには ImmersiveSpaceを開いて ARKitを使用しますフレームごとにARKitから頭部の位置を取得しそれをレンダラに渡してカメラを操作します
コードはこのようになります最初に ARKitをインポートします次に ARKitSessionと WorldTrackingProviderを作成しフレームごとにヘッド変換を問い合わせます
visionOSではウインドウとImmersiveSpacesはそれぞれ独自の座標空間を持っています ARKitからのヘッド変換は ImmersiveSpaceの座標空間にありますそれをウインドウで使うには位置をウインドウの座標空間に変換します
コードで行うとこのようになります頭部の位置をARKitから ImmersiveSpaceの座標空間に取得します
visionOS 2.0のこの新しいAPIを使って ImmersiveSpaceに対するウインドウでのエンティティの transformMatrixを取得します
この逆行列を求めて頭部の位置をウインドウ空間に変換します最後にこのカメラ位置をレンダラに設定します
最良の結果を得るために必ず頭部の位置の予測を行ってくださいレンダリングが実行されそれが表示されるまでに時間がかかるためその推定時間を使用して頭部の位置を予測しレンダリングと最終的な頭部の位置ができるだけ一致するようにしますアプリの推定レンダリング時間を指定すると ARKitが頭部の位置の予測を行いますサンプルでは 33ミリ秒を presentationTimeの推定値に使用しましたこれは90fpsで3フレームに相当します物理的な窓からレンダリングされたようにゲームを見せるには非対称の投影行列を作成する必要もあります固定の投影行列を使用するとウインドウの形状に適合しませんカメラの視円錐がウインドウを通過するようにする必要があります例えばウインドウの左辺と右辺を指すベクトルを使用して投影行列を作成しますこのようにして投影行列を作成する利点の1つはウインドウに沿った近クリッピング面を使用してオブジェクトがウインドウの左右の辺と交差するのを防げることです
コードはこのようになります最初にカメラの位置とビューポートの3D境界から始めますカメラは-Zを向いており指定された位置にありますビューポートの各辺までの距離を計算します次にその距離を使って非対称の投影行列を作成しますこれがヘッドトラッキングを使用してゲームを別世界につながる物理的な窓のように見せる方法ですステレオスコピックを使うとゲームのイマーシブ感が高まりますが 2倍のフラグメントをレンダリングする必要があるためレンダリングコストも高くなります可変ラスタ化レートを使用してゲームのレンダリング効率を向上させることでそのコストをいくらか相殺できます可変ラスタ化レートとは Metalの機能の1つで画面全体を可変解像度でレンダリングできます
この機能を使用することで周辺部分の解像度を下げ中央部分の解像度を上げることができますヘッドトラッキングを使用している場合はピクセルが視野の中央にあるかそれとも周辺にあるかわかるためヘッド変換からVRRマップを作成できます共有スペースを使用している場合頭部の位置にアクセスすることはできませんが AdaptiveResolutionComponentを使ってゲームビューポートに広げた2Dグリッドにコンポーネントを配置することで VRRマップを作成できます
AdaptiveResolutionComponentはその3D位置において 1メートルの立方体が占めるおおよその画面上のサイズをピクセル単位で返します例えばこの画面では値が1024ピクセルから 2048ピクセルへと変化しています
このビデオはカメラが離れたり近づいたりする時に AdaptiveResolutionComponentの値がどのように変化するかを示しています
2Dグリッドから水平方向と垂直方向の VRRマップを抽出しますよりスムーズな結果を得るために各VRRマップを補間します最終的にそれらをMetalレンダラに渡します最後にコンテンツVRRでレンダリングされたら VRRマップを反転させてディスプレイに再マップする必要がありますこのように可変ラスタ化レートを使用しカメラの変換に合わせてレンダリング解像度を調整することでゲームのパフォーマンスを向上させることができます
これらすべての機能強化により visionOSではゲームをさらに面白くすることができますちょうどWylde Flowersが visionOS向けに変身したのと同じです
このビデオでは皆さんのiOSゲームを visionOSに展開する方法を見てきましたフレームやImmersiveSpaceを追加してゲームのイマーシブ感を高める方法も紹介しましたステレオスコピックとヘッドトラッキングを Metalレンダラに追加してゲームを別世界につながる窓のように見せる方法も見ましたまた VRRを使ってパフォーマンスを最適化する方法も見ました visionOSでiOSゲームをさらに魅力的にするために役立てていただければ幸いです Vision Proで皆さんのゲームをプレイするのを楽しみにしています

// Render with Metal in a UIView.

class CAMetalLayerBackedView: UIView, CAMetalDisplayLinkDelegate {

    var displayLink: CAMetalDisplayLink!

    override class var layerClass : AnyClass { return CAMetalLayer.self }

    func setup(device: MTLDevice) {
        let displayLink = CAMetalDisplayLink(metalLayer: self.layer as! CAMetalLayer)
        displayLink.add(to: .current, forMode: .default)
        self.displayLink.delegate = self
    }

    func metalDisplayLink(_ link: CAMetalDisplayLink,
              needsUpdate update: CAMetalDisplayLink.Update) {
        let drawable = update.drawable
        renderFunction?(drawable)
    }
}

6:20 - Render with Metal to a RealityKit LowLevelTexture

// Render Metal to a RealityKit LowLevelTexture.

let lowLevelTexture = try! LowLevelTexture(descriptor: .init(
    pixelFormat: .rgba8Unorm,
    width: resolutionX,
    height: resolutionY,
    depth: 1,
    mipmapLevelCount: 1,
    textureUsage: [.renderTarget]
))

let textureResource = try! TextureResource(
    from: lowLevelTexture
)
// assign textureResource to a material

let commandBuffer: MTLCommandBuffer = queue.makeCommandBuffer()!
let mtlTexture: MTLTexture = texture.replace(using: commandBuffer)
// Draw into the mtlTexture

7:06 - Metal viewport with a 3D RealityKit frame around it

// Metal viewport with a 3D RealityKit frame 
// around it.

struct ContentView: View {

    @State var game = Game()

    var body: some View {
        ZStack {
           CAMetalLayerView { drawable in
                             game.render(drawable) }

           RealityView { content in
                content.add(try! await 
                            Entity(named: "Frame"))
            }.frame(depth: 0)
        }
    }
}

7:45 - Windowed game with an immersive background

// Windowed game with an immersive background

@main
struct TestApp: App {

    @State private var appModel = AppModel()

    var body: some Scene {
        WindowGroup {
            // Metal render
            ContentView(appModel)
        }

        ImmersiveSpace(id: "ImmersiveSpace") {
            // RealityKit background
            ImmersiveView(appModel)
        }.immersionStyle(selection: .constant(.progressive),                                     in: .progressive)
    }
}

13:11 - Render to multiple views for stereoscopy

// Render to multiple views for stereoscopy.

override func draw(provider: DrawableProviding) {

    encodeShadowMapPass()

    for viewIndex in 0..<provider.viewCount {
        scene.update(viewMatrix: provider.viewMatrix(viewIndex: viewIndex),
               projectionMatrix: provider.projectionMatrix(viewIndex: viewIndex))
        var commandBuffer = beginDrawableCommands()
        if let color = provider.colorTexture(viewIndex: viewIndex, for: commandBuffer),
           let depthStencil = provider.depthStencilTexture(viewIndex: viewIndex,
                                                                 for: commandBuffer)
        {
            encodePass(into: commandBuffer, color: color, depth: depth)
        }
        endFrame(commandBuffer)
    }
}

13:55 - Query the head position from ARKit every frame

// Query the head position from ARKit every frame.

import ARKit

let arSession = ARKitSession()
let worldTracking = WorldTrackingProvider()

try await arSession.run([worldTracking])

// Every frame

guard let deviceAnchor = worldTracking.queryDeviceAnchor(
    atTimestamp: CACurrentMediaTime() + presentationTime
) else { return }

let transform: simd_float4x4 = deviceAnchor
    .originFromAnchorTransform

14:22 - Convert the head position from the ImmersiveSpace to a window

// Convert the head position from the ImmersiveSpace to a window.

let headPositionInImmersiveSpace: SIMD3<Float> = deviceAnchor
    .originFromAnchorTransform
    .position

let windowInImmersiveSpace: float4x4 = windowEntity
    .transformMatrix(relativeTo: .immersiveSpace)

let headPositionInWindow: SIMD3<Float> = windowInImmersiveSpace
    .inverse
    .transform(headPositionInImmersiveSpace)

renderer.setCameraPosition(headPositionInWindow)

15:05 - Query the head position from ARKit every frame

// Query the head position from ARKit every frame.

import ARKit

let arSession = ARKitSession()
let worldTracking = WorldTrackingProvider()

try await arSession.run([worldTracking])

// Every frame

guard let deviceAnchor = worldTracking.queryDeviceAnchor(
    atTimestamp: CACurrentMediaTime() + presentationTime
) else { return }

let transform: simd_float4x4 = deviceAnchor
    .originFromAnchorTransform

15:47 - Build the camera and projection matrices

// Build the camera and projection matrices.

let cameraPosition: SIMD3<Float>
let viewportBounds: BoundingBox

// Camera facing -Z
let cameraTransform = simd_float4x4(AffineTransform3D(translation: Size3D(cameraPosition)))

let zNear: Float = viewportBounds.max.z - cameraPosition.z
let l /* left */: Float = viewportBounds.min.x - cameraPosition.x
let r /* right */: Float = viewportBounds.max.x - cameraPosition.x
let b /* bottom */: Float = viewportBounds.min.y - cameraPosition.y
let t /* top */: Float = viewportBounds.max.y - cameraPosition.y

let cameraProjection = simd_float4x4(rows: [
    [2*zNear/(r-l),             0, (r+l)/(r-l),      0],
    [            0, 2*zNear/(t-b), (t+b)/(t-b),      0],
    [            0,             0,           1, -zNear],
    [            0,             0,           1,      0]
])

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

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

関連する章

リソース

関連ビデオ

WWDC24

WWDC23