hughsk/three-effectcomposer

@alteredq's EffectComposer plugin for three.js ported for use with Browserify

three-effectcomposer

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.

Installation

npm install three-effectcomposer

Running the Demo

Install the dependencies and build the script:

git clone [email protected]:hughsk/three-effectcomposer.git
cd three-effectcomposer
npm install -d
npm run demo

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

Usage

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

init()
animate()

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)
  composer.addPass(effect)

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

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

three-effectcomposer's Issues

How to add a scene to my renderer that is not affected by my EffectComposer ?

Hello,

I'm using the EffectComposy to create a mask on my renderer. It works fine : I have my mask and into it a scene.
Basically I would like to have another scene as a background for my canvas but my new scene doesn't appear and I think it's because I call my whole renderer like this :

var composer = new THREE.EffectComposer(renderer, ...

Do you know what can I do ?
Thank you very much, I think I want to avoid creating a new renderer.

Fix for "don't use render texture property"

Hello,

Here is the fix for the warning for everyone who got the package from npm:
three.webglrenderer.setTexture2D: don't use render targets as textures. Use their .texture property instead.

Locate your shaderpass file in your node_modules, and search for this line:
this.uniforms[ this.textureID ].value = readBuffer;

Next, replace that line with this:
this.uniforms[ this.textureID ].value = readBuffer.texture;

As you can see all that is added to this line is .texture to the readBuffer to fix the warning.

ES6 Module load method

Is it possible to load this in an ES6 style? I can't see how to pass THREE as an option in this case