Building 3D Physics for the Web

Introduction

Adding gravity, collisions, and kinetic forces to a WebGL canvas turns a passive viewing experience into an interactive playground. But rendering 3D physics smoothly on low-power devices requires understanding where the calculations happen.

In this article, we’ll explore how to pair Three.js (the visual engine) with Rapier (a Rust-compiled WebAssembly physics engine) to run rigid body dynamics at 60 frames per second.

Why WebAssembly?

Traditionally, JavaScript-based physics engines (like Cannon.js or Ammo.js) suffered from garbage collection pauses or struggled with large object counts. Rapier runs its heavy mathematical calculations inside WebAssembly, bypassing JS engine overhead and providing predictable frame times.

// Syncing Three.js mesh with Rapier rigid body
function updatePhysics() {
  world.step();
  
  // Update visual mesh coordinates from physics body
  const position = body.translation();
  const rotation = body.rotation();
  
  mesh.position.set(position.x, position.y, position.z);
  mesh.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w);
}

Implementing the Loop

To maintain separation of concerns:

1. Define the World: Initialize the Rapier world with gravity variables.
2. Bind the Meshes: Create corresponding physical colliders for each Three.js visual geometry.
3. Step the Clock: Advance the physics step on every animation frame before letting WebGL render.

By using low-friction materials and keeping geometries basic, you can create immersive 3D simulations that run flawlessly in modern mobile browsers.