如何在不清除之前的渲染过程的情况下应用后处理EffectComposer渲染过程？

Question

在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后面渲染红色平面？谢谢!

Answer 1

您可以尝试在taa之前插入一个带有renderToScreen = false的copyPass吗？