Immersive Environment Design for visionOS & Spatial Web

 import SwiftUI
 import RealityKit
+import AVFoundation
 
−// Pre-visionOS 3 approach: basic ImmersiveSpace with a single sky sphere,
−// no layered parallax mesh separation, manual audio setup via AVAudioEngine
−
+// MARK: - App Entry
 @main
−struct OldImmersiveApp: App {
+struct ImmersiveEnvApp: App {
     var body: some Scene {
−        WindowGroup { OldContentView() }
−        ImmersiveSpace(id: "OldEnv") { OldEnvironmentView() }
+        WindowGroup {
+            ContentView()
+        }
+        ImmersiveSpace(id: "NatureEnvironment") {
+            NatureEnvironmentView()
+        }
+        .immersionStyle(selection: .constant(.full), in: .full)
     }
 }
 
−struct OldContentView: View {
−    @Environment(\.openImmersiveSpace) private var open
+// MARK: - Launcher
+struct ContentView: View {
+    @Environment(\.openImmersiveSpace) private var openImmersiveSpace
+    @Environment(\.dismissImmersiveSpace) private var dismissImmersiveSpace
+    @State private var isImmersed = false
+
     var body: some View {
−        Button("Enter") { Task { await open(id: "OldEnv") } }
+        Button(isImmersed ? "Exit Environment" : "Enter Environment") {
+            Task {
+                if isImmersed {
+                    await dismissImmersiveSpace()
+                } else {
+                    await openImmersiveSpace(id: "NatureEnvironment")
+                }
+                isImmersed.toggle()
+            }
+        }
+        .padding()
     }
 }
 
−struct OldEnvironmentView: View {
+// MARK: - Immersive Environment
+struct NatureEnvironmentView: View {
     var body: some View {
         RealityView { content in
−            // Single sphere — no depth layers, no parallax
−            let sphere = makeLegacySkySphere()
−            content.add(sphere)
−            // Audio: had to wire AVAudioEngine manually outside RealityKit
+            // 1. Sky sphere — panoramic equirectangular texture (14400x7200 px ideal)
+            let skySphere = makeSkySphere()
+            content.add(skySphere)
+
+            // 2. Foreground terrain mesh with parallax separation
+            if let terrain = try? await Entity(named: "TerrainMesh", in: .main) {
+                terrain.position = SIMD3(0, -1.0, 0)
+                content.add(terrain)
+            }
+
+            // 3. Spatial audio source anchored to a waterfall entity
+            let audioAnchor = AnchorEntity(world: SIMD3(x: -3, y: 0.5, z: -6))
+            let audioSource = makeSpatialAudioSource()
+            audioAnchor.addChild(audioSource)
+            content.add(audioAnchor)
         }
−        // No built-in IBL binding — developers set lighting via
−        // ImageBasedLightComponent directly on a separate entity
+        // IBL from the same equirectangular panorama drives scene lighting
+        .environment(\.physicallyBasedLighting, .imageBasedLight(resource: "PanoramaIBL"))
     }
 }
 
−private func makeLegacySkySphere() -> Entity {
+// MARK: - Helpers
+private func makeSkySphere() -> Entity {
+    // Large inverted sphere — viewer sits at center (1 m off ground)
     let mesh = MeshResource.generateSphere(radius: 1000)
−    var mat = UnlitMaterial()
−    // Texture loaded synchronously — no async streaming support
−    if let tex = try? TextureResource.load(named: "OldPanorama") {
−        mat.color = .init(texture: .init(tex))
+    var material = UnlitMaterial()
+    if let tex = try? TextureResource.load(named: "EnvironmentPanorama") {
+        material.color = .init(texture: .init(tex))
     }
−    let entity = ModelEntity(mesh: mesh, materials: [mat])
+    let entity = ModelEntity(mesh: mesh, materials: [material])
+    // Invert normals so texture is visible from inside
     entity.scale = SIMD3(-1, 1, 1)
+    entity.position = SIMD3(0, 0, 0)
     return entity
+}
+
+private func makeSpatialAudioSource() -> Entity {
+    let entity = Entity()
+    var spatialAudio = SpatialAudioComponent()
+    spatialAudio.gain = -6  // dB, subtle ambient level
+    spatialAudio.directivity = .beam(focus: 0.5)
+    entity.components.set(spatialAudio)
+
+    // Attach a looping ambient audio resource
+    if let resource = try? AudioFileResource.load(
+        named: "WaterfallLoop",
+        configuration: .init(shouldLoop: true)
+    ) {
+        entity.playAudio(resource)
+    }
+    return entity
 }