Package Exports

postprocessing
postprocessing/src/passes/render
postprocessing/src/passes/shader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postprocessing) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Post Processing

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

Preface

This module uses modern ECMAScript features and requires one of the following browsers:

Chrome ≥ 42
Firefox ≥ 45
IE Edge ≥ 13

Semantic versioning is used in this module to indicate whether an update introduces breaking changes. However, backwards-compatibility regarding ECMAScript versions is entirely neglected in favor of cleaner code and development convenience.

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

let composer = new EffectComposer(new WebGLRenderer());
composer.addPass(new RenderPass(new Scene(), new PerspectiveCamera()));

let 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 passes, you simply need to 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 feasable option.

Included Filters

Documentation

API

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.