Lab 084 – Background Glass as Material

Using the BlurredBackground Shader Graph Node.

Overview

At Office Hours yesterday we were discussing the examples and labs for glassBackgroundEffect. Ivan pointed out a Shader Graph node that offers the same effect in RealityKit. It had not occurred to me to even check for this.

The node is called Blurred Background. It has no inputs, but the output is a Color 3. That means we can send it into any other node that accepts a color. For example, here we send to the Diffuse Color of Preview Surface.

A second example mixes Blurred Background with a color and lowers the opacity on the Preview Surface.

Check it out in the headset.

Now that I know about this node, I have some ideas for using it in Dark Spaces. How would you use this?

Lab Code

The work for this lab was done in Reality Composer Pro. See the file named BackgroundGlass in the project. The code just loads that scene and add some input.

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

            guard let scene = try? await Entity(named: "BackgroundGlass", in: realityKitContentBundle) else { return }
            content.add(scene)

            // Add ManipulationComponent to every entity that already has an InputTargetComponent (added in RCP)
            var stack: [Entity] = Array(content.entities)
            await MainActor.run {
                while let entity = stack.popLast() {
                    if entity.components.has(InputTargetComponent.self) &&
                        !entity.components.has(ManipulationComponent.self) {
                        entity.components.set(ManipulationComponent())
                    }
                    stack.append(contentsOf: entity.children)
                }
            }
        }
    }
}

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

            guard let scene = try? await Entity(named: "BackgroundGlass", in: realityKitContentBundle) else { return }
            content.add(scene)

            // Add ManipulationComponent to every entity that already has an InputTargetComponent (added in RCP)
            var stack: [Entity] = Array(content.entities)
            await MainActor.run {
                while let entity = stack.popLast() {
                    if entity.components.has(InputTargetComponent.self) &&
                        !entity.components.has(ManipulationComponent.self) {
                        entity.components.set(ManipulationComponent())
                    }
                    stack.append(contentsOf: entity.children)
                }
            }
        }
    }
}

Download the Xcode project with this and many more labs from Step Into Vision.