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
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);
}