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
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.
Top comments (1)
Apply your GLSL skills to the V Shader Hackathon, running until 22 May 2025!
Create unique Shader art to win up to $1000 – in collaboration with Gamedevjs.com
How to join: medium.com/vsystems/13-26-april-cr...
Any questions? Join our community!