SPH Fluid: From Wikipedia to 60 FPS
Smoothed Particle Hydrodynamics looked terrifying on paper — neighbour searches, kernel functions, pressure gradients. Here's how I went from zero understanding to a silky smooth 3D fluid simulation running fully in the browser.
Read post →🔧 Devlog Series
Three New Tutorials: Solar System, GLSL Shaders & localStorage
The tutorial section grew from 8 to 11 — a Three.js solar system for intermediates, raw GLSL fire-and-water shaders for the brave, and a beginner-friendly localStorage guide. Plus related-sim cross-links on 16 articles.
Reaction-Diffusion — Turing Patterns on the GPU
How Alan Turing's 1952 morphogenesis equations became a real-time WebGL texture shader. Ping-pong framebuffers, the Gray–Scott model, and the haunting patterns that emerge from two chemicals.
Boids — 3 Rules, Emergent Behaviour & 10,000-Bird Skies
Craig Reynolds' three steering forces — separation, alignment, cohesion — are all it takes to fill the sky with a convincing murmuration. Plus the spatial hash that makes 10,000 agents fast.
Ocean Shader — GLSL, Gerstner Waves & Fresnel in 3 Days
Realistic ocean water with animated vertex displacement, foam at crests and a Fresnel reflection effect — all written from scratch in GLSL over a long weekend.
Galaxy — Rendering 80,000 Stars Without Slowdown
A spiral galaxy with 80 k stars sounds impossible at 60 FPS — until you discover InstancedMesh and custom instanced shaders. The full story of how I cut GPU draw calls from 80,000 to 1.
Tectonic Plates — Spherical Geometry & Real Displacement
Mapping Earth's crustal plates onto a sphere with displacement maps and smooth boundary animations. Three.js, spherical harmonics and a lot of trigonometry.
SPH Fluid — from Wikipedia to 60 FPS
SPH neighbour lookups, kernel functions, pressure and viscosity forces — translating dense academic notation into running JavaScript code. Plus the spatial-hash optimisation that made it real-time.
How This Project Started — One Simulation in a Weekend
It was supposed to be a quick Three.js experiment for a weekend. A year and 40+ simulations later, here we are. The origin story of 3D Simulations.
📣 Announcements
New Category: Weather & Atmosphere — Tornado, Rain, Rainbow & More
Six new interactive simulations covering Earth's most dramatic atmospheric processes: tornado vortex, rain physics, rainbow optics, atmosphere layers, wildfire spread, and hurricane formation.
Categories Launch — Organising 40+ Simulations
Physics, Nature, Algorithms, Chaos, Space and more — introducing the new category system that brings order to the whole project. Plus dedicated Kids sections with age ratings!
Coming Soon: Quantum Physics Category
Wave–particle duality, quantum tunnelling, the double slit experiment and Schrödinger's equation — visualised in the browser. Watch this space!
Game of Life Update — Spherical Mode & 3 New Rulesets
Conway's classic gets a 3D sphere mode, custom ruleset editor and colour-coded cell age. Try the "Highlife" and "Day & Night" rules!
New Category: Algorithms — A*, Sorting & Mazes
A dedicated Algorithms section lands with A* pathfinding, bubble/quick/merge sort visualisers, maze generators and the Travelling Salesman Problem. Six interactive demos, all with step-by-step animation.
💡 Tips & Tricks
InstancedMesh Changed Everything — 5 FPS to 60 FPS
Rendering thousands of identical objects is the most common Three.js performance trap. One API call — InstancedMesh — solves it completely. Benchmarks and code included.
How I Debug GLSL Shaders (and Keep My Sanity)
No console.log in GLSL. No breakpoints. Just a black screen. Here are my practical tools and workflow for debugging vertex and fragment shaders — including the colour-as-value trick.
Disposing Three.js Objects Correctly (No Memory Leaks)
Geometry, material, texture and renderer — all leak if you don't call dispose() correctly. The complete checklist I use before every simulation cleanup.
Cannon-es vs Rapier.js — Choosing a Browser Physics Engine
Both run in the browser; both handle rigid bodies. So which do you pick? A practical side-by-side comparison based on building simulations with each.
Three.js vs Babylon.js — Which WebGL Framework?
Two mature WebGL frameworks, very different philosophies. I built the same simulation in both and here's what I found: bundle size, API ergonomics, shader access and ecosystem differences.
requestAnimationFrame vs setInterval — Always Use rAF
setInterval can't match the display refresh rate, wastes CPU in hidden tabs, and causes jitter. Here's exactly why rAF wins for animations and simulations, plus the fixed-timestep pattern that prevents physics explosions.
Useful Three.js Snippets I Use Every Day
8 copy-paste code blocks I reach for in every project: pixel-ratio renderer setup, resize handler, texture loader with callbacks, instanced matrix update, BufferGeometry from typed arrays, and more.
CSS Grid for Responsive Simulation Cards
auto-fill vs auto-fit, minmax() columns that work from 320 px to 4 K — no media queries needed. The exact grid setup behind this site's simulation catalogue, with a live editable demo.
Stay Updated
New posts are published irregularly — subscribe to the RSS feed or watch the GitHub repository to get notified when something new drops.