@johh/three-effectcomposer

three.js's EffectComposer ported to ES6

Stats

StarsIssuesVersionUpdatedCreatedSize
@johh/three-effectcomposer
900.1.0a year ago3 years agoMinified + gzip package size for @johh/three-effectcomposer in KB

Readme

three.js EffectComposer

three.js version GitHub issues

Note for three >= v0.105.0

Please note, that starting with three.js r105, EffectComposer is included in the three package and installing @johh/three-effectcomposer is no longer necessary.

It can be accessed via

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';

This package is deprecated and unmaintained.

Installation

yarn add @johh/three-effectcomposer
npm i --save @johh/three-effectcomposer

Description

three.js's r105 EffectComposer ported to ES6 for easy importing.

Usage

import { WebGLRenderer } from 'three';
import EffectComposer, {
    Pass,
    RenderPass,
    ShaderPass,
    TexturePass,
    ClearPass,
    MaskPass,
    ClearMaskPass,
    CopyShader,
} from '@johh/three-effectcomposer';

const renderer = new WebGLRenderer();
const composer = new EffectComposer( renderer );

Differences to the original

  • This package does not rely on namespace pollution, so THREE.EffectComposer, THREE.Pass, etc. remain undefined.

  • An additional Pass, called RenderingPass, is exported. It includes a standard rendering setup, i.e. a scene (as this.scene), including an orthographic camera (this.camera) and quad (this.quad). This is useful if your custom pass requires said setup, but a customized rendering function. Since r103 this pass has been made redundant by Pass.FullScreenQuad, but remains for backwards compatibility.

Testing

Testing is done with mocha in a Chromium environment using puppeteer.

The structure of each class, as well as its visual output, is compared to its original counterpart.

Due to the virtually infinite number of possible combinations it is pretty much impossible to cover every use case.

Credits

This package is heavily based on code that was originally written by alteredq and is licensed MIT © 2010-2019 three.js authors.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.