CODEWITHSUNDEEP
three.jspost-processing
Kachwang
Kachwang

Reputation: 21

Cannot get Bloompass and EffectComposer working together in Three.js

I cannot get post-processing to work with EffectComposer and BloomPass

I've looked at the past stack overflow posts including making sure that there is a renderpass, bloompass, and then a copyshader, with rendertoscreen set to true on the last pass, but nothing seems to work.

Here is my code: (I render a simple cylinder earlier)

var renderModel = new THREE.RenderPass( scene, camera );
var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
var effectBloom = new THREE.BloomPass ( 1, 25, 5);
effectCopy.renderToScreen = true;
renderer.autoClear = false;
var composer = new THREE.EffectComposer( renderer );
composer.setSize( width,height );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass(effectCopy);

and then I render the scene with

composer.render( 0.05 );

instead of 

renderer.render( scene, camera );

Expected result is just a cylinder rendered in the scene(when I comment out adding the bloom and copy pass to the effect composer) Cannot post images because this is my first question, but it renders a light blue cylinder with a black background.

But instead I just get a black screen when I add the passes.

I have tried doing different combinations such as just the rendermodel and bloom effect but it still doesn't work.

I am using webgl2 if that has any significance.

Upvotes: 1

Views: 1244

Answers (1)

Kachwang
Kachwang

Reputation: 21

In case anyone is having trouble and this solution works:

It ended up being some problem with the three.js I was importing from a cdn. (https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.js)

I changed to a minified version of three.js I had downloaded earlier and post-processing started to work again.

Hopefully, this helps anyone with similar problems.

Upvotes: 1

Related Questions