Multiplying small numbers in shader causes strange behaviour


I’m trying to create a fading effect on a masked image/graphics. I’ve implemented it here: p5.js Web Editor

I’m trying to slow down the effect even more. Unfortunately, the shader behaves a little strangely when increasing the multiplier even further in gl_FragColor.a = color.a * 0.997;, say 0.999, the alpha seems to become 1.0.

I’ve already tried to increase precision using highp.

Help with this would be highly appreciated. Thanks.

As described in the Frambuffer p5 library, it seems to be a texture precision issue: GitHub - davepagurek/p5.Framebuffer: A library for efficiently drawing to a texture in p5 WebGL mode.

The library seems to solve the issue giving this example: p5.js Web Editor

Unfortunately, there is no example of implementing a custom shader yet. I’ve posted an issue on Github: How to implement a custom shader? · Issue #28 · davepagurek/p5.Framebuffer · GitHub

Some more information that might be related:

1 Like

I’ve managed to implement it somehow: p5.js Web Editor

The effect is still not working the way I like, though. I don’t seem to have control of the fade duration beyond a certain point, even with very small numbers.

This is another improved version without using the library:

It’s not ideal since it’s using a slow if-then statement in the shader, and I guess could be even smoother.

I would still love to know how to solve the issue with the library, as it would be more flexible and potentially faster. Any help is very much appreciated! :pray:

Here are two more versions working towards my goal, that I would like to share. Both without using the library.

With a transparent source, using more passes to have more control over the fade duration:

Using a gradient brush, which is pretty close to what I want: p5.js Web Editor

Thanks to @diroru for all of his help with this.