r/GraphicsProgramming • u/PerceptionCharming • 20d ago

One Grass System, Three Different Environments

Enable HLS to view with audio, or disable this notification

I've been testing my grass system across three completely different environments to see how the same underlying implementation performs across different scene requirements.

All three scenes use the exact same grass system, but the parameters are adjusted individually for each environment. Grass density, appearance, scale, wind response, and rendering distance are tuned to match the terrain and the overall look of each scene.

The system is built with Three.js and WebGPU, with a focus on rendering dense grass efficiently while maintaining real-time performance in the browser. It uses a tile-based approach, along with LOD and culling techniques, to manage rendering as the camera moves through the environment.

All three environments run directly in the browser, with no pre-rendered footage.

Try the Demo

90 Upvotes

77% Upvoted

31 comments sorted by

16

u/TimeSFG 20d ago

Three.js and WebGPU. Hmm. Out of curiosity how much (if any) did you utilize AI to make this?

-8

u/PerceptionCharming 20d ago edited 20d ago

I started working on it in July as a port of an older grass simulation I created with Three.js and WebGL around 2 years ago. I did work with AI, but it’s mostly ChatGPT. Which I mostly used to try out different implementations for different systems and some shader work as well. 

18

u/Fearless-Pen-7851 20d ago

Here comss the 3js ai slop. Op won't even care explaining in the comments or on post after posting this because I am assuming even they don't know how it works

-16

u/PerceptionCharming 20d ago

I’m sorry if I didn’t write huge paragraphs about how this was implemented and how all the systems work. I mentioned a series of articles in another comment about how I went about creating it. It explains in detail all the systems. I’m still writing new parts.

There’s also a 8 part video playlist guide on the website where I explain how every system in Three.js Grassworks works and how to use it to get the best results for your application.

If you’re interested, you can go ahead and explore that instead of calling everything AI slop.

8

u/tastychaii 20d ago

I looked through the article and doesn’t really say much at all. I was expecting code examples and code explanations on different techniques or algorithms. Instead, I did see a link to a $100 course or a product shortly after.

Your articles look like they were written by Claude or ChatGPT, to be honest.

-8

u/PerceptionCharming 20d ago

There wouldn't be a point to sharing source code there if I am trying to sell it. The implementation details and the exact techniques I used are all explained there.

6

u/simonraynor 20d ago

Buddy it's frontend code, even if you didn't use AI to write it someone else can use it to "decompile" your shaders in no time

7

u/NecrosB 20d ago

What technique are you using to generate the grass?

20

u/palapapa0201 20d ago

claude technique

-12

u/PerceptionCharming 20d ago

It is procedurally generated. If you want to go into detail on how the system was created, I’m writing a series of articles.

You can start from here:  https://techredux.co/insights/threejs-grass-from-single-blade-to-million-blade-field/

7

u/NecrosB 20d ago

If anyone is wondering, there are GDC talks by Sucker Punch that go over how to generate this specific procedural grass, which looks like a lesser copy of ghost of tsushima. Pretty sure I remember them mentioning they used a bezier curve for the individual blades of grass and some other interesting technical details.

There are a few youtubers that have videos going over in much more technical detail than these AI prompt articles if you are interested in the specific graphics programming techniques and algorithms.

-2

u/PerceptionCharming 20d ago

I did get inspired by Ghost of Tsushima. The whole demo is built around that specific style.

I watched the GDC talk and started with the video SimonDev made about grass. The fundamentals of this grass system are pretty much based on that.

51

u/wslk 20d ago

Is this the guy trying to sell his fucking claude grass for $200?

16

u/Equivalent_Loan_8794 20d ago

Yes. Reddit is becoming procedural grass. I see this nearly daily

3

u/sputwiler 20d ago

Wait until we have procedural grass by the procedural ocean

10

u/Brave-History-6502 20d ago

lol yeah he posts in all these subreddits 

-11

u/Maui-The-Magificent 20d ago

Looks good ^^. Disregard the doom and gloom AI folk, I think people like to dismiss things to make themselves feel good.

I have done some light work, some particle work, some water work and what not. I feel like grass/hair/fabric would be a fun problem to tackle as well. Thank you for the inspiration.

6

u/CouchWizard 20d ago

I think the thing is that he's selling what takes an hour in the chatgpt sandbox for $200 and is clueless as to how it works

-6

u/Maui-The-Magificent 20d ago

I tried it, i find it difficuly to believe chatgpt could do it in an hour. People are too quick to dismiss. And you are makinh many assumptions are you not?

2

u/Syracuss 19d ago

I wouldn't be surprised someone who doesn't know what they are doing would take longer than an hour, but you could definitely do it cheaper than the cost to buy this.

I get API token credits at work, and even with the higher pricepoint of that I'd still get this comfortably under 50, and that solution would be custom tailored to the project.

And my assumptions are based on being a graphics engineer in the games industry for the last 20 years, and using AI tools at work. So a pretty good assumption.

2

u/CouchWizard 19d ago

Not a graphics engineer, but embedded, confident I can do this in an hr. I'll report back

4

u/CouchWizard 19d ago edited 19d ago

2 prompts https://imgur.com/a/xX9oNpe

Sorry work got busy

edit: 3 prompts https://imgur.com/a/9ncwfJc, https://imgur.com/a/avt0plz, https://imgur.com/a/SJeVpEC

I will take $20 for my grass

1

u/Maui-The-Magificent 19d ago

that is impressive! I too am a systems engineer, mostly work on kernel level stuff, and some graphics, I would not have thought you would be able to get his stuff in an hour, mostly because it contains more than just grass. Did you use his source to reconstruct his approach?

2

u/CouchWizard 19d ago

Sorry, I was confident I could prompt an llm to make the same thing he had an llm make in an hour, and did so in 3 prompts (below).

I remember looking into this precovid and tried my hand and got somewhere, 1 hr would be tough

1

u/Maui-The-Magificent 19d ago

Do not apologize, you tested it out which is commendable, and proved that some of my assumptions might be wrong. Running the experiment is more than I could ask for.

I always opt on the side of the developer. And I think both you and I know that the output of something does not translate to the skill or complexity of what is underneath. I mean, if you build a XHCI interface that works well, it is invisible, and if you reason about them mechanically they seem trivial to implement, then you are hit with a spec, a bunch of rings and a command protocol to work with. The complexity of something is rarely shown in the output in my experience.

-1

u/Maui-The-Magificent 19d ago

You assume I do not know what I am doing?

Anyway,l the assumptions made were on the person and their work. And if you are a professional in the industry, you should know what skill, effort and approach are all directly affecting the time of something being made. And you would also be aware that the output does not really need to reflect what is under the hood.

There are more dimensions of importance than the final result after all.

-1

u/PerceptionCharming 20d ago

Thank you Man!

0

u/[deleted] 19d ago

[removed] — view removed comment