three-effectcomposer-es6

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

Full credit goes to @alteredq for writing this, and to @hughsk for the Browserify-friendly version. The original source can be found here.

Installation

npm install three-effectcomposer-es6

Usage

import { WebGLRenderer, Scene, PerspectiveCamera } from 'three'
import EffectComposer, { RenderPass, ShaderPass, CopyShader } from 'three-effectcomposer-es6'
 
class Main {
  constructor () {
    const renderer = new WebGLRenderer()
    const scene = new Scene()
    const camera = new PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000)
 
    // When you've made your scene, create your composer and first RenderPass
    this.composer = new EffectComposer(renderer)
    this.composer.addPass(new RenderPass(scene, camera))
 
    // Add shaders! Celebrate!
    // const someShaderPass = new ShaderPass(SomeShader)
    // this.composer.addPass(someShaderPass)
 
    // And draw to the screen
    const copyPass = new ShaderPass(CopyShader)
    copyPass.renderToScreen = true
    this.composer.addPass(copyPass)
  }
 
  animate () {
    // Instead of calling renderer.render, use
    // composer.render instead:
    this.composer.render()
    window.requestAnimationFrame(this.animate)
  }
}
 
const main = new Main()
main.animate()