Three js EffectComposer + BloomPass not working

Question

Cannot for the life of me figure out what's wrong (especially with how undocumented these two .js files are) but I've included the EffectComposer and BloomPass within my project and am trying to call it like so:

parameters = { bloomStrength: 1.3, bloomFactor: 1.0,}

            var renderPass = new THREE.RenderPass(scene, camera);
            var copyPass = new THREE.ShaderPass(THREE.CopyShader);
            copyPass.renderToScreen = true;

            composer = new THREE.EffectComposer ( renderer );
            composer.addPass(renderPass);
            composer.addPass(copyPass);

            var effectBloom = new THREE.BloomPass ( 3, 25, 5, 256);
            composer.addPass (effectBloom);

BloomPass.js throws an error by itself (not within my code) stating that "Uncaught TypeError: Cannot read property 'prototype' of undefined at BloomPass.js:76"The BloomPass 76 line is as follows:

THREE.BloomPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {

I believe due to this the EffectComposer is also throwing an error for the composer.addPass(effectBloom); line: Uncaught TypeError: pass.setSize is not a function at THREE.EffectComposer.addPass

pass.setSize( size.width, size.height );

Any idea what I'm doing wrong? According to the few examples I'm setting everything up correctly... Any help is greatly appreciated!

Also to mention, if I comment out all these lines in my code and run it, BloomPass.js still throws that error, making me wonder if something is wrong with it? — Turkeydipking, Feb 20 '17 at 10:23
It would be much easier to help you if you set up a [fiddle](http://jsfiddle.net). You could fork [This fiddle](https://jsfiddle.net/2pha/ne7gjdnq/) to create your own. — 2pha, Feb 20 '17 at 14:00

score 2 · Answer 1 · answered Apr 25 '17 at 19:53

You should put the CopyShader at the end of the composer not in the middle. This code works for me:

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

Three js EffectComposer + BloomPass not working

1 Answers1