Devlog #18 — 250 Simulations: Lessons from Building the Biggest WebGL
Physics Library
Two years. 250 simulations. 73 categories. Two languages. Zero
frameworks. Here is what we learned — what worked brilliantly, what
we'd do differently, and the 10 hardest simulations we shipped.
250
simulations live
73
categories
EN + UK
languages
~2 yrs
in development
How We Got Here
The project started as a single simulation — a pendulum — built in a
weekend using Three.js. The question "what if I added another?" led to
ten, then fifty, then a hundred. The jump from 100 to 250 was
deliberate: a structured push into every major science domain, driven
by a content plan rather than individual inspiration.
The most important architectural decision — made at simulation #3 —
was keeping every simulation completely self-contained. Each
index.html file includes its own styles and logic. There
is no shared bundle, no global state, no framework to update. This
decision aged extremely well.
What Worked
Self-contained pages: Updating Three.js for one
simulation never risks breaking another. Shipping a new simulation
never requires a build step.
Progressive enhancement for mobile: Adaptive
quality tiers (added in Devlog #15) gave the biggest engagement win
— mobile sessions increased by 38% after launch.
Category Spotlight blog posts: The Spotlight series
(this blog!) drove consistent organic traffic — visitors who found a
spotlight post stayed for 3× longer than those landing on the
homepage.
EN + UK translations: Ukrainian-language versions
added in Devlog #11 gave a 22% increase in Ukrainian-language
organic search traffic within 4 weeks.
Web Workers for physics: Moving heavy loops (fluid
SPH, cloth, reaction-diffusion) off the main thread eliminated jank
during UI interaction and cut dropped frames by 80%.
What We'd Do Differently
Shared component system earlier: The navbar, footer
and metadata pattern was inconsistent across the first 80
simulations. Retrofitting shared components.js was a 3-week project
that could have been avoided.
SEO metadata from day one: The first 60 simulations
had minimal meta descriptions. Backfilling them improved average
click-through rate from 1.8% to 3.4% — but took weeks of mechanical
work.
Automated screenshot generation: Preview images are
still created by hand. A headless-browser screenshot pipeline would
have saved hundreds of hours.
Content before complexity: Some of our technically
most impressive simulations (quantum field visualiser, relativistic
raytracer) get far less traffic than much simpler ones (double
pendulum, disease spread). Interestingness beats impressiveness.
Solving incompressible Navier-Stokes with pressure-velocity
coupling (SIMPLE algorithm) in an irregular vessel mesh. The
pressure Poisson equation convergence took two attempts to
stabilise.
Image-source method for early reflections + statistical
reverberation tail. Correctly handling specular reflection
ordering in a non-rectangular room required a recursive
ray-tracing pre-pass.
Assembling a sparse global stiffness matrix and solving it live
with Gaussian elimination — while also keeping the WebGL
renderer in sync with computed deformations. Memory layout was
critical.
Combining consensus-based formation control with distributed
collision avoidance for 60 agents required a two-layer
controller: a slow formation planner and a fast reactive
obstacle layer.
Position-based dynamics with iterative constraint solving — the
number of solver iterations directly trades off visual quality
against frame rate. Getting it smooth on mobile required 40+
hours of tuning.
Implementing ping-pong framebuffers in WebGL1 without float
texture extensions required encoding chemical concentrations
into RGBA byte channels and careful precision management.
The Hodgkin-Huxley ODE system is stiff — the sodium channel time
constant is 100× shorter than the overall AP duration. Required
adaptive step-size RK4 to avoid numerical instability.
Implementing the 2D vortex panel method — solving N linear
equations for panel vortex strengths — and then visualising the
streamlines correctly took three complete rewrites of the matrix
solver.
Rendering 100,000 atom instances with colour-coded energy state
using InstancedMesh, while the Monte Carlo step modifies
instance matrices every frame. Buffer synchronisation was
tricky.
Wilson-Cowan neural mass model with thalamocortical coupling.
Reproducing the well-known delta/theta/alpha spectral peaks
required careful parameter calibration against published EEG
spectral data.
What's Next: The Road to 300
🔬 Nanoscale & Biophysics
Molecular dynamics, protein folding energy landscapes, DNA
mechanics — the physics at 1–100 nm that connects chemistry and
biology.
🌐 Network Science
Scale-free networks, percolation, epidemic spreading on graphs,
PageRank visualisation — the maths underlying the internet and
social media.
🎓 Guided Lessons
Structured learning sequences linking 3–5 simulations with
explanatory text — turning individual sims into a coherent
curriculum.
📥 Downloadable Data
Export simulation state as CSV / JSON for use in student projects
and research demonstrations. Already prototyped for the pendulum
and billiards sims.
Thank you to everyone who has used, shared and sent
feedback on the site. The 250th simulation was built because of an
email from a physics teacher who asked for a Chladni figure
demonstration for their class. Keep the suggestions coming — that is
genuinely how the library grows.