Three.js中后处理效果与透明背景兼容问题咨询

你精准定位到了问题根源——UnrealBloomPass的getSeperableBlurMaterial方法确实强制将片段alpha通道设为1.0，直接覆盖了原有的透明信息，导致bloom合成后背景变成黑色。下面是具体的修复方案：

1. 修改模糊材质，保留alpha通道计算 #

找到UnrealBloomPass源码中的getSeperableBlurMaterial方法，调整其片段着色器逻辑，让模糊过程正确累加alpha值，而不是强制设为1。

原片段着色器中通常会有类似这样的代码：

gl_FragColor = sum;
gl_FragColor.a = 1.0; // 这行是透明失效的核心原因

将其替换为基于采样纹理alpha值累加的逻辑：

void main() {
    vec4 sum = vec4(0.0);
    float alphaTotal = 0.0;
    vec2 texelSize = vec2(1.0) / vec2(textureSize(tDiffuse, 0));
    
    for (int i = 0; i < KERNEL_RADIUS; i++) {
        vec2 offset = blurDirection * texelSize * float(i - KERNEL_RADIUS / 2);
        vec4 texel = texture2D(tDiffuse, vUv + offset);
        sum += texel * kernel[i];
        alphaTotal += texel.a * kernel[i]; // 同步累加alpha权重
    }
    
    gl_FragColor = sum;
    gl_FragColor.a = alphaTotal; // 用累加后的alpha替代固定1.0
}

这段修改会让模糊后的渲染目标保留原场景的透明信息，而不是强制不透明。

2. 确认渲染目标格式为RGBA #

虽然你提到源码已有设置，但再检查一下UnrealBloomPass构造函数中创建的渲染目标，确保它们明确使用RGBA格式：

this.renderTargetX = new THREE.WebGLRenderTarget(size.x, size.y, {
    format: THREE.RGBAFormat,
    type: THREE.HalfFloatType,
    samples: 4 // 保持原有的采样设置
});
this.renderTargetY = this.renderTargetX.clone();

3. 显式配置EffectComposer的透明渲染目标 #

为了保险起见，初始化EffectComposer时直接指定带alpha的RGBA渲染目标：

const renderTarget = new THREE.WebGLRenderTarget(canvas.width, canvas.height, {
    format: THREE.RGBAFormat,
    alpha: true,
    type: THREE.HalfFloatType
});
composer = new THREE.EffectComposer(renderer, renderTarget);

额外提示：检查bloom合成的混合模式 #

如果修改后仍有轻微异常，可以查看UnrealBloomPass中最终合成步骤的材质，确保混合模式是THREE.AdditiveBlending且正确考虑alpha：

this.bloomMaterial.blending = THREE.AdditiveBlending;
this.bloomMaterial.transparent = true; // 确保开启透明混合

这样修改后，UnrealBloomPass就能在保留背景透明的前提下正常工作，同时SMAA、色调映射等其他后处理效果也不会受影响。

内容的提问来源于stack exchange，提问作者MaT