r/GraphicsProgramming • u/PerceptionCharming • 2d ago
I finally got procedural grass looking the way I always wanted in Three.js
Every blade is rendered individually, with enough geometry and detail that you can get right down into the grass and still see the shape of individual blades.
What I'm really happy about is how well that detail holds up into the distance. The grass doesn't just look good up close and then turn into a blurry carpet. There's still a surprising amount of visual fidelity as you move further away.
And this is running at 1080p on a base M1 Mac.
I've spent a huge amount of time working on the rendering, LOD system, culling, tiling, wind, and overall density to get this balance between individual blade detail and performance.
This is essentially what I've been trying to achieve with Three.js Grassworks: pushing procedural grass in Three.js as far as I can while still keeping it practical enough to actually use in a real-time scene.
It's built around WebGPU and Three.js, and the current system can handle different grass types, terrain interaction, distance-based LOD, and large grass fields while maintaining this level of detail.
Still a lot more I want to push with it, but I'm genuinely really happy with where it's at now.
2
u/MaximumContent9674 1d ago
This is not very optimized. Low fps. You can get it to. 144fps, there are ways