camera - Three.js: 後処理シェーダー (EffectsComposer) を使用すると、CSS レンダラーのオーバーレイが機能しない

Question

次のように、まったく同じサイズの 2 つのレンダラーを重ね合わせて、同じパース ビュー カメラを共有するシーンがあります。

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 オブジェクトは、その位置を参照して CSS オブジェクトの位置を設定するだけで、WebGL シーン内のオブジェクトの上に直接配置できます。

ただし、この効果を追加すると:

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

そして、コンポーザーを呼び出して、代わりにこのようにレンダリングしますcomposer.render();

CSS オブジェクトが正しく配置されなくなりました。

WebGL オブジェクトがその位置を保持している間、ズームすると CSS オブジェクトがスライドするため、パースペクティブはオフになります。

余分なシェーダー パスが WebGL レンダリングのパースペクティブを変更し、CSS オブジェクトが適切に整列されずにスライドする理由は何ですか?