Can someone help me optimize my smoke-effect?

Question

I am developing a mobile game where you can trigger buildings to be built on certain areas. During the buildprocess I mark the area that will be used for building with a smoke effect:

So at times it is possible that a large area of the screen is covered with this effect. While this works pretty well on current phones it is often too much to handle on phones that are a few years older. On android you get low framerates on those and on iOS it can decrease the battery quite fast on phones older than iPhone 8. I was told from a nice godot dev that the cause of my problems is propbably my quads with semi transparent textures overlapping, which makes them mess with the occlusion. I tried finding other ways to create an effect that looks like smoke, but wasn't successfull.
Can someone out there help me or give me some tips how I could create a fitting smoke effect that works better on mobile? I created a simple project just containing my effect:

https://github.com/Tobi-La/SmokeEffectOptimization

Thanks,
Tobias

Answer 1

Hey, sorry it took so long to get an answer to your question. Just stumbled upon it and I think I have a few ideas.

Older mobile GPUs have many shortcomings but the most likely culprit in this case is fillrate. When you draw pixels semitransparent (as you do with smoke) the GPU needs to fetch the current framebuffer pixel and blend it with your new semitransparent pixel. This causes a lot of extra memory transfers.

To reduce this problem you can adjust the size of smoke particles so they do not overlap so much. Also try to use lower resolution smoke textures. GPU caching makes lower resolution textures faster to draw because more of them fit in cache at once.

Another trick that might help is to draw all smoke to a low resolution offscreen buffer and then draw that to the screen.
Check this manual page for an idea about how to set this up:
https://docs.godotengine.org/en/stable/tutorials/viewports/using_viewport_as_texture.html