如何在不清除以前的渲染通道的情况下应用后处理 EffectComposer 渲染通道？答案

【问题标题】：How to apply post-processing EffectComposer render passes without clearing previous render passes?如何在不清除以前的渲染通道的情况下应用后处理 EffectComposer 渲染通道？
【发布时间】：2019-09-06 18:22:55
【问题描述】：

在three.js 中，背景中有一个红色平面，前景中有一个旋转的白色立方体。我正在尝试将TAARenderPass 添加到立方体，同时保持背景平面不变。但是，添加TAARenderPass（以及BokehPass、SAOPass 和其他常见的后期处理效果）会清除其后面的所有内容，红色平面也会消失。

我在这里研究了类似的问题，并尝试了renderer.setClearColor( 0x000000, 0 )、renderer.autoClear = false 和renderer.autoClearColor = false。现在一切都是这样设置的：

  renderer = new THREE.WebGLRenderer( { alpha: true, antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor( 0x000000, 0 );
  document.body.appendChild( renderer.domElement );

  // EffectComposer
  const params = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
  const renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, params );
  effectComposer = new THREE.EffectComposer( renderer , renderTarget );
  effectComposer.setSize( window.innerWidth, window.innerHeight );

  // Render Passes
  const renderPassBg = new THREE.RenderPass( sceneBg , camera );

  const renderPassFg = new THREE.RenderPass( sceneFg , camera );
  renderPassFg.clear = false;

  const taaRenderPass = new THREE.TAARenderPass( sceneFg, camera );
  taaRenderPass.clear = false;

  const copyPass = new THREE.ShaderPass( THREE.CopyShader );
  copyPass.renderToScreen = true;

  effectComposer.addPass( renderPassBg );
  effectComposer.addPass( renderPassFg );
  // effectComposer.addPass( taaRenderPass );
  effectComposer.addPass( copyPass );

有一个完整的 CodePen here。

当effectComposer.addPass( taaRenderPass ) 被注释掉时，一切都按预期工作（减去后处理效果）。但是当评论被删除时，只有白色立方体呈现。

如何让红色平面在taaRenderPass 后面渲染？谢谢！

【问题讨论】：

标签： three.js 3d render post-processing

【解决方案1】：

您可以尝试在 taa 通行证之前插入 copyPass 和 renderToScreen = false 吗？

【讨论】：

感谢您的建议。我尝试在 OP 中链接的 CodePen 中添加第二个 copyPass 和 renderToScreen = false 并在 addPass(taaRenderPass) 之前立即执行 addPass(secondCopyPass) 但仍然是同样的问题 - taaRenderPass 清除了它之前的所有内容。可以肯定的是，我是否有可能误解了如何实施您的建议？
啊.. 刚刚意识到这是 TAA（时间抗锯齿）通过。 TAA 需要将屏幕空间速度渲染到帧缓冲区以用于抗锯齿。所以这可能就是缓冲区被核弹的原因。可以切换到 FXAAAntialias 吗？