Hey everyone!
We just dropped a new real-time grass simulation experiment built entirely with Three.js. Inspired by stylized nature scenes, this demo runs over a million dynamic grass blades at 60 FPS — even on an M1 Mac — right in the browser.
We focused on performance, realism, and interactivity, and added over 10 customization options for you to tweak and explore. It’s hosted on Tech Redux Labs, where we share high-performance WebGL experiments.
Try it out here:
Flowing Grass Fields - Real-Time Grass Simulation by Tech Redux
Would love to hear your thoughts, feedback, or ideas for improvement!
3 Likes
nice dynamics/look. what about using flats/clusters instead of individual blades?
2 Likes
All blades are actually combined into a single geometry — they’re not individual objects or even instanced ones.
1 Like
Ahh nice. You could still use a grass sprite and > 5x the perceptual blade count.
Combine that with a normal map and you got a stew cookin!
That’s a nice idea — I checked the thread you shared too, looks pretty solid!
We actually considered that approach as well, but having individual blades gave us much better control over bending and motion. Each blade has customizable detail too — if you set the count to 1 and enable wireframe mode, you’ll see what I mean.
With a lower detail setting, we can push much higher blade counts while still keeping the overall scene looking great.