CODEWITHSUNDEEP
javascriptthree.jspost-processingbloom
Turkeydipking
Turkeydipking

Reputation: 33

Three js EffectComposer + BloomPass not working

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!

Upvotes: 1

Views: 6672

Answers (1)

Saeid Nourian
Saeid Nourian

Reputation: 1778

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

Upvotes: 2

Related Questions