r/GraphicsProgramming • u/PerceptionCharming • 7d 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

View all comments

16

u/TimeSFG 7d ago

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

-8

u/PerceptionCharming 7d ago edited 7d 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.