GitHub - JakeDluhy/postprocessing: A post processing library that provides the means to implement 2D filter effects for three.js.

A post processing library that provides the means to implement 2D filter effects for three.js.

Installation

npm install postprocessing

Usage

Please refer to the usage example of three.js for information about how to setup the renderer, scene and camera.

Basics

import { Clock, PerspectiveCamera, Scene, WebGLRenderer } from "three";
import { EffectComposer, GlitchPass, RenderPass } 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);

const clock = new Clock();

(function render() {

	requestAnimationFrame(render);
	composer.render(clock.getDelta());

}());

Custom Passes

import { Pass } from "postprocessing";
import { MyMaterial } from "./MyMaterial.js";

export class MyPass extends Pass {

	constructor() {

		super();

		this.name = "MyPass";
		this.needsSwap = true;
		this.material = new MyMaterial();
		this.quad.material = this.material;

	}

	render(renderer, readBuffer, writeBuffer) {

		this.material.uniforms.tDiffuse.value = readBuffer.texture;
		renderer.render(this.scene, this.camera, this.renderToScreen ? null : writeBuffer);

	}

}

See the Wiki for more information.

Included Filters

Contributing

Please refer to the contribution guidelines for details.

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.