how to get the texture of a shader in p5js

Question

I have two simple shaders in p5js, and I'd like to pass the output of the first as a texture input on the second.

I thought hacking the camera example would do the trick but I can't find how to retrieve the texture of the first shader.

My naïve implementation doesn't work:

  ...
  shader2.setUniform('tex0', shader1);
  ...

// get texture from previous shader
uniform sampler2D tex0;

// grab texcoords from vert shader
varying vec2 vTexCoord;

void main() {
    vec2 uv = vTexCoord;
    uv.y = 1.0 - uv.y;
    vec4 tex = texture2D(tex0, uv);
    gl_FragColor = vec4(tex.rgb, 1.0);
}

error:

Uncaught TypeError: o is undefined
    Texture http://127.0.0.1:5500/libraries/p5.min.js:3
    getTexture http://127.0.0.1:5500/libraries/p5.min.js:3
    setUniform http://127.0.0.1:5500/libraries/p5.min.js:3
    draw http://127.0.0.1:5500/sketch.js:24
    redraw http://127.0.0.1:5500/libraries/p5.min.js:3
    _draw http://127.0.0.1:5500/libraries/p5.min.js:3
    _draw http://127.0.0.1:5500/libraries/p5.min.js:3
    _draw http://127.0.0.1:5500/libraries/p5.min.js:3
    _draw http://127.0.0.1:5500/libraries/p5.min.js:3
    _runIfPreloadsAreDone http://127.0.0.1:5500/libraries/p5.min.js:3
    _decrementPreload http://127.0.0.1:5500/libraries/p5.min.js:3
    t http://127.0.0.1:5500/libraries/p5.sound.min.js:2
    promise callback* http://127.0.0.1:5500/libraries/p5.sound.min.js:2
    _ http://127.0.0.1:5500/libraries/p5.min.js:3
    _ http://127.0.0.1:5500/libraries/p5.min.js:3
    [261]</< http://127.0.0.1:5500/libraries/p5.min.js:3
    promise callback*[261]< http://127.0.0.1:5500/libraries/p5.min.js:3
    u http://127.0.0.1:5500/libraries/p5.min.js:3
    u http://127.0.0.1:5500/libraries/p5.min.js:3
    [248]< http://127.0.0.1:5500/libraries/p5.min.js:3
    u http://127.0.0.1:5500/libraries/p5.min.js:3
    i http://127.0.0.1:5500/libraries/p5.min.js:3
    <anonymous> http://127.0.0.1:5500/libraries/p5.min.js:3
    <anonymous> http://127.0.0.1:5500/libraries/p5.min.js:3
    <anonymous> http://127.0.0.1:5500/libraries/p5.min.js:3

I'm not even sure what I'm trying to do is possible with p5

Answer 1

You're missing a step here: you can't pass the shader object directly to an other shader. You should create an offscreen graphics buffer with createGraphics ( doc ), apply the first shader to it, then pass the buffer to the second shader.

ex:

setup(){
  // ...
  buffer = createGraphics(width, height, WEBGL);
  // ...
}
draw(){
  // ...
  buffer.shader(shader1);
  buffer.rect(0,0,width, height);
  shader2.setUniform('tex0', buffer);
}