three-fx-composer v0.1.4

THREE FX Composer

A modular way to add post processing to your threejs projects.

Included passes

Many of which come from Wagner.

• Barrel Blur
• Brightness
• Invert
• Noise
• Symmetry

Installation

yarn add three-fx-composer

Usage

Shortened for brevity

import THREE from 'three'
import FXComposer, { RenderPass, ShaderPass, BrightnessPass } from 'three-fx-composer';

class Demo {

	constructor(){
		// Composer
	  composer = new FXComposer(renderer);

		// Passes
		const scenePass = new RenderPass(scene, camera, false, 0x000000, 0);
		composer.addPass(scenePass);

		const pass = new BrightnessPass();
    pass.renderToScreen = true;
    composer.addPass(pass);
	}

	update = () => {
		requestAnimationFrame(this.update);
		renderer.clear();
		composer.render();
	}

	onResize( ){
		renderer.setSize(window.innerWidth,  window.innerHeight);
		composer.setSize(window.innerWidth,  window.innerHeight);
	}
}
export default new Demo();

Running

To test the composer locally run yarn start.

This will start a local development server from the examples directory.

Credits

Code used from:

• Silvio
• Spite
• alteredqualia