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

Question

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

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

如何获得发光效果并保持干净的渲染而不会出现锯齿或条纹？

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

我相信您遇到了 this demo solves 的确切问题。当unbiased = false 看到色带时：

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

设置ssaaRenderPass.unbiased = true;应该是一个简单的修复