visionOS App と空間 Web のための没入型環境をデザインする

ハイライト

Apple は visionOS における没入型環境を、実際の奥行きと視差を持つ 3D CG シーンとして定義しています。ユーザーが頭を動かしたときに信頼できる parallax 効果を生むには、開発者は映画制作に近いパイプライン、つまり事前計画、現地撮影、後処理合成を通じて、14K パノラマテクスチャと 3D メッシュアセットを制作する必要があります。

主要内容

パノラマだけでは足りない。奥行きこそが本質

以前の VR 背景では、360 度パノラマ写真を撮り、それを球体に貼れば完成とされていました。ユーザーがヘッドセットを装着して頭を動かすと、前景も背景も一緒に動き、巨大な壁紙を見ているように感じます。（00:30）

visionOS のシステム環境、たとえば Haleakala は違います。頭を動かすと、近くの岩と遠くの山脈が相対的にずれて見えます。この視差、つまり parallax は、本物の 3D 奥行き情報から生まれます。Apple は 14K パノラマを奥行き付きの 3D メッシュにマッピングし、人間の奥行き知覚を納得させています。（00:36）

すべての環境には明確な用途がある

Apple チームは環境を作る前に 3 つの質問をします。なぜこの環境を作るのか。どんな質感を表現したいのか。ユーザーはこの空間をどう使うのか。（01:24）

Haleakala のようなメディア視聴環境では、大画面視聴に適した劇場感が出るよう地形を sculpt し、最適な視聴中心線を検討します。Keynote のプレゼンテーション環境では、あえて環境音を取り除き、照明をステージに集中させることで、ユーザーが公開スピーチの練習に集中できるようにしています。（01:53）

現地ロケハンは必要な工程

Mount Hood のような実在環境を作る前に、チームは現地でロケハンを行います。visionOS の全没入時の視野は約 81 度ですが、ユーザーが振り向いた後に何を見るかも考慮しなければなりません。（02:43）

Mount Hood の元のパノラマには道路や密集した植生があり、チームは後処理でそれらを置き換えました。ロケハン時に除去が必要な要素を記録しておくと、後処理の時間を大きく節約できます。（02:57）

月のように現地へ行けない場所では、Apple はアポロ計画の写真資料を参照します。参照資料は仮説を検証し、偏りを取り除く助けになります。（03:18）

詳細

撮影仕様：14K が最低ライン

visionOS 環境は 40 pixels per degree のときに十分な鮮明さを得られるため、360 度パノラマの理想的な目標は 14400 x 7200 ピクセルです。（06:53）

撮影上の推奨事項：

三脚を地上 1 メートルの高さに設置し、水平を保ち、大きな被写界深度を使う
同時に 2 メートル高の副カメラ位置を用意し、同期して撮影する。後処理で主視点の死角を埋めるために使う（06:19）
bracketed exposures を撮影し、太陽から影までの広いダイナミックレンジを捉える（06:45）
全視野をカバーできる機材を使い、最終的にスティッチ済みパノラマを出力する

補助的な参照素材

メイン撮影に加えて、補助素材も撮影します。

フォトグラメトリと LiDAR から得られる点群はメッシュ化でき、3D アセットの出発点になります。距離測定にも使えます（07:12）
Macbeth カラーチャート、chrome sphere、gray sphere を同時に撮影し、後処理の CG アセットが光照明に一致するようにする（07:35）
動きのあるシーンは動画を撮影し、信頼できる shader 効果を作る
動きに関連する音も記録し、後処理で空間オーディオに使う

後処理：パノラマから 3D アセットへ

クリーンアップ段階では、カメラリグ、足跡、人物など、見えてはいけない要素を取り除きます。（09:04）

精修したパノラマを 3D メッシュの UV 空間へ転送します。パノラマから見えない部分は、副カメラの素材や CG レンダリングで補います。（09:55）

品質管理のテクニック：

3D アセットとパノラマの A/B 比較を常に行い、テクスチャ転送の忠実度を確認する（10:08）
シーンを左右反転し、新鮮な視点で構図を確認する（10:23）
gamma と gain を極端な値にし、色の不一致やテクスチャデータの欠落を露出させる（10:34）

動的効果：リアルタイム照明の代わりに事前計算データを使う

Bora Bora 環境には大量の動きと光影の相互作用がありますが、リアルタイムレンダリングのコストは非常に高くなります。Apple は一連の trick を使っています。

雲の流れ：UV flow map で実装し、コストを抑えています。領域ごとに異なる流速重みを与えることで、奥行きとスケール感を作ります。（12:47）

雲影：リアルタイム照明を避け、スクロールする mask テクスチャで地形テクスチャを暗くします。雲の移動方向と速度を上空の雲と合わせ、関連性のある印象を作ります。（12:56）

木の葉の影：flip book テクスチャとして事前レンダリングし、地形上に重ねます。リアルタイムのソフトシャドウレンダリングの代わりに、事前計算データを使います。（13:15）

