Looking to incorporate a transparent background with post effects like Unreal Bloom, SMAA, and Tonemapping from the examples I have, but I'm facing issues with the transparency in my rendering.
renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
renderer.setClearColor(0xFF0000, 0);
composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
// Bloom pass
canvasSize = new THREE.Vector2(canvas.width, canvas.height);
pass = new UnrealBloomPass(canvasSize, strength, radius, threshhold);
composer.addPass(pass);
// SMAA pass
size = canvasSize.multiplyScalar(this.renderer.getPixelRatio());
pass = new SMAAPass(size.x, size.y);
pass.renderToScreen = true
composer.addPass(pass);
// Tonemapping
renderer.toneMappingExposure = exposure;
renderer.toneMappingWhitePoint = whitePoint;
renderer.toneMapping = type;
composer.render();
Disabling the bloom pass shows the correct transparent background, but enabling it results in a black background. I checked the sources and it appears that it should handle the alpha texture channel correctly as the format is set to THREE.RGBAFormat.
Edit: After some investigation, I identified the issue in getSeperableBlurMaterial in js\postprocessing\UnrealBloomPass.js.
The alpha channel in the fragment is consistently set to 1.0, causing the previous alpha values to be completely overwritten during the additive blending process.
It would be great to figure out a proper way to incorporate alpha in the Gaussian blur. Any suggestions?