What Does AABB Mean in Planck.js Collision?

In 2D physics engines like planck.js (a JavaScript port of Box2D), AABB stands for Axis-Aligned Bounding Box. It is a fundamental geometric concept used to optimize collision detection by wrapping complex shapes—such as polygons or circles—inside a simple, non-rotated rectangle. This article explains how AABBs function as a first line of defense in physics simulations, how they speed up performance through a two-phase collision system, and how they are implemented within planck.js.

Understanding Axis-Aligned Bounding Boxes

An Axis-Aligned Bounding Box is a rectangle whose sides are perfectly parallel to the X and Y coordinate axes. Because the box cannot rotate, representing it mathematically requires very little data—typically just the minimum and maximum coordinates, expressed as \((x_{min}, y_{min})\) and \((x_{max}, y_{max})\).

When a rigid body moves or rotates in planck.js, the engine dynamically recalculates its AABB to ensure the shape remains entirely enclosed within the un-rotated bounding box.

The Two-Phase Collision System

Calculating exact collisions between complex, multi-sided polygons is computationally expensive. To maintain a smooth frame rate, planck.js divides collision detection into two distinct phases:

  1. The Broad-Phase (AABB Overlap Test): The engine checks if the AABBs of two objects overlap. Testing whether two axis-aligned rectangles intersect is incredibly fast, requiring only a few basic inequality comparisons. If the AABBs do not overlap, the engine instantly knows the objects cannot be colliding, skipping any further calculations.
  2. The Narrow-Phase (Exact Collision Test): If the broad-phase detects an AABB overlap, the engine proceeds to the narrow-phase. Here, it runs expensive geometric algorithms (like the Separating Axis Theorem) on the actual shapes to determine if a true collision has occurred and to calculate the contact points.

AABB Implementation in Planck.js

Within planck.js, the AABB class is heavily utilized by the internal BroadPhase dynamic tree structure to organize and query objects in the physics world efficiently. Developers can also interact with AABBs directly when performing manual world queries, such as raycasting or area-based lookups.

For example, if you want to find all physics bodies within a specific region of your game world, you can define a custom AABB bounds object and pass it to the planck.js world query methods to return a list of potential fixtures instantly.