I'm attempting to incorporate a glowing effect into my scene. To achieve this, I understand that using a bloom filter with the EffectComposer is the ideal approach. However, I've encountered an issue where utilizing the EffectComposer compromises the renderer's beautiful anti-aliasing. I tried adding an SSAARenderPass, but it resulted in banding even with unbiased set to true and sampleLevel to 32. Please refer to the attached images below.
While researching this problem, I came across a discussion regarding a similar issue on this link. I followed the suggested solution by explicitly creating a RenderTarget for the EffectComposer with the type set to THREE.FloatType, which improved the situation, but I still notice significant banding.
Is there a way to achieve a glowing effect while maintaining a clean render without aliasing or banding?
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);
This image shows the scene with no SSAA or Bloom. There is no banding but severe aliasing. https://i.sstatic.net/c8ljL.png
Here is the scene with Bloom but no SSAA. There is no banding in the background, but the bloom effect exhibits banding. https://i.sstatic.net/8Q2wG.png
Lastly, with both Bloom and SSAA in the scene. Although the aliasing is improved, there is noticeable banding in the background and bloom effect. https://i.sstatic.net/kDnLK.png