Dunfey · Hotel WWDC as data, est. 1983
Front desk everything
Years
Topics

2023 Spatial ComputingSwiftUI & UI Frameworks

WWDC23 · 24 min · Spatial Computing / SwiftUI & UI Frameworks

Go beyond the window with SwiftUI

Get ready to launch into space — a new SwiftUI scene type that can help you make great immersive experiences for visionOS. We’ll show you how to create a new scene with ImmersiveSpace, place 3D content, and integrate RealityView. Explore how you can use the immersionStyle scene modifier to increase the level of immersion in an app and learn best practices for managing spaces, adding virtual hands with ARKit, adding support for SharePlay, and building an "out of this world" experience!

Watch at developer.apple.com ↗

Transcript all transcripts

Chapters

Code shown on screen · 13 snippets

Defining an ImmersiveSpace swift · at 4:18 ↗
@main
struct WorldApp: App {
    var body: some Scene {
        ImmersiveSpace {
            SolarSystem()
        }
    }
}
RealityView in an ImmersiveSpace swift · at 6:53 ↗
ImmersiveSpace {
    RealityView { content in
        let starfield = await loadStarfield()
        content.add(starfield)
    }
}
ImmersiveSpace with a SolarSystem view swift · at 8:17 ↗
@main
struct WorldApp: App {
    var body: some Scene {
        ImmersiveSpace(id: "solar") {
            SolarSystem()
        }
    }
}
LaunchWindow swift · at 9:00 ↗
struct LaunchWindow: Scene {
    var body: some Scene {
        WindowGroup {
            VStack {
                Text("The Solar System")
                    .font(.largeTitle)
                Text("Every 365.25 days, the planet and its satellites [...]")
                SpaceControl()
            }
        }
    }
}
SpaceControl button using Environment actions for opening and dismissing an ImmersiveSpace scene swift · at 9:11 ↗
struct SpaceControl: View {
    @Environment(\.openImmersiveSpace) private var openImmersiveSpace
    @Environment(\.dismissImmersiveSpace) private var dismissImmersiveSpace
    @State private var isSpaceHidden: Bool = true
    var body: some View {
        Button(isSpaceHidden ? "View Outer Space" : "Exit the solar system") {
            Task {
                if isSpaceHidden {
                    let result = await openImmersiveSpace(id: "solar")
                    switch result {
                        // Handle result
                    }
                } else {
                    await dismissImmersiveSpace()
                    isSpaceHidden = true
                }
            }
        }
    }
}
WorldApp using LaunchWindow and ImmersiveSpace swift · at 10:44 ↗
@main
struct WorldApp: App {
    var body: some Scene {
        LaunchWindow()
        ImmersiveSpace(id: "solar") {
            SolarSystem()
        }
    }
}
Model3D with phase handling swift · at 11:32 ↗
Model3D(named: "Earth") { phase in
    switch phase {
        case .empty:
            Text( "Waiting" )
        case .failure(let error):
            Text("Error \(error.localizedDescription)")
        case .success(let model):
            model.resizable()
    }
}
Scene Phases swift · at 13:04 ↗
@main
struct WorldApp: App {
    @EnvironmentObject private var model: ViewModel
    @Environment(\.scenePhase) private var scenePhase

    ImmersiveSpace(id: "solar") {
        SolarSystem()
            .onChange(of: scenePhase) {
                switch scenePhase {
                case .inactive, .background:
                    model.solarEarth.scale = 0.5
                case .active:
                    model.solarEarth.scale = 1
                }
            }
    }
}
Coordinate Conversions swift · at 14:21 ↗
var body: some View {
    GeometryReader3D { proxy in
        ZStack {
            Earth(
                earthConfiguration: model.solarEarth,
                satelliteConfiguration: [model.solarSatellite],
                moonConfiguration: model.solarMoon,
                showSun: true,
                sunAngle: model.solarSunAngle,
                animateUpdates: animateUpdates
            )
            .onTapGesture {
                if let translation = proxy.transform(in: .immersiveSpace)?.translation {
                    model.solarEarth.position = Point3D(translation)
                }
            }
        }
    }
}
Immersion Styles swift · at 16:34 ↗
@main
struct WorldApp: App {
   @State private var currentStyle: ImmersionStyle = .mixed
   var body: some Scene {
        ImmersiveSpace(id: "solar") {
            SolarSystem()
                .simultaneousGesture(MagnifyGesture()
                    .onChanged { value in
                        let scale = value.magnification
                        if scale > 5 {
                            currentStyle = .progressive
                        } else if scale > 10 {
                            currentStyle = .full
                        } else {
                            currentStyle = .mixed
                        }
                    }
                )
        }
        .immersionStyle(selection:$currentStyle, in: .mixed, .progressive, .full)
   }
}
Surrounding Effects swift · at 20:08 ↗
@main
struct WorldApp: App {
  @State private var currentStyle: ImmersionStyle = .progressive
    var body: some Scene {
        ImmersiveSpace(id: "solar") {
            SolarSystem()
                .preferredSurroundingsEffect( .systemDark)
        }
        .immersionStyle(selection: $currentStyle, in: .progressive)
     }
}
Upper Limbs Visibility swift · at 20:30 ↗
@main
struct WorldApp: App {
    @State private var currentStyle: ImmersionStyle = .full
    var body: some Scene {
        ImmersiveSpace(id: "solar") {
            SolarSystem()
        }
        .immersionStyle(selection: $currentStyle, in: .full)
        .upperLimbVisibility(.hidden)
    }
}
Hand Anchoring swift · at 20:52 ↗
struct SpaceGloves2: View {

    let arSession = ARKitSession()
    let handTracking = HandTrackingProvider()

    var body: some View {

        RealityView { content in

            let root = Entity()
            content.add(root)

            // Load Left glove
            let leftGlove = try! Entity.loadModel(named: "assets/gloves/LeftGlove_v001.usdz")
            root.addChild(leftGlove)

            // Load Right glove
            let rightGlove = try! Entity.loadModel(named: "assets/gloves/RightGlove_v001.usdz")
            root.addChild(rightGlove)

            // Start ARKit session and fetch anchorUpdates
            Task {
                do {
                    try await arSession.run([handTracking])
                } catch let error as ProviderError {
                    print("Encountered an error while running providers: \(error.localizedDescription)")
                } catch let error {
                    print("Encountered an unexpected error: \(error.localizedDescription)")
                }
                for await anchorUpdate in handTracking.anchorUpdates {
                    let anchor = anchorUpdate.anchor
                    switch anchor.chirality {
                    case .left:
                        if let leftGlove = Entity.leftHand {
                            leftGlove.transform = Transform(matrix: anchor.transform)
                            for (index, jointName) in anchor.skeleton.definition.jointNames.enumerated() {
                                leftGlove.jointTransforms[index].rotation = simd_quatf(anchor.skeleton.joint(named: jointName).localTransform)
                            }
                        }
                    case .right:
                        if let rightGlove = Entity.rightHand {
                            rightGlove.transform = Transform(matrix: anchor.transform)
                            for (index, jointName) in anchor.skeleton.definition.jointNames.enumerated() {
                                rightGlove.jointTransforms[index].rotation = simd_quatf(anchor.skeleton.joint(named: jointName).localTransform)

                            }
                        }
                    }
                }
            }
        }
    }
}