ヤシの木の揺れ：メッシュを大幅に簡略化し、風による動きは UV flow map から得ます。幹と葉柄は小さな葉よりゆっくり揺れ、階層的な頂点アニメーションと層状の正弦波で表現します。（13:43）

水面効果：複数層の normal map とスクロールテクスチャを重ねて波を作り、時間に応じて色相、彩度、明度を調整して、太陽光の subsurface scattering を模倣します。（14:06）

空間オーディオ

環境内に spatial audio emitter を配置すると、没入感が高まります。たとえば川の中の岩の位置に水流音を結びつけます。（11:19）

具体的な実装は次のコードを参照します。

import RealityKit

func addSpatialAudio(to entity: Entity) {
    guard let waterSound = try? AudioFileResource.load(
        named: "river_flow.wav",
        configuration: .init(shouldLoop: true)
    ) else { return }

    let audioComponent = SpatialAudioComponent(
        gain: .init(linear: 1.0),
        attenuation: .init(rolloff: .physical, rolloffFactor: 5.0)
    )

    entity.components.set(audioComponent)
    entity.playAudio(waterSound)
}

要点：

AudioFileResource.load はループ再生する音声リソースを読み込む
SpatialAudioComponent はゲインと空間減衰を制御し、.physical rolloff は実際の物理減衰を模倣する
rolloffFactor: 5.0 は減衰距離を 5 メートルに設定する
具体的な 3D 座標を持つ Entity に取り付ける必要があり、ルートノードに取り付けると音の方向感が失われる

カスタム没入型環境を読み込む

import SwiftUI
import RealityKit

struct ImmersiveEnvironmentView: View {
    @State private var immersionLevel: Double = 1.0

    var body: some View {
        RealityView { content in
            if let environment = try? await Entity(named: "Yosemite_Environment") {
                content.add(environment)
            }
        }
        .immersionStyle(selection: $immersionLevel, in: .mixed, .full)
    }
}

要点：

Entity(named:) は 3D メッシュとパノラマテクスチャを含む USDZ/RealityKit シーンアセットを非同期に読み込む
immersionStyle の selection には Double 型のバインディングが必要で、混合現実と全没入の間の遷移を制御する
.mixed と .full は利用可能な没入モードの範囲を定義する

主な示唆

瞑想 App の没入型自然環境を作る

何をするか：ユーザーがカスタマイズできる森や海辺の環境を作り、呼吸リズムに合わせて風音や水音を調整する。

なぜ価値があるか：session では、UV flow map と層状の正弦波を使って自然な動きを低コストで実現する方法が示されました。小規模チームでも信頼できる動的環境を作れます。

始め方：Blender で 14400x7200 のパノラマと深度マップをレンダリングし、USDZ として書き出し、Entity(named:) で読み込み、SpatialAudioComponent で環境音を具体的な位置に結びつけます。

SharePlay の仮想シアターを作る

何をするか：複数人が SharePlay で同じ仮想映画館環境に入り、一緒に映画を見る。

なぜ価値があるか：session では、メディア視聴がシステム環境の中核的ユースケースの 1 つだと明確に述べられています。地形は映画館の視点に合わせて sculpted でき、空間オーディオによって各人の位置感がリアルになります。

始め方：前列席、中段、遠景など、奥行きの層を持つ地形メッシュを設計し、RealityKit の SharePlay フレームワークで環境状態を同期します。

リアルタイム天気変化の風景ウィンドウを作る

何をするか：session の雲の UV flow map と雲影のスクロール mask 技術を Widget や App に使い、時間とともに変化する 3D 風景を作る。

なぜ価値があるか：Apple は Bora Bora で時間経過システムを示しました。これは Jupiter 環境の要件にも関係しています。この技術は非全没入シーンにも直接移植できます。

始め方：ShaderGraph で UV flow map による雲の駆動を書き、スクロールするテクスチャ mask で地面の雲影を作り、TimelineView または独自の時間システムと組み合わせます。

公開スピーチ練習ツールを作る

何をするか：Keynote 環境の設計を参考に、スピーチ練習に集中できる没入型空間を作る。「ステージ」にスポットライトを当て、環境音を取り除く。

なぜ価値があるか：session は、環境デザインが単に見た目の良さだけでなく、具体的な機能に奉仕できることを示しています。音響設計と照明設計はユーザーの注意を導けます。

始め方：Reality Composer Pro でステージシーンを配置し、Directional Light でスポットライト効果を模倣し、環境音をミュートし、ユーザー自身の反響フィードバックだけを残します。

実在の場所を基にしたガイド App を作る

何をするか：フォトグラメトリと LiDAR で実在の観光地をスキャンし、奥行きのある没入型ガイド環境を生成する。

なぜ価値があるか：session は現地ロケハン、撮影、後処理のパイプラインを詳しく説明しています。小規模チームもこの手順でローカルコンテンツを作れます。

始め方：iPhone Pro シリーズの LiDAR で対象地点をスキャンし、photogrammetry で点群とメッシュを生成し、Blender で精修して USDZ を書き出し、RealityKit で読み込みます。