https://github.com/hughsk/three-effectcomposer

@alteredq's EffectComposer plugin for three.js ported for use with Browserify
https://github.com/hughsk/three-effectcomposer

Last synced: 12 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/hughsk/three-effectcomposer
• Owner: hughsk
• Created: 2013-01-28T03:57:55.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2019-03-12T02:09:58.000Z (over 5 years ago)
• Last Synced: 2024-04-14T13:06:04.637Z (7 months ago)
• Language: JavaScript
• Size: 95.7 KB
• Stars: 49
• Watchers: 4
• Forks: 23
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# three-effectcomposer #

Browserify-friendly version of `THREE.EffectComposer`, which offers a quick

GLSL post-processing implementation.

Full credit goes to [@alteredq](http://github.com/alteredq) for writing this,

the original source can be found

[here](http://mrdoob.github.com/three.js/examples/webgl_postprocessing.html).

## Installation ##

``` bash

npm install three-effectcomposer

```

## Running the Demo ##

Install the dependencies and build the script:

``` bash

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`](https://github.com/hughsk/three-effectcomposer/blob/master/demo.js).

``` javascript

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

};

```