Redirect input with Manipulation Component

Joseph Simpson Updated on

We can use HitTargetComponent to send manipulation input from one entity to another.

Overview

Who knew remote control would be built into Manipulation Component? This page in the docs sheds a bit of light on an interesting idea. We can send input from one entity to another. This could be useful when the entity we need to manipulate is too large or too far away. For example, we could provide a small globe that the user can resize or spin. The global would stay in the same place, but the world they are immersed could change.

We’ll set up the subject with the component.

let subject = createStepDemoBox()
let mc = ManipulationComponent()
subject.components.set(mc)

Then we’ll create a delegate entity. When we manipulate this delegate, we’ll send the input to the subject. We do this by using ManipulationComponent.HitTargetComponent instead of ManipulationComponent().

let delegate = createStepDemoBox()
let hitTargetComponent = ManipulationComponent.HitTarget(redirectedEntity: subject)
delegate.components.set(hitTargetComponent)

Caveat: This fails when the delegate is set up using configureEntity(). I’m not sure if this is a bug or expected behavior, but this does not work.

// ❌ If we use configureEntity on the entity, then this does not work
let delegate = createStepDemoBox()
ManipulationComponent.configureEntity(delegate,collisionShapes: [.generateSphere(radius: 0.1)])
let hitTargetComponent = ManipulationComponent.HitTarget(redirectedEntity: subject)
delegate.components.set(hitTargetComponent)

Instead, we can create the collision, input, and hover components manually.

// ✅ Create the collision and input manually
let delegate = createStepDemoBox()
delegate.components.set(CollisionComponent(shapes: [.generateSphere(radius: 0.1)]))
delegate.components.set(InputTargetComponent())
delegate.components.set(HoverEffectComponent())
let hitTargetComponent = ManipulationComponent.HitTarget(redirectedEntity: subject)
delegate.components.set(hitTargetComponent)

The docs for configureEntity say that it is responsible for creating collision, input, and hover components. But it seems like it also attaches an instance of manipulation component, which them overrides the hit target component. I’ve filed a feedback (FB18576466) asking for an update to this page.

Example Code

struct Example090: View {

    var body: some View {
        RealityView { content in

            let subject = createStepDemoBox()

            let audioComponent = AmbientAudioComponent()
            subject.components.set(audioComponent)

            // We'll use configureEntity to set up input and collision on the subject
            ManipulationComponent
                .configureEntity(
                    subject,
                    allowedInputTypes: .direct,
                    collisionShapes: [.generateBox(width: 0.25, height: 0.25, depth: 0.25)]
                )

            // Create the component and add it to the entity
            let mc = ManipulationComponent()

            // Add the component and
            subject.components.set(mc)
            content.add(subject)

            // Create a second entity.
            let delegate = createStepDemoBox()

            delegate.scale = .init(repeating: 0.5)
            delegate.position = .init(x: 0, y: -0.3, z: 0.3)

            // ❌ If we use configureEntity on the entity, then this does not work
            // ManipulationComponent.configureEntity(delegate,collisionShapes: [.generateSphere(radius: 0.1)])

            // ✅ Create the collision and input manually
            delegate.components.set(CollisionComponent(shapes: [.generateSphere(radius: 0.1)]))
            delegate.components.set(InputTargetComponent())
            delegate.components.set(HoverEffectComponent())

            let hitTargetComponent = ManipulationComponent.HitTarget(redirectedEntity: subject)
            delegate.components.set(hitTargetComponent)
            content.add(delegate)

        }
    }
}

Updated for visionOS and Xcode beta 3.

// Beta 1 and 2 - Use Hit Target Component with an entity ID
let hitTargetComponent = ManipulationComponent.HitTargetComponent(redirectedEntityID: subject.id)

// Beta3+ - use Hit Target with an entity
let hitTargetComponent = ManipulationComponent.HitTarget(redirectedEntity: subject)

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

Support our Work

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.

Follow Step Into Vision

Questions or feedback?

2 Comments

  1. Hi! Thanks for this awesome post!!

    “This page” in the docs sheds a bit of light on an interesting idea.

    The link here seems broken, I’d love to see the original documentation you found this in though. Could you link it again?

    Reply