THREE.js FXAA着色器不使用CopyShader -呈现空白

Question

我试图在同一个画布和渲染器上渲染多个场景。一切都按预期工作，直到我将FXAA着色器添加到我的作曲家之一，没有任何渲染。

这位作曲家是为我的第二幕，并呈现1080从0。

下面是我编写的关于Composer / Renderer代码的基本知识：

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

然后，我有一些其他场景/作曲家，所有的工作很好，有THREE.HueSaturationShader，但没有FXAA着色器。

在运行时，我将呈现器视图设置为它的位置，并呈现编写器：

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

编辑

• 如果我移除FXAA着色器，它会呈现很好的效果。
• 如果我没有偏移它(呈现为0，0)，它会很好地呈现，并删除复制着色器，但保留FXAA着色器。
• 它只呈现最后一个像素(拉伸)，如果我保持它的偏移，保持FXAA着色器，但删除CopyShader。

Answer 1

多亏了this answer。

需要将renderToScreen标志设置为false，因为它的屏幕外呈现。

effectFXAA.renderToScreen = false;