@alteredq's EffectComposer plugin for three.js ported for use with Browserify
Latest commit 3c2cb3c Jan 28, 2013 @hughsk First commit
Failed to load latest commit information.
lib First commit Jan 28, 2013
.gitignore First commit Jan 28, 2013
.npmignore First commit Jan 28, 2013
README.md First commit Jan 28, 2013
demo.js First commit Jan 28, 2013
index.html First commit Jan 28, 2013
index.js First commit Jan 28, 2013
package.json First commit Jan 28, 2013



Browserify-friendly version of THREE.EffectComposer, which offers a quick GLSL post-processing implementation.

Full credit goes to @alteredq for writing this, the original source can be found here.


npm install three-effectcomposer

Running the Demo

Install the dependencies and build the script:

git clone git@github.com:hughsk/three-effectcomposer.git
cd three-effectcomposer
npm install -d
npm run demo

Then just open up index.html to see the results.


This module doesn't touch the THREE object, instead you access the different pass classes through EffectComposer. For a working example, see demo.js.

var THREE = require('three')
  , EffectComposer = require('three-effectcomposer')(THREE)
  , DotScreenShader = require('./shaders/dotscreen')
  , RGBShiftShader = require('./shaders/rgbshift')

var renderer
  , scene
  , camera
  , composer


function init() {
  renderer = new THREE.WebGLRenderer
  scene = new THREE.Scene
  camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000);

  // ...
  // The rest of your setup code, as per usual
  // ...

  // Create your composer and first RenderPass
  composer = new EffectComposer(renderer)
  composer.addPass(new EffectComposer.RenderPass(scene, camera))

  // Redraw with a shader
  var effect = new EffectComposer.ShaderPass(DotScreenShader)

  // And another shader, drawing to the screen at this point
  var effect = new EffectComposer.ShaderPass(RGBShiftShader)
  effect.renderToScreen = true

// Instead of calling renderer.render, use
// composer.render instead:
function animate() {