Collisions & Physics: Getting started with Collision Component

This component is vital to user input, collision detection, and physics.

Overview

The Collision Component is used in a number of ways in RealityKit. For example:

  • We use Input and Collision components to interact with entities using system gestures.
  • We can trigger code when entities collide.
  • We can trigger timelines and animations when entities collide.
  • We use Collision Components to define the shapes used in physics simulations and interactions.

We’ll cover all of these and more in the Collisions & Physics series.

Let’s start by adding some simple collisions in Reality Composer Pro. There are three primitive shapes we can use.

  • Box
  • Capsule
  • Sphere

We can add the Collision Component, then select the shape. Reality Composer Pro will calculate the extents of the shape based on the mesh for our entity. We can override this extend or recalculate it if needed. It can be helpful to enable Collision Shapes in the camera settings. This will let us preview the extent of our shapes and see how they relate to the models.

Adding and viewing Collision Components in Reality Composer Pro

We can also add Collision Components via code. We need to define a ShapeResource and pass it into the initializer.

// Create the shape
let shape = ShapeResource.generateSphere(radius: 0.1)
let collision = CollisionComponent(shapes: [shape])
sphereExample.components.set(collision)

// or
let collision = CollisionComponent(shapes: [.generateSphere(radius: 0.1)])
sphereExample.components.set(collision)

It can be helpful to view collisions shapes when running our app in the Simulator or on device. We can view collision shapes using the visionOS Debugging Visualizations in Xcode.

Enable Collision Shapes and Axes

The shapes in the back have their collision components added in Reality Composer Pro. The ones in the front are added in the RealityView.

Visualizing colliding shapes in the Simulator

We can also generate more complex collisions shapes. We’ll cover that in another example.

Full Example Code

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

            guard let scene = try? await Entity(named: "CollisionLabs", in: realityKitContentBundle) else { return }
            content.add(scene)
            scene.position.y = -0.4

            // Generate a sphere collision shape
            if let sphereExample = scene.findEntity(named: "SphereExample") {
                let collision = CollisionComponent(shapes: [.generateSphere(radius: 0.1)])
                sphereExample.components.set(collision)
            }

            // Generate a capsule collision shape
            if let capsuleExample = scene.findEntity(named: "CapsuleExample") {
                let collision = CollisionComponent(shapes: [.generateCapsule(height: 0.4, radius: 0.1)])
                capsuleExample.components.set(collision)
            }

            // Generate a cube collision shape
            if let cubeExample = scene.findEntity(named: "CubeExample") {
                let collision = CollisionComponent(shapes: [.generateBox(size: .init(x: 0.2, y: 0.2, z: 0.2))])
                cubeExample.components.set(collision)
            }

        }
    }
}

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

Questions or feedback?