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

Question

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

这个作曲家是我的第二个场景，从 0 开始渲染 1080pts。

以下是我的 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;