THREE.js FXAA shader not working with CopyShader - renders blank

Question

Im attempting to render multiple scenes on the same canvas and renderer. Everything works as expected until I add the FXAA shader to one of my Composers and nothing renders.

This composer is for my second scene and renders 1080pts from 0.

Heres the basics of what my code around the Composer / Renderer looks like:

this.renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});
this.renderer.autoClear = false;
this.renderer.setSize(RENDER_WIDTH * 3, RENDER_HEIGHT);


let renderPass = new THREE.RenderPass(this.scene, this.camera);

let effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / RENDER_WIDTH, 1 / RENDER_HEIGHT);
effectFXAA.renderToScreen = true;

let effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectCopy.renderToScreen = true;

let rtParameters = {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: true
};

this.composer = new THREE.EffectComposer(this.renderer,
    new THREE.WebGLRenderTarget(RENDER_WIDTH, RENDER_HEIGHT, rtParameters));

this.composer.addPass(renderPass);
this.composer.addPass(effectFXAA);
this.composer.addPass(effectCopy);

I then have a few other scenes / composers that all work great and have THREE.HueSaturationShader but no FXAA shader.

During runtime I set the renderers viewport to its position and render the composer:

this.renderer.setViewport(RENDER_WIDTH, 0, RENDER_WIDTH, RENDER_HEIGHT);
this.composer.render();

this.renderer.setViewport(RENDER_WIDTH * 2, 0, RENDER_WIDTH, RENDER_HEIGHT);
this.composer2.update();
...

EDIT

• It renders fine if I remove the FXAA Shader.
• It renders fine if I DONT offset it (Render at 0, 0), and remove the copy shader but keep the FXAA shader
• It only renders the last pixel (stretched out) if I keep it offset, keep the FXAA shader, but remove the CopyShader.

Answer 1

Thanks to this answer.

Needed to set the renderToScreen flag to false since its offscreen rendering.

effectFXAA.renderToScreen = false;