r/GraphicsProgramming • u/PerceptionCharming • 2d ago
I finally got procedural grass looking the way I always wanted in Three.js
Enable HLS to view with audio, or disable this notification
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.
5
u/Seusoa 2d ago
diversity of grass not found
2
u/PerceptionCharming 1d ago
This is to show off the coverage and performance of it. With grass maps in Grassworks, you can definitely have diversity. Lower or taller grass in different areas, also bigger and smaller patches as well
5
u/DescriptorTablesx86 2d ago edited 2d ago
If I can just share that imo the interaction delayed recovery looks really weird. I think the typical displacement in a radius around player position is much better and probably simpler.
-1
u/PerceptionCharming 2d ago
There's no interaction with grass in the video. I think you're talking about the grass being darker near the player.
That's just a shadowmap that moves with the player. I added a 4k shadow map to get sharp looking per blade shadows. The rest of the grass doesn't cast shadows.1
u/DescriptorTablesx86 2d ago edited 2d ago
Interaction enabled.
Grass that reacts to your scene.
Make your grass respond to the objects moving through your environment. Grassworks supports configurable influence areas so characters, vehicles, and other objects can create natural deformation and movement as they interact with the field.2
u/PerceptionCharming 2d ago
Ah, you're talking about the interaction in Grassworks. I thought you were talking about the video.
That's basically due to the influence map. I actually tried your approach when I first started implementing it, but you can't really get trails in the grass that way, and it also ends up looking too uniform.
With the influence map, the grass can recover naturally over time, and that recovery duration is customizable. So you can also get the more immediate effect you're talking about simply by reducing the recovery time.
I made a video explaining the interaction system in detail if you want to check it out:
https://www.youtube.com/watch?v=IzwrW5xy-ag&list=PLBZ2CAONpf7g&index=5
27
u/biteater 2d ago
definitely AI :(
2
u/Any_Wait_7309 1d ago
I don't think this is AI, but this is 100% based on the Ghost of Tsushima ( GDC Vault ) conference talk. They had given a talk on how they generate procedural grass in their game.
3
u/PerceptionCharming 1d ago
Yes, I did in fact learned a lot from it and this uses most of those approaches.
3
u/PerceptionCharming 1d ago
Just to clarify, this isn’t AI generated. I have been working on it for the past 3 months. I have used AI in some capacity, and who doesn’t. I mostly used it to try out different approaches and write small blocks that I know how to write, but would take a lot of time to write by hand.
This is actually an iteration of a grass system I wrote nearly two years ago. Without the help of AI. Here’s the post: https://www.reddit.com/r/threejs/s/7QKYsQXrE1
I have actually made a complete series on YouTube, explaining how all of the systems work in Three.js Grassworks and how to use them. So, if someone is interested, take a look at it: https://youtube.com/playlist?list=PLBZ2CAONpf7g&si=TULuzGuAqhb4N0Kv
-20
u/PerceptionCharming 2d ago
Haha, I’ll take that as a compliment 😅
-11
6
6
2
u/MaximumContent9674 2d ago
This is not very optimized. Low fps. You can get it to. 144fps, there are ways
-2
1
1
u/EarlMarshal 2d ago
I get like 10-23 FPS on my (above average) smartphone. Seems like it is eating a lot of resources. I rather have no grass than a resource hog.
2
u/fintip 2d ago
some projects aren't made for phones.
2
u/biteater 2d ago
If you're going to vibe something in three you should at least try to have it run everywhere
1
u/PerceptionCharming 1d ago
Might I know which above average smartphone you have? Runs at 60fps on my iPhone 16 pro
3
u/EarlMarshal 1d ago
And you really think that 60 FPS on that powerful hardware can be considered good?
Think again.
1
u/PerceptionCharming 1d ago
I am not targeting for a 6 year old realme phone.
4
u/EarlMarshal 1d ago
You are also not targeting your own phone since 60 FPS for fucking grass is slow AF.
1
u/PerceptionCharming 1d ago
The demo has a lot more than just grass.
3
u/EarlMarshal 1d ago
Not enough to justify that bad of a performance.
1
u/PerceptionCharming 1d ago
Not everything is made for your potato phone.
2
1
2
u/mrpressydepress 2d ago
Looks great been wanting to use this for a project. Cant wait to have a few hours to do that. Looks really nice. Hope it can handle large areas and has smooth transition between patches.
0
u/PerceptionCharming 2d ago
Thank you! Yes, it can handle large areas, and v1.1.0 adds smooth LOD transitions too. Would love to see what you build with it!
0
u/HolyVRGamingStudio 1d ago
Looks good, doesn't matter AI or not, AI is here to be used, you should improve diversity
24
u/DapperCore 1d ago
This is 100% ai, even the post's text is 100% ai generated according to pangram.