WEBGL - Question about grass and performance (with Safari issues)

Hello,
I need to create a project in WebGL 2.0 with a lot of grass. The main problem I have, is performance.

As soon as I add a few grass zones, my performance drops drastically (below 60fps on Chrome, and below 5/10 fps on Safari). At this point, I have a question: how I can achieve a realistic field of grass, without to have very low FPS?

Also, another question: why on Safari everything runs poorly? Do I need to change some options in Unity in order to have a better frame rate?? Thank you.

I’m using Unity 2022.2.10 - URP Shader Pipeline.

Regarding Safari poor performance:

  • it runs on a Mac, they have traditionally poor game performance
  • Apple does not prioritize WebGL since it is seen as a threat to their app stores

You are not going to have a realistic field of grass on WebGL.

1 Like

So right now, it’s impossible to make games on web, that run also on Mac devices?

But what if I have to achieve the most closest thing to that? There should be a way to achieve a garden and put it on a browser… with grass and trees.

Yes. It’ll look more like this though:

https://codesandbox.io/s/3rk1o6
https://webglsamples.org/field/field.html
https://github.com/spacejack/terra

These examples use shaders, these could probably be replicated in Unity. But they also look abstract and repetitive, the third one looks best by far but it also wouldn’t run for me in Chrome.

These examples are about what I would expect at best in a WebGL app. Keep in mind that even though WebGL runs on Desktop with high-end GPUs, the graphic fidelity is limited to what mobile devices could render roughly 10 years ago. And these demos did not have to account for much else than some basic terrain rendering either.