framebuffer example

// sketch.js
let layer, fogShader, fog;
function preload() {
  fogShader = loadShader('fog.vert', 'fog.frag');
}

function setup() {
  createCanvas(200, 200, WEBGL);
  layer = createFramebuffer();
  fog = color('#b2bdcf');
  noStroke();
}

function draw() {
  // Draw a scene to a framebuffer
  layer.begin();
  clear();
  lights();
  fill('red');
  for (let i = 0; i < 12; i++) {
    push()
    translate(
      sin(frameCount*0.050 + i*1)*50,
      sin(frameCount*0.051 + i*2)*50,
      sin(frameCount*0.049 + i*3)*175-75
    );
    sphere(10);
    pop();
  }
  layer.end();

  // Apply fog to the scene
  shader(fogShader);
  fogShader.setUniform('fog', [red(fog), green(fog), blue(fog)]);
  fogShader.setUniform('img', layer.color);
  fogShader.setUniform('depth', layer.depth);
  rect(0, 0, width, height);
}