A post processing library that provides the means to implement 2D filter effects for three.js.
Installation
$ npm install postprocessing
Usage
// Attention: Three is not yet an ES6 module! import { WebGLRenderer, Scene, PerspectiveCamera } from "three"; import { EffectComposer, RenderPass, GlitchPass } from "postprocessing"; const composer = new EffectComposer(new WebGLRenderer()); composer.addPass(new RenderPass(new Scene(), new PerspectiveCamera())); const pass = new GlitchPass(); pass.renderToScreen = true; composer.addPass(pass); let lastTime = performance.now(); (function render(now) { requestAnimationFrame(render); composer.render((now - lastTime) / 1000); lastTime = now; }());
In order to create your own pass, simply extend the Pass class:
import { Pass } from "postprocessing"; import { MyMaterial } from "./materials"; export class MyPass extends Pass { constructor() { super(); this.needsSwap = true; this.material = new MyMaterial(); this.quad.material = this.material; } render(renderer, readBuffer, writeBuffer) { this.material.uniforms.tDiffuse.value = readBuffer.texture; if(this.renderToScreen) { renderer.render(this.scene, this.camera); } else { renderer.render(this.scene, this.camera, writeBuffer, false); } } }
Passes don't have to use the buffers that are provided in the render method. Writing self-contained render-to-texture passes is also a feasible option.
Included Filters
Contributing
Maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.
License
This library is licensed under the Zlib license.
The original code that this library is based on, was written by alteredq, miibond, zz85, felixturner and huwb and is licensed under the MIT license.
The film effect incorporates code written by Georg Steinrohder and Pat Shearon which was released under the Creative Commons Attribution 3.0 License.