Have you ever tried moving 1,000,000 objects at the exact same time on your computer?
If you asked your computer's main processor (the Central Processing Unit, or CPU) to track one million celestial bodies orbiting a black hole, calculate their gravitational pulls, and draw them on your screen 60 times a second, your browser would instantly freeze solid. The screen would stutter, the fan would sound like a jet engine, and you would see a measly 0.5 frames per second.
Yet today, inside a standard web browser tab, we are running over 1,000,000 particles at a butter-smooth 60 to 120 FPS—with virtually 0% CPU usage.
How is this possible? How did we solve the infamous N-Body problem in real time right inside a browser tab?
Here is the story, the concepts, and the mathematics behind how we harnessed raw GPU hardware parallelism—explained simply without a single line of code.
1. The Cashier Analogy: Why CPUs Choke on Millions of Items
To understand why traditional web apps struggle with large simulations, imagine a supermarket on Black Friday with 1,000,000 customers waiting to check out.
The CPU: One Super-Genius Cashier
A computer CPU is like Albert Einstein running a checkout register. It is exceptionally smart and can solve deeply complex logic problems. But it can only serve one customer at a time (or 8 to 16 customers if it has multiple cores).
When you have 1,000,000 particles, the CPU has to update Particle #1, then Particle #2, then Particle #3... all the way to #1,000,000, sixty times every second. That is 60,000,000 sequential calculations per second. The cashier is completely overwhelmed.
The GPU: Ten Thousand Assistants Working in Harmony
A Graphics Processing Unit (GPU) is fundamentally different. It is not one lone genius; it is an army of 10,000 assistants working simultaneously.
Instead of waiting in a single queue, all 1,000,000 particles are split across thousands of tiny hardware cores. Every particle calculates its own position and velocity at the exact same instant in time.
2. The Bottleneck That Ruined Web Physics: The "Highway" Problem
For the past twenty years, browser physics suffered from an architectural trap:
- The CPU computed where the particles moved.
- The CPU packed up that data and shipped it over a physical hardware wire (the PCIe bus) to the graphics card.
- The graphics card drew the pixels on the screen.
Shipping 32 megabytes of raw particle data across the motherboard 60 times every second creates a massive digital traffic jam.
The WebGPU Solution: Zero-CPU Residency
With WebGPU, we eliminated the highway entirely.
The particles are born inside the graphics card's memory (VRAM), their physics are calculated directly inside the graphics card, and they are rendered to the screen without ever leaving the GPU. The CPU never touches the physics. It simply sits back, sipping iced tea, while the GPU executes pure hardware compute passes.
3. The Math of Orbital Motion: Why Planets Don't Explode
When simulating gravity, how do you prevent planets and particles from flying off into deep space or crashing into the center?
The Singularity Trap: Plummer Softening
According to Newton's law of universal gravitation, the gravitational pull between two objects is inversely proportional to the square of the distance between them:
$$F = \frac{G \cdot M \cdot m}{r^2}$$
Look closely at what happens when the distance r approaches zero (r -> 0).
Dividing by zero causes the gravitational force to shoot to infinity. In a digital simulation, if two particles pass very close to each other, the math explodes, catapulting the particles across the universe at speed-of-light velocities.
To fix this, we use Plummer Softening (epsilon^2):
$$F = \frac{G \cdot M \cdot m}{(r^2 + \epsilon^2)^{3/2}}$$
By adding a tiny softening factor (epsilon ≈ 1.5), the gravitational core is smoothed into a continuous, physical gravitational well. No divide-by-zero errors. No infinite velocities.
4. Symplectic Mechanics: The Secret to Infinite Energy Conservation
In standard computer programming, if you want to move an object, you use Standard (Forward) Euler:
$$\text{New Position} = \text{Old Position} + \text{Old Velocity} \times \Delta t$$
$$\text{New Velocity} = \text{Old Velocity} + \text{Acceleration} \times \Delta t$$
The Flaw: Artificial Energy Gain
If you use Forward Euler to simulate the Earth orbiting the Sun, a subtle mathematical error accumulates every millisecond. The orbit continually gains artificial energy, widening with every pass until the Earth spirals out of the solar system.
The Fix: Symplectic Euler
Instead of using the old velocity to calculate the new position, Symplectic Euler updates the velocity first, and then immediately uses that new velocity to calculate the new position:
$$v_{\text{new}} = v_{\text{old}} + a \times \Delta t$$
$$x_{\text{new}} = x_{\text{old}} + v_{\text{new}} \times \Delta t$$
In geometric physics, this preserves the volume of phase space (Hamiltonian mechanics). The simulation conserves energy indefinitely, allowing millions of particles to orbit in stable galactic spirals forever.
5. From Butterfly Wings to Sound Waves: 4 Mathematical Worlds
By changing the mathematical rules evaluated by the GPU compute workgroups, the simulation morphs into completely different physical realms:
1. The Lorenz Strange Attractor (Chaos Theory)
Governed by three coupled differential equations discovered by meteorologist Edward Lorenz:
$$\frac{dx}{dt} = \sigma (y - x)$$
$$\frac{dy}{dt} = x(\rho - z) - y$$
$$\frac{dz}{dt} = x \cdot y - \beta z$$
Because of the non-linear multiplication x · y, particles orbit in infinite, non-repeating chaotic loops resembling the wings of a butterfly.
2. Incompressible Fluid Vortices (Curl Noise)
Real fluids like smoke and water are incompressible—they swirl into vortices rather than compressing into tiny dense dots. By taking the mathematical curl of a 3D noise field, the GPU guarantees zero divergence, creating turbulent eddies that look identical to flowing cosmic plasma.
3. 3D Cymatics: Sculpting Matter with Standing Sound Waves
Sound waves bouncing inside a 3D chamber create invisible geometric planes of zero vibration called nodal surfaces. When particles are dropped into the acoustic field, they are physically pushed away from high-pressure zones and trapped along nodal lines:
$$\cos(n \pi x)\cos(m \pi y) - \cos(m \pi x)\cos(n \pi y) = 0$$
The result is organic, geometric sacred architecture generated purely from vibrational harmonics.
6. What This Means for the Future of Sovereign Web Applications
Solving the 1,000,000-body problem in a browser tab is more than just a visual demo. It represents a paradigm shift in how web software operates:
- Zero Cloud Compute Costs: Instead of paying cloud servers thousands of dollars a month to calculate physics or render data, the client's own GPU handles the math locally in milliseconds.
- Instant Desktop-Grade Performance: Web applications are no longer sluggish toy interfaces. With WebGPU, web apps perform with the raw speed and fidelity of native C++ desktop software.
- True Digital Sovereignty: When compute runs locally on hardware you own, software becomes resilient, fast, and free of vendor lock-in.
Experience the live simulator directly at protoss.ca/particles.