Hello guys !
I’m working on project where i need to add 100000+ grass with stable 60 fps. And we need to add grass animation also based on the air speed . I created the basic grass field but facing so much issue in maintaining 60+ fps along with that much grassblades. Using grassbaldes is mandatory.
Please anyone help me with that.
Git link for the above project.
Hello !
I would advice to create a Playground so that it’s easier for us to have a look (git clone + npm install + npm run dev + rm all after a test does take time 
)
On my side I have a solid 120 fps. Maybe you are targetting a specific hardware ?
Anyway, I would say your use of thin instances it the right way 
Something you can try is creating several (almost parallel with a bit of random) blades for the basic mesh, and then instanciate this multi blade (dynamic) mesh. Most likely you won’t need to have all of each blade physically independant, and you could save a lot of compute for the same total number of blades on the screen
This thread may help - Grass, butterflies and trees with instancing
I have used this in production products. It works really well for flat areas, for hilly areas I have an other method.
But this is the only way you are going to get that much grass to render without much impact.
It also has texture maps for growth height and color, so you can do “painted” areas on the grass for sports markings.
Also if you design really calls for that many independent blades of grass then its time to start thinking realistic. You will need to do a LOD system that only is really rendering a couple thousand blades then a couple hundred quads with some grass cut out and move that system with your camera. There is never really a reason to have to actually have 100000 blades of grass visible and calculated at once. You would bever see that many and as you zoom out they don’t have enough pixel space to even be readable so you use placeholders.
Grass, Shadows, Reflected Light, Mirrors, Water, Volumetrics are all super technical sub fields that all have their own performance concerns and design principles in order to use them efficiently. If they were “easy” then every game would have sprawling fields of uncountable blades of grass, but even AAA don’t so don’t expect webGL to be able to.
Thanks i’ll refer to this.
Thanks, I’ll refer to this.
I understood this code properly, but the issue is how can i get more FPS. now on create patch of
const patchSize = 20;
const patchResolution = patchSize * 10;
Getting proper fps in my 2050TI NVIDIA graphics laptop. Can anyone suggest some changes in
so that i can make more big patch .
const patchSize = 100;
const patchResolution = patchSize * 10;
its dropping the grass so much badly.
Claude suggests a number of interesting optimizations. Maybe these ideas can inspire you to take a closer look in one direction or another to find the best one for you.
I have asked him to generate a quick fps version for me.
Grass field | Babylon.js Playground
Thank you so much i’ll take reference of this.