Immersive Environment Design for visionOS and the Spatial Web

import SwiftUI
import RealityKit
import AVFoundation

// MARK: - Immersive Space Content

struct CustomEnvironmentView: View {
    var body: some View {
        RealityView { content in
            // Load a custom environment from the app bundle
            // The .skybox is an equirectangular panorama mesh (14400x7200 target)
            if let environment = try? await EnvironmentResource.load(
                named: "YosemiteValley"
            ) {
                let skyEntity = Entity()
                skyEntity.components.set(
                    EnvironmentLightingConfigurationComponent(
                        environmentResource: environment
                    )
                )
                content.add(skyEntity)
            }

            // Attach a spatial audio source to a scene anchor (e.g., a waterfall)
            let audioAnchor = AnchorEntity(world: SIMD3<Float>(x: -3.0, y: 0.0, z: -8.0))

            if let audioResource = try? await AudioFileResource.load(
                named: "WaterfallAmbience",
                configuration: .init(shouldLoop: true)
            ) {
                let spatialAudio = SpatialAudioComponent(gain: -6)
                audioAnchor.components.set(spatialAudio)

                let controller = audioAnchor.prepareAudio(audioResource)
                controller.play()
            }

            content.add(audioAnchor)
        }
        .immersiveContentBrightness(.dim)
    }
}

// MARK: - App Entry Point

@main
struct ImmersiveEnvironmentApp: App {
    var body: some Scene {
        // Standard window for app UI
        WindowGroup {
            ContentView()
        }

        // Declare a full-immersion space using the custom environment
        ImmersiveSpace(id: "CustomEnvironment") {
            CustomEnvironmentView()
        }
        .immersionStyle(selection: .constant(.full), in: .full)
    }
}

// MARK: - Trigger View

struct ContentView: View {
    @Environment(\.openImmersiveSpace) private var openImmersiveSpace
    @Environment(\.dismissImmersiveSpace) private var dismissImmersiveSpace
    @State private var isImmersed = false

    var body: some View {
        VStack(spacing: 20) {
            Text("Yosemite Valley")
                .font(.largeTitle)
            Button(isImmersed ? "Exit Environment" : "Enter Environment") {
                Task {
                    if isImmersed {
                        await dismissImmersiveSpace()
                    } else {
                        await openImmersiveSpace(id: "CustomEnvironment")
                    }
                    isImmersed.toggle()
                }
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}