🧠 From 2,500 to 1,000,000 Particles: Supercharging a Three.js Demo with WebAssembly

m1kc3b — Tue, 29 Apr 2025 16:09:34 +0000

When I first explored the classic webgl_points_waves demo in Three.js, I was amazed by the simplicity and elegance of the animation — around 2,500 particles oscillating in a wave pattern. But naturally, I wondered: What if we wanted 100× more particles? Could JavaScript handle it?

Spoiler: It can’t. But WebAssembly can.

🚧 The Limits of JavaScript in Creative Code

JavaScript is great — but when it comes to realtime simulations involving thousands or millions of calculations per frame, it quickly becomes the bottleneck.

Tasks like:

Particle simulations
Per-frame math on large arrays
Complex waveforms, physics, or procedural animations

…often demand performance beyond what the JS engine can safely deliver, especially in browsers where garbage collection and dynamic typing introduce runtime overhead.

🚀 Rebuilding the Core in Rust

So I rewrote the simulation logic — the part responsible for animating each particle based on time — in Rust, and compiled it to WebAssembly. The rendering still uses Three.js and WebGL, but now the math is done in a much faster, memory-safe native module.

Without diving into the full code, here's the gist:

A buffer of f32 values is allocated and shared with JavaScript
Each frame, a Rust function updates the Y-position of every particle
The math involves some trigonometry and time-based modulation (based on sin, cos, and distance to origin)
Everything is vectorized and runs at near-native speed

In fact, the logic is so efficient that instead of 2,500 particles, we now simulate 1,000,000 — in real time, in the browser.

🎮 Try It Live

👉 Demo here

Click the JS or WASM button and check the FPS counter (top left corner). It’s eye-opening.

📦 Under the Hood

The Rust code is compiled with wasm-bindgen, and exposes a very simple API to JavaScript. Integration is as easy as passing a buffer and a time value to the WASM function — no boilerplate, no complex interop.

In Rust, everything runs in place, directly on the shared buffer. No allocation, no overhead. That means you get tight control over memory and massive performance gains, especially in repetitive workloads like particle animation.

🔥 Why WASM Matters for Creative Developers

This project is more than a performance flex — it's a realistic case study in how WebAssembly can enhance creative web experiences:

✅ Smooth animations
✅ Clean interop with JS and WebGL
✅ Minimal runtime cost
✅ Scales to millions of data points

If you're building interactive 3D, simulations, or generative art, WASM is not a nice-to-have — it's a superpower.

🧠 Learn More

For a deeper dive into how I built this and why I think WASM is the future for creative coding, check out my article.