Multiplying small numbers in shader causes strange behaviour

p5.js Coding Questions
1

Hi,

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.

2

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
3

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.

4

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:

5

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.