Lab 114 – Glass Showcase Box with Volume Viewpoint

Joseph Simpson Updated on

Using the Glass Box from Lab 078, we can dynamically show and hide panes based on the user’s viewpoint relative to the volume.

In Lab 078 we build a simple glass box using glassBackgroundEffect) and spatialOverlay. In this lab we take that concept, remove the ornament controls, and use volume viewpoint to determine when to show or hide a pane of glass.

We need to convert the squareAzimuth from onVolumeViewpointChange into something we can use to select panes.

// Map the viewpoint direction to the box face that currently faces the viewer. Ignore top and bottom faces.
private func pane(facing azimuth: SquareAzimuth) -> Edge3D.Set {
    switch azimuth {
    case .front: [.front]
    case .back: [.back]
    case .right: [.trailing]
    case .left: [.leading]
    @unknown default: []
    }
}

We use that helper function to determine which pane to remove from the full set of faces in our array.

Video Demo

visionOS Simulator video: moving around the subject and watching pins of glass disappear to reveal the object

Full Lab Code

struct Lab114: View {
    
    @State var panes: Edge3D.Set = [.all]
    @State var padding: CGFloat = 24
    
    var body: some View {
        VStack {
            ModelViewSimple(name: "StepCube")
                .frame(width: 400, height: 400)
                .frame(depth: 400)
                .padding3D(.all, 50)
                .glassBackgroundBox(padding: padding, panes)
        }
        .onVolumeViewpointChange { _, newValue in
            // The near pane is the one the viewer is looking through; hide it so
            // the cube is unobstructed from wherever they stand, keep the other five.
            let near = pane(facing: newValue.squareAzimuth)
            var next: Edge3D.Set = [.all]
            next.remove(near)
            withAnimation { panes = next }
        }
    }

    /// Map the viewpoint direction to the box face that currently faces the viewer. Ignore top and bottom faces.
    private func pane(facing azimuth: SquareAzimuth) -> Edge3D.Set {
        switch azimuth {
        case .front: [.front]
        case .back: [.back]
        case .right: [.trailing]
        case .left: [.leading]
        @unknown default: []
        }
    }
}

Support our work so we can continue to bring you new examples and articles.

Support our Work

Follow Step Into Vision

Questions or feedback?