DoubleBuffer

Simple utility for bootstrapping a ping-pongable framebuffer.

Usage

Install via npm:

npm install -s [email protected]:neiltron/double-buffer.git

Create FBO

import DoubleBuffer from 'double-buffer';

fbo = new DoubleBuffer({ width: canvasSize, height: canvasSize });

Setup plane for simulation

plane = new THREE.Mesh(
  new THREE.PlaneGeometry(canvasSize, canvasSize),
  new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
      // set read texture as input on simulation mesh
      bufferTexture: { value: fbo.read().texture, type: 't' },
    }
  })
);

Setup plane for display

displayPlane = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(canvasSize, canvasSize),
  new THREE.MeshBasicMaterial({
    // set read texture as input on display mesh
    map: fbo.read().texture
  })
);

Update render and swap buffers (in rAF or whatever)

  // set render target to fbo write target and render
  renderer.setRenderTarget(fbo.write());
  renderer.render(scene, camera);
  renderer.setRenderTarget(null);

  // swap read/write buffers
  fbo.swap();

  // set sim material texture to freshly drawn target
  plane.material.uniforms.bufferTexture.value = fbo.read().texture;