Skip to content
vgai Learn

See physics bodies & colliders

quick start Beginner ⏱ 6 min vgai 0.1.0

Prerequisites: Installed vgai and run the editor (Get Started)

What you'll learn

  • Run a scene with Rapier physics bodies and colliders
  • Toggle the physics debug view to see collider wireframes
  • Understand that colliders define shapes and collisions surface as events

What you'll build: A look at the physics debug overlay on a scene full of bodies and colliders.

Walkthrough — See physics bodies & colliders · generated by site/media/lessons/physics-debug.lesson.ts (5 steps)

The fastest way to understand vgai physics is to see the colliders. The editor-tutorial scene has physics bodies with colliders; the debug view draws every collider as a wireframe.

Steps

Section titled “Steps”

  1. A scene with physics bodies and colliders. The scene is already open — if you followed the link above, the editor-tutorial scene is loaded and rendering (in the local dev editor: VGAI_PROJECT=examples/editor-tutorial npm run dev). Several entities carry a physics body + a collider (cuboid / ball / capsule / trimesh).

    The scene loaded in the editor
    A scene with physics bodies.

  2. Enter play mode — the Rapier world steps. Press Play. Bodies fall and rest under gravity as the Rapier world advances each tick.

    The scene running in play mode
    The Rapier world steps in play mode.

  3. Toggle the physics debug view with P. This draws collider shapes from rapierWorld.debugRender().

    The physics debug overlay
    Press P for the collider overlay.

  4. Collider wireframes overlay the scene. Each body’s collider is outlined — confirm the collider matches the visual mesh.

    Collider wireframes over the scene
    Collider wireframes.

  5. Stop and return to editing. Press Stop (or Escape).

Recap

New functionality

  • Ran a physics scene
  • Toggled the collider debug overlay

New concepts & skills

  • Colliders define collision shapes (cuboid/ball/capsule/trimesh)
  • Contacts surface as collision events, drained in postPhysics
  • P toggles rapierWorld.debugRender()

Next lesson → Manual: Colliders

On Your Own!

Extend what you built:

  • Add a sensor collider (isSensor: true) and wire an onTriggerEnter
  • Change a collider's restitution and watch the bounce
  • Compare the wireframe to the mesh to spot a mismatched collider

See also

Section titled “See also”