What is WebGL? How 3D Simulations Run in Your Browser

The Short Answer

Your GPU — the graphics processing unit — is a massively parallel computer that your browser can access directly via a standardised API called WebGL. The simulations on this site hand the physics calculations and pixel drawing to the GPU, which is hundreds of times faster at this kind of work than the CPU running your JavaScript.

You don't notice the transition. You open a tab, the simulation starts. But behind the scenes, your browser has compiled small programs called shaders, uploaded thousands of numbers to the GPU's dedicated memory, and entered a loop that fires 60 times per second.

CPU vs GPU — What's the Difference?

A CPU (the "main processor") is optimised for fast, sequential tasks — running one complex instruction after another. A modern CPU has 8–24 cores.

A GPU is optimised for doing many simple tasks in parallel. A typical laptop GPU has 1,000–4,000 cores. Each core is slower than a CPU core, but when you need to do the same calculation on thousands of particles simultaneously — update their positions, check collisions, compute colours — the GPU wins by a huge margin.

The WebGL Pipeline

Every frame of a 3D simulation goes through the same sequence of steps. Here's what happens between "JavaScript updates the physics" and "photons leave your screen":

1. 1
   JavaScript uploads data
   Particle positions, colours, and sizes are packed into typed arrays (Float32Array) and sent to the GPU's memory (VRAM) via WebGL buffer calls.
2. 2
   Vertex shader runs — once per point
   A small program (GLSL code) runs on every particle simultaneously. It transforms 3D world coordinates to 2D screen coordinates using matrix math.
3. 3
   Rasterisation — 3D to pixels
   The GPU figures out which screen pixels each triangle or point covers. This step is entirely automatic and happens in dedicated fixed-function hardware.
4. 4
   Fragment shader runs — once per pixel
   Another GLSL program decides the final colour of each pixel — lighting, texture, transparency, glow effects. All happen simultaneously across thousands of pixels.
5. 5
   Frame swapped to screen
   The completed frame is displayed. requestAnimationFrame calls the loop again — ideally 60 times per second, synchronised with the monitor's refresh rate.

What is a Shader?

A shader is a small program written in GLSL (Graphics Library Shading Language) that runs directly on the GPU. Shaders have no console.log, no loops over arrays, and no way to communicate between parallel instances — each one processes its own data point in complete isolation.

This constraint is what makes them fast. The GPU can run 4,000 fragment shader instances simultaneously because they share no state with each other.

Three.js — WebGL Without the Complexity

Raw WebGL requires writing the entire pipeline manually. Most simulations on this site use Three.js, a JavaScript library that handles the boilerplate — camera, scene graph, geometry helpers, built-in materials — while still letting you write custom shaders when needed.

The simpler 2D simulations (Cellular Automata, diffusion, some wave sims) use the Canvas 2D API instead — a slower but simpler drawing API for cases that don't need the full GPU pipeline.

Try It: Simulations That Show the GPU at Work

• Galaxy — 80,000 stars rendered with InstancedMesh: one draw call
• Reaction-Diffusion — ping-pong framebuffers; the GPU computes the next state of a million-pixel grid
• Ray Marching — every pixel computed entirely in the fragment shader, no geometry at all
• Boids — 5,000 bird agents, spatial hashing on the CPU, instanced rendering on the GPU