Three.js: overlaying CSS Renderer doesn't work when using a post processing shader (EffectsComposer)

Question

I have a scene with 2 renderers sized exactly the same and put on top of each other sharing the same Perspective Camera like this:

var renderer = new THREE.WebGLRenderer();
renderer.antialias = true;
renderer.setClearColor(0xFFFFFF, 1);
renderer.setSize(Params.win.w, Params.win.h);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
renderer.domElement.style.zIndex = '-9999';
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();

var cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(Params.win.w, Params.win.h);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0px';
cssRenderer.domElement.style.left = '0px';
cssRenderer.domElement.style.zIndex = '-9998';
document.body.appendChild(cssRenderer.domElement);
var cssScene = new THREE.Scene();

            //animate loop

    renderer.render(scene, camera);
    cssRenderer.render(cssScene, camera);

CSS Objects can be placed directly over objects in the WebGL Scene simply by referencing their positions and setting the position of the CSS Objects.

However when I add this effect:

var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / (Params.win.w), 1 / (Params.win.h));
effectFXAA.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.setSize(Params.win.w, Params.win.h);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(effectFXAA);

And call the composer to render instead like this composer.render();

My CSS Objects are no longer placed correctly.

The perspective is off since zooming will slide the CSS Objects around while the WebGL Objects retain their positions.

Any idea why the extra shader passes might be changing the perspective in the WebGL rendering resulting in the CSS Objects not staying aligned properly and sliding around?

Answer 1

So I figured out that despite the fact that only the composer is calling render, the original renderer also needs to have it's size reset in whatever resize method you have.

The composer is based on the original renderer, and I had commented out the resizing of this object and only resized the composer.

This is something I must have overlooked, hope this helps others!

camera.aspect = Params.win.w / Params.win.h;
camera.updateProjectionMatrix();
//MUST ALSO UPDATE RENDERER SIZE
renderer.setSize(Params.win.w, Params.win.h);
cssRenderer.setSize(Params.win.w, Params.win.h);
//composer
effectFXAA.uniforms['resolution'].value.set(1 / Params.win.w, 1 / Params.win.h);
composer.setSize(Params.win.w, Params.win.h);