Real-time Grass Simulation in the Browser – Over 1 Million Blades at 60 FPS

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:
:backhand_index_pointing_right: 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. :slight_smile: Combine that with a normal map and you got a stew cookin!

( An older thread about grass: Grass experiment. [injected meshstandardmaterial, noise textures, clump instancing] )

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.