Environment Blending Component

We can use this to control how entities blend in with objects in our environment.

Overview

This new component in visionOS 26 allows us to create entities that can be placed behind real world objects. We create an instance of the component and set preferredBlendingMode. There are currently only two options.

Default, which seems to be the same behavior as not using the component at all

let ebc = EnvironmentBlendingComponent(
  preferredBlendingMode: .default
)

let ebc = EnvironmentBlendingComponent(
  preferredBlendingMode: .default
)

Occluded by, which only has one option: surroundings. Will we see more options in future updates?

let ebc = EnvironmentBlendingComponent(
  preferredBlendingMode: .occluded(by: .surroundings)
)

let ebc = EnvironmentBlendingComponent(
  preferredBlendingMode: .occluded(by: .surroundings)
)

This component can only be used in mixed and immersive spaces. Using it on an entity in a volume or window will have no effect. When used in a progressive space, this will only work on the part of a space that is outside the portal region. It is best to think of this component as a helper for AR scenes, not something we can use in VR content.

Video Demo

In the video I used the Apple Vision Pro travel case to block the entities. It works reasonably well, but is far from perfect. My guess is that this will work best for stationary objects, such as furniture.

Full Example Code

struct Example114: View {
    var body: some View {
        RealityView { content in

            // Create a subject without the component
            let subject1 = createStepDemoBox("subject1")
            subject1.position = [-0.2, 0.1, -1]
            content.add(subject1)
            
            // Create a subject with the component
            let subject2 = createStepDemoBox("subject2")
            subject2.position = [0.2, 0.1, -1]

            let ebc = EnvironmentBlendingComponent(
                preferredBlendingMode: .occluded(by: .surroundings)
            )

            subject2.components.set(ebc)
            content.add(subject2)

        }
    }
}

struct Example114: View {
    var body: some View {
        RealityView { content in

            // Create a subject without the component
            let subject1 = createStepDemoBox("subject1")
            subject1.position = [-0.2, 0.1, -1]
            content.add(subject1)
            
            // Create a subject with the component
            let subject2 = createStepDemoBox("subject2")
            subject2.position = [0.2, 0.1, -1]

            let ebc = EnvironmentBlendingComponent(
                preferredBlendingMode: .occluded(by: .surroundings)
            )

            subject2.components.set(ebc)
            content.add(subject2)

        }
    }
}

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.