mrdoob/three.js — Issue #1080: composer and transparent background
Author: ipfix
Created: 2012-01-12 01:39:06+00:00
State: open

Hello,

I recently discover and use threejs for a personal project and I had 0 problem before use the composer for a blur effect trying to make effect like this : http://wonderfl.net/c/dqfG .

Actually i have a gradient background made in css3 and all works great but when i add the bloomEffect all the WebGL Scene is black opaque and we can't see the background...

My code of composer :

renderer.autoClear = false;
var renderModel = new THREE.RenderPass( scene, camera );
var effectBloom = new THREE.BloomPass( 3 );
var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );

effectScreen.renderToScreen = true;

composer = new THREE.EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectScreen );

and the render loop :

renderer.clear();
composer.render();

How can I apply the composer for blur wihout lost the transparency or I should use another way ?

Thank you in advance !