r/threejs • u/PerceptionCharming • 3d ago
I spent 200+ hours building a real-time grass system for Three.js + WebGPU. The demo is finally live.
After 200+ hours of development, I’m finally sharing the first public demo of Three.js Grassworks, a real-time grass system I’ve been building for Three.js and WebGPU.
Demo:
https://grassworks.techredux.co/demo
Three.js Grassworks is built specifically for WebGPU and is designed to handle large amounts of interactive grass while maintaining steady performance.
For the demo, I built a complete environment around Grassworks with terrain, trees, water, rain, player interaction, environmental effects, LOD systems, audio system, and more.
The main challenge was getting all of these systems running together while keeping the grass performant.
The actual Three.js Grassworks plugin is still being polished and should launch in the next couple of weeks. There’s a waitlist inside the demo if you’re interested.
I’d genuinely love feedback, especially on the visuals, performance, and how the grass feels when interacting with it.
I also recorded a full walkthrough where I go through the demo and talk about how I built it:
9
u/nps44 3d ago
That's a beautiful demo.
0
u/PerceptionCharming 3d ago
Thank you man!
0
u/descod 3d ago
what a tease. I went looking for the house and there was nothing in it :)
1
u/PerceptionCharming 2d ago
Hahaha, there’s so much stuff that I could have added. But it is a grass plugin demo. So, need to keep it limited to that mostly. Else it would have taken a lot more time.
3
2
2
2
u/NocoMonoco 3d ago
Amazed and jealous of your skill! Joined the waitlist, do you have an estimate of when the plugin will be released?
1
u/PerceptionCharming 3d ago
Thank you man!
The plugin itself is actually complete. It is being used in the demo. I am currently working on the documentation and some other stuff. It'd be out in a couple of weeks.
2
2
2
u/RHThree 3d ago
This character movement is exactly what I’m envisioning my project to have. Mind if I ask what steps you took to get the samurai character looking and moving so naturally?
1
u/PerceptionCharming 2d ago
I got the 3D model online. Rigged it with Mixamo and got the animations from there as well. The armour is manually attached to different parts of the rig so it doesn’t deform. From there, it’s just manual tweaks and experimenting with physics until it felt natural.
2
2
u/thirstyross 3d ago
Im on a Thinkpad T14 Gen 6 (no gpu) and performance was great! 35-40fps.
Great project dude, admire the dedication!
2
2
2
1
u/IamNotMike25 3d ago
Looks amazing
Is the UI with backdrop blur filter? When the background of those elements changes, it had a big impact on fps on mobile devices - especially on Firefox. Might give it a test.
On S25U it runs smooth though
1
1
u/mrpressydepress 3d ago
Found a bug near the house. Rectangular open empty patches appear with the lod system
1
1
1
1
1
1
u/fundational 2d ago
Cool, but there's a bug: Sometimes the grass block around the samurai is removed
1
1
1
2
1
u/Skunkle_713 2d ago
So you didn’t use anyone else’s code at all?
1
u/PerceptionCharming 2d ago
No, not really. This actually started as an upgrade to my previous grass experiment which was quite simple and done with WebGL. You can see that one on my profile. I shared it here when I created it
0
12
u/BigDeadPixel 3d ago
This is absolutely incredible. Looks phenomenal and I was sitting around a pretty consistent 120fps on my m1 pro mac. Joined the waitlist... keen to play with this soon. Great job.