LÖVE

'Tis about shaders.

1) How can I make a moving wavy pattern like

Maybe a bunch of different colors.

2) Why do shaders slow down the fps so much. A small issue but really a problem for android. The thing is that I do see android games use shaders fine so why?

3) Is there a way to make them faster. Like maybe copy the "shaded" image to a canvas? Or apply it to a small image?

Gunroar:Cannon() wrote: ↑Sun Aug 21, 2022 8:12 pm 'Tis about shaders.

1) How can I make a moving wavy pattern like

Maybe a bunch of different colors.

2) Why do shaders slow down the fps so much. A small issue but really a problem for android. The thing is that I do see android games use shaders fine so why?

3) Is there a way to make them faster. Like maybe copy the "shaded" image to a canvas? Or apply it to a small image?

1) Math. Find a function that gives you the pixel position of such a pattern for a given pixel texture and time: f(uv, t) = xy. Invert it (by that I mean find f(xy, t) = uv) and use it to sample the texture for each pixel of the screen. Of course the function needs to be invertible that way. The image that you've posted looks pretty complex for a function, as it looks like it has some kind of 3D to it.

Alternatively, if you want something cyclic, you can pre-render an animated displacement map (an image where each pixel's colour is actually used as data that represents the coordinates of the UVs of the texture to draw). If the animation fits in the GPU comfortably, you can for example use a texture array for the animation frames.

2) Löve has a default shader that doesn't slow down the FPS that I know. If other shaders do, it's the problem of these shaders, not of shaders in general.

3) Understand how GPUs work, how shaders work internally, and optimize the shader so that it's fast. Before you ask, I'm not there, and I don't know of any reference; but as an example, I recently I read this article where a guy spends a lot of time optimizing an outline shader until he gets something that he considers to be of satisfying speed: https://bgolus.medium.com/the-quest-for ... 82ed442cd9

Good reply by pgimeno, I would like to add a few things:

1. It may be possible to achieve the desired effect using a combination of Moiré patterns and shaders. It may also be possible using meshes where the mesh UV coordinates could be used to distort the texture.

2. An average 1920x1080 monitor has 2073600 pixels and running shader code for each and every pixel takes a lot of GPU power. You have to profile and optimize the code of your shader in order to avoid drops in the frame rate.

3. Yes of course. The same effect can be achieved using different methods. Like for example, you can make a video of your image being distorted and draw the video instead of calculating the distortion in real time.

Wow, nice answers. It runs slower for moonshine shaders (especially ... Godsray )

I'll look into it. Thanks.

Also keep in mind switching shaders many times a frame is has a big impact on performance. In general you want to try and make as few changes to the graphics context as possible, so if you have many objects using different shaders, it's a good idea to batch them based on shader (I believe Love does some automatic batching under the hood but I'm not sure how the logic works). For full screen shaders this probably won't be your issue.

Ah, moonshine calls the shader once (per draw...for only one pic) I think so that's not where the issue is from this time.

On shader code performance another thing that's worth to keep in mind is that, because of how GPUs work, a whole bunch of conditional if-statements in your shader code could have heavy performance implications. There's a decent Stack Overflow answer here that addresses this. Here is a set of handy functions with which to optimize simpler conditionals.

Of course, modern GPUs probably don't chug as much as some older ones, but unnecessary branching still carries its penalties when done heavily per-frame.

As it is written in the Readme of moonshine:

Is this efficient?
Of course, using moonshine is not as efficient as writing your own shader that does all the effects you want in the least amount of passes, but moonshine tries to minimize the overhead.
On the other hand, you don't waste time writing the same shader over and over again when using moonshine: You're trading a small amount of computation time for a large amount of development time.

So moonshine is super easy to use but not optimized for small gpus like the ones on old mobiles.
One thing that worth testing is changing the size of the moonshine shaders like this: I'm pretty sure it has a big impact on performance.

glitchapp wrote: ↑Tue Aug 23, 2022 6:01 am I'm pretty sure it has a big impact on performance.

glitchapp...gletchup...ketchup ...YES!! You're wonderful!!!

Though I'll still keep the optimization from the other posts in mind.

Gunroar:Cannon() wrote: ↑Tue Aug 23, 2022 8:08 pm

glitchapp wrote: ↑Tue Aug 23, 2022 6:01 am I'm pretty sure it has a big impact on performance.

glitchapp...gletchup...ketchup ...YES!! You're wonderful!!!

Though I'll still keep the optimization from the other posts in mind.

You can call me Mr.Ketchup if you want

It was not sure if you know how to write shaders and for those who can not (like me) I use libraries like moonshine.

Just in case you are willing to learn to write shaders someone shared a very nice tool to visualize math that could be handy when writing them :https://tic80.com/play?cart=1739

I hope it helps!