three-effectcomposer-transparent
v0.0.1
Published
@alteredq's EffectComposer plugin for three.js ported for use with Browserify with RGBA format
Downloads
3
Maintainers
Readme
three-effectcomposer-transparent
Modified: RGBA format (allows postprocessing with transparent textures)
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()
};