🧊 Spatial Partitioning

Spatial partitioning is a technique for dividing a space into multiple sub-spaces, or partitions, to aid in the processing and management of data. It is used in a variety of applications, from collision detection to ray tracing. Here is a nice visualization of how it works (opens in a new tab).

A simple use case could be checking the distance between the player and nearby enemies in a game. If there are 100 enemies, you would have to check the distance between the player and all 100 enemies. If you divide the game world into 4 quadrants, you would only have to check the distance between the player and the enemies in the quadrant the player is in, resulting in a significant performance boost.

Here are some libraries to help you implement spatial partitioning in your projects.

Quadtrees (2D)

Wikipedia (opens in a new tab)

• quadtree-ts74500/w
• d3-quadtree2223M/w2y years
• js-quadtree63200/w2y years

Octrees (3D)

Wikipedia (opens in a new tab)

• sparse-octree1005k/w – Requires Three.js as a peer dependency
  Requires Three.js as a peer dependency
• vasturiano/d3-octree2530k/w

BVH

Bounding Volume Hierarchy: Wikipedia (opens in a new tab)

• three-mesh-bvh2k182k/w – With React Three Fiber, see Drei <Bvh> (opens in a new tab)
  With React Three Fiber, see Drei <Bvh> (opens in a new tab)