Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including three-effectcomposer with all npm packages installed. Try it out:

var threeEffectcomposer = require("three-effectcomposer")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

three-effectcomposer v0.0.1

@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 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.

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()
};

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free