Fabric Dynamics: Real-Time Cloth Physics

The Goal: Realistic cloth simulation in WebGL

The Challenge: Physics is hard and browsers are slow

The Result: 60 FPS cloth with wind, gravity, and collisions

Try the demo

How Cloth Physics Works

Cloth = grid of points connected by springs.

Each point:

  • Has position and velocity
  • Influenced by forces (gravity, wind)
  • Connected to neighbors (constraints)

Update 60 times per second.

The Math (Verlet Integration)

// For each point:
const acceleration = forces / mass;
const newPosition = position + velocity + 0.5 * acceleration * dt * dt;
velocity = newPosition - position;
position = newPosition;

Verlet integration is more stable than basic physics. Cloth doesn't explode.

Constraint Solving

Points can't stretch too far apart:

// For each connection:
const distance = length(pointA.position - pointB.position);
const restLength = 0.1;  // Natural distance

if (distance > restLength) {
    const correction = (distance - restLength) / distance;
    const delta = (pointA.position - pointB.position) * correction * 0.5;

    pointA.position -= delta;
    pointB.position += delta;
}

Run this 10 times per frame = stable cloth.

Performance Optimizations

1. GPU Compute Shaders

Physics calculations run on GPU, not CPU.

Speed: 60 FPS with 10,000 points

2. Spatial Hashing

Don't check collisions between all points. Only nearby ones.

Speed improvement: 100x

3. Level of Detail

Far away cloth = fewer points. Camera close = more detail.

Speed improvement: 3x

The Results

  • 10,000 vertices
  • 60 FPS steady
  • Interactive (drag with mouse)
  • Wind simulation
  • Self-collision detection

Hardware: RTX 3060 (mid-range GPU)

What We Learned

  • Web browsers can do AAA game physics
  • GPU compute shaders are incredibly powerful
  • Verlet integration is magic
  • 10,000 points is the sweet spot for performance

Try It Yourself

Demo: meridianvega.com/labs/fabric Code: GitHub

Controls:

  • Drag to interact
  • W = toggle wind
  • R = reset cloth
  • Space = pause physics

More Experiments: Check our Labs page Next Mad Science: Spectrum Analyzer (Aug 31)