Thick Walls vs Thin Boundaries in Matter.js

Using thick walls instead of thin lines for static boundaries in Matter.js is essential for preventing fast-moving bodies from glitching through barriers, an issue known as tunneling. Because Matter.js calculates physics in discrete time steps rather than using continuous collision detection, thin boundaries often fail to register collisions when an object moves faster than the boundary's thickness in a single frame. Implementing boundaries with substantial thickness ensures reliable collision resolution, maintains simulation stability, and avoids unexpected escapes without incurring performance penalties.

The Problem of Tunneling

Matter.js relies on discrete collision detection. In each update frame, the engine calculates the new positions of bodies based on their velocities and checks whether any bodies currently overlap.

If an object is moving at high speed, its displacement between Frame A and Frame B might exceed the width of a boundary line:

Because the object was never recorded as overlapping the boundary during either frame evaluation, Matter.js registers no collision. The object passes straight through the line—a phenomenon commonly called tunneling or the "bullet-through-paper" problem.

How Thick Walls Solve Tunneling

Thick walls solve this issue by expanding the collision volume. When a boundary body has a thickness greater than the maximum distance a dynamic object can travel in a single frame, tunneling becomes virtually impossible.

Even if a fast-moving object jumps deep into the wall's geometry during a frame step, it will still overlap with the boundary. Matter.js detects this overlap (penetration) and applies the necessary restitution and positional corrections to push the object back into the active play space.

Absence of Continuous Collision Detection (CCD)

Some physics engines offer Continuous Collision Detection (CCD), which casts rays or sweeps bounding volumes along an object's trajectory to detect collisions between frames. Matter.js does not include built-in CCD for standard bodies due to the high computational cost associated with continuous checks in JavaScript.

Because the engine relies exclusively on static overlap checks, increasing boundary thickness is the primary, zero-overhead defense against tunneling.

Implementation Best Practice

To implement thick boundaries without altering the visual appearance of a project, place the walls so their inner edges align with the viewport while the bulk of their thickness sits outside the visible canvas: