javascript - THREE.js FXAA 着色器无法与 CopyShader 一起使用 - 呈现空白

Question

我正在尝试在同一 Canvas 和渲染器上渲染多个场景。一切都按预期工作，直到我将 FXAA 着色器添加到我的其中一个 Composer 中并且没有任何渲染。

该 Composer 适用于我的第二个场景，从 0 渲染 1080 点。

这是我的 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);

然后我有一些其他场景/ Composer ，它们都工作得很好，并且有 THREE.HueSaturationShader，但没有 FXAA 着色器。

在运行时，我将渲染器视口(viewport)设置为其位置并渲染 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();
...

编辑

• 如果我删除 FXAA 着色器，渲染效果会很好。
• 如果我不偏移它(在 0, 0 渲染)，并删除复制着色器但保留 FXAA 着色器，它会渲染得很好
• 如果我保持偏移，保留 FXAA 着色器，但删除 CopyShader，它只会渲染最后一个像素(拉伸(stretch))。

Answer 1

感谢this answer .

由于其离屏渲染，需要将 renderToScreen 标志设置为 false。

effectFXAA.renderToScreen = false;