Ping-pong buffer in p5js shader

p5.js Coding Questions
1

Hello everyone,

I need help to figure out how to use multiple buffers in shader. (within p5js)

First, this is the code that I’ve wrote so far.
https://editor.p5js.org/exusquam/sketches/ELEBXQ174

Below is the same code,
<sketch.js>

let shaderGraphics;
let sh;
let dataShader;
let buf01, buf02;


function preload(){
    sh = loadShader('shader.vert', 'shader.frag');
    dataShader = loadShader('shader.vert','data.frag');
}

function setup(){
    pixelDensity(1);
    createCanvas(windowWidth, windowHeight, WEBGL);
    shaderGraphics = createGraphics(windowWidth, windowHeight, WEBGL);
    shaderGraphics.shader(sh);

    buf01 = createGraphics(windowWidth, windowHeight, WEBGL);
    buf02 = createGraphics(windowWidth, windowHeight, WEBGL);
    buf01.shader(dataShader);
    buf02.shader(dataShader);
    buf01.clear();
    buf02.background(1);
}

function draw(){
    buf01.shader(dataShader);
    dataShader.setUniform("backbuffer",buf02);
    dataShader.setUniform("resolution",[windowWidth,windowHeight]);
    buf01.clear();
    buf01.quad(-1,-1,1,-1,1,1,-1,1);
    [buf01, buf02] = [buf02, buf01];

    resetShader();

    shaderGraphics.shader(sh);
    sh.setUniform("resolution", [windowWidth,windowHeight]);
    sh.setUniform("data", buf01);
    shaderGraphics.quad(-1,-1,1,-1,1,1,-1,1);

    image(shaderGraphics,width*-0.5, height*-0.5);

}

<data.frag>

precision highp float;

varying vec2 vTexCoord;
uniform vec2 resolution;
uniform sampler2D backbuffer;

void main(){
    vec2 st=gl_FragCoord.xy/resolution;
    vec3 data=texture2D(backbuffer,vTexCoord).rgb;

    vec3 color = vec3(data.r+0.01);
    if(color.r>1.0) color = vec3(0.0);
    
    
    gl_FragColor=vec4(color,1.);
}

<shader.frag>

precision highp float;

varying vec2 vTexCoord;
uniform vec2 resolution;
uniform sampler2D data;

void main(){
  vec2 st=gl_FragCoord.xy/resolution;
  vec3 back=texture2D(data,vTexCoord).rgb;

  vec3 color = back;
  gl_FragColor=vec4(color,1.);
}

With this code, I was trying to use a simple ping-pong buffer that just adds up a small amount of increment of the grayscale pixel color.

I guess I know the right steps to do it but it doesn’t work as expected somehow.
Could there be something that I’m missing?

1 Like