How to implement a custom shader?

[jvolker]

I'm trying to implement a fade-out effect of a masked image. Seems like I have a precision problem with the textures trying to get a slow fade effect. Now I found this library :) and like to implement it with my code: https://editor.p5js.org/jvolker/sketches/dqMQVI6Fl

I'm stuck with adapting the floating-point texture example: https://editor.p5js.org/jvolker/sketches/1cpxckP_- to my code. How to apply custom shaders with this FBO library? I couldn't find an example.

As soon as I write

fbo.draw(() => {
    shader(theShader);
    //rect(0,0,width, height);
  }) 

I get TypeError: Cannot read properties of undefined (reading 'width').

For reference, I've previously posted in the p5 forum: https://discourse.processing.org/t/multiplying-small-numbers-in-shader-causes-strange-behaviour/40949

Thanks a lot in advance.

[jvolker]

Okay, I've managed to implement it somehow: https://editor.p5js.org/jvolker/sketches/WGod7nyus

The key is to use fbo.color when applying it to the shader, which removes the errors:

fbo = createFramebuffer();

theShader.setUniform('u_texture', fbo.color);

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.