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 ?
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.