Explore immersive styles for spaces in visionOS

Covering mixed, progressive, and full immersion in visionOS Immersive Spaces.

We can present immersive content in Apple Vision Pro in three main ways using immersionStyle.

1. Mixed: passthrough (AR-like) rendering where the user can see their environment. We can add content to this environment and optionally augment it using ARKit features.
2. Full: immersive (VR-like) rendering where passthrough is hidden and our app has full rendering control.
3. Progressive: A variation of full immersion where our app has full control of rendering. Only for a portion overall space is rendered. Users can control their level of immersion using the Digital Crown.

Mixed immersive style

The example code we have see so far has used the mixed style, which is the default for immersive spaces. We don’t need to specify an immersive style.

ImmersiveSpace(id: "GardenSceneMixed") {
    ImmersiveViewMixed()
        .environment(appModel)
}

ImmersiveSpace(id: "GardenSceneMixed") {
    ImmersiveViewMixed()
        .environment(appModel)
}

Full immersive style

Using the immersiveStyle scene modifier, we can pass a binding or constant to the style we want to present.

ImmersiveSpace(id: "GardenSceneFull") {
    ImmersiveViewFull()
        .environment(appModel)
}
.immersionStyle(selection: .constant(.full), in: .full)

ImmersiveSpace(id: "GardenSceneFull") {
    ImmersiveViewFull()
        .environment(appModel)
}
.immersionStyle(selection: .constant(.full), in: .full)

Progressive immersive style

In this example, we create a variable in the app model with the progressive style. The available range is set between 0.2 and 0.8 and the initial amount of immersion is set to 0.4

// App Model
var progressiveGarden: ImmersionStyle = .progressive(0.2...0.8, initialAmount: 0.4)


// App.swift
ImmersiveSpace(id: "GardenSceneProgressive") {
    ImmersiveViewProgressive()
        .environment(appModel)
}
.immersionStyle(selection: $appModel.progressiveGarden, in: .progressive)

// App Model
var progressiveGarden: ImmersionStyle = .progressive(0.2...0.8, initialAmount: 0.4)


// App.swift
ImmersiveSpace(id: "GardenSceneProgressive") {
    ImmersiveViewProgressive()
        .environment(appModel)
}
.immersionStyle(selection: $appModel.progressiveGarden, in: .progressive)

See also: Using aspect ratio with progressive immersive style

Video demo

In this example project, the immersive spaces are defined as three separate views. All of them use the same sub view.

Sample code is available in Garden14 in the Step Into Example Projects repo.

Download the Xcode project with this and many more examples from Step Into Vision.
Some examples are provided as standalone Xcode projects. You can find those here.