Three.js using EffectComposer renderTarget texture is causing flickering / strobing

19 Views Asked by At

I want to pass the texture of one effect composer into another to be able to blend multiple effects together.

The code is based of the following example https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom_selective

Using the new UnrealBloomPass() as the pass works fine. But as soon as I change it for a custom shaderPass it results in the rendered texture flickering

This is the basic setup

const setup = () => {

    const lumPass = new ShaderPass(LuminosityShader, "tDiffuse");
    const lumComp = new EffectComposer(renderer);
    lumComp.setSize(device.width, device.height);
    lumComp.renderToScreen = false;
    lumComp.addPass(renderPass);
    lumComp.addPass(lumPass);

    // Final

    const outputPass = new OutputPass();
    const finalComp = new EffectComposer(renderer);
    const mixPass = new ShaderPass(
        new ShaderMaterial({
            uniforms: {
                baseTexture: new Uniform(null),
                lumTexture: new Uniform(lumComp.renderTarget2.texture),
            },
            vertexShader: texelVert.contents.value,
            fragmentShader: mixFrag.contents.value,
            defines: {},
        }),
        "baseTexture"
    );
    finalComp.setSize(device.width, device.height);
    finalComp.addPass(renderPass);
    finalComp.addPass(mixPass);
    // finalComp.addPass(outputPass);
};

const render = () => {
    requestAnimationFrame(render);
    lumComp.render();
    finalComp.render();
};

setup();
render();

The vertex shader

varying vec2 vUv;

void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

And the fragment shader

uniform sampler2D baseTexture;
uniform sampler2D lumTexture;

varying vec2 vUv;

void main() {
    gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( lumTexture, vUv ) );

}

Both shaders are identical to the example so I don't believe they are the problem. Any ideas what the problem could be ?

1

There are 1 best solutions below

0
The Sloth On

Adding lumComp.addPass(new ShaderPass(CopyShader)); solved the problem. As far as I understand the problem was that both composers were writing to same buffer and thus overriding each other every other frame.