https://github.com/neiltron/double-buffer

Simple FBO utility
https://github.com/neiltron/double-buffer

Last synced: 14 days ago
JSON representation

Simple FBO utility

• Host: GitHub
• URL: https://github.com/neiltron/double-buffer
• Owner: neiltron
• Created: 2021-05-17T00:24:25.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-01T15:08:53.000Z (about 3 years ago)
• Last Synced: 2024-10-26T20:28:16.398Z (19 days ago)
• Language: JavaScript
• Size: 56.6 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DoubleBuffer

Simple utility for bootstrapping a ping-pongable framebuffer.

## Usage

Install via npm:

```

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

```

### Create FBO

```js

import DoubleBuffer from 'double-buffer';

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

```

### Setup plane for simulation

```js

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

```js

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)

```js

  // 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;

```