Bloom 和 Antialiasing 导致 Three.js 渲染中的条带

Question

我正在尝试为我的场景添加发光效果。 据我所知，最好的方法是使用 EffectComposer 的布隆过滤器。 不幸的是，使用 EffectComposer 否定了渲染器附带的漂亮的抗锯齿。 我添加了一个 SSAARenderPass，但即使将 unbiased 设置为 true，并且将 sampleLevel 设置为 32，它也会导致条带化。请参见下面的附图。

我遇到了处理类似问题的讨论： https://discourse.threejs.org/t/effect-composer-gamma-output-difference/12039/23我相信我通过显式创建 RenderTarget 集成了讨论的解决方案对于类型设置为 THREE.FloatType 的 EffectComposer。 这肯定有帮助，但我仍然有一些非常明显的条带。

如何在没有锯齿或条带的情况下获得发光效果并保持干净的渲染？

const pixelRatio = renderer.getPixelRatio();
const renderScene = new RenderPass( scene, camera );
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
bloomPass.threshold = 0.9;
bloomPass.strength = 1.5;
bloomPass.radius = 0.15;

var ssaaRenderPass = new SSAARenderPass( scene, camera );
ssaaRenderPass.sampleLevel = 32;
ssaaRenderPass.unbiased = true;

var adaptToneMappingPass = new AdaptiveToneMappingPass(true, 256);
var gammaCorrectionPass = new ShaderPass( GammaCorrectionShader );

var renderTarget = new THREE.WebGLRenderTarget( window.innerWidth * pixelRatio, window.innerHeight * pixelRatio, 
{
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: false,
    type: THREE.FloatType
});
renderTarget.texture.name = 'EffectComposer.rt1';

composer = new EffectComposer(renderer, renderTarget);
composer.addPass(renderScene);
composer.addPass(ssaaRenderPass); //Seems to be better than fxaa but has terrible banding
composer.addPass(adaptToneMappingPass);
composer.addPass(bloomPass);
composer.addPass(gammaCorrectionPass);

这没有 SSAA 或 Bloom。 没有条带但可怕的混叠

这是 Bloom 但没有 SSAA。 尽管有绽放效果，但背景中没有条纹

这适用于 Bloom 和 SSAA。 混叠更好，但背景中的条带和绽放很糟糕

Answer 1

我相信您遇到了这个演示解决的确切问题。 当unbiased = false时，您会看到色带：

但是当unbiased = true时，条带是固定的：

通过设置ssaaRenderPass.unbiased = true;