时间戳

首页 > 解决方案 > 如何在不清除以前的渲染通道的情况下应用后处理 EffectComposer 渲染通道？

three.js - 如何在不清除以前的渲染通道的情况下应用后处理 EffectComposer 渲染通道？

问题描述

在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 。

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

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

标签： three.js3drenderpost-processing

解决方案

您可以尝试在 taa 通行证之前插入一个copyPasswith吗？renderToScreen = false

推荐阅读