three.js 中的后期效果和透明背景

Question

尝试使用带有一些后期效果的透明背景，例如示例中提供的 Unreal Bloom、SMAA 和色调映射，但它似乎破坏了我渲染的透明度。

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();

如果我停用Bloom Pass，我会得到一个正确的透明背景，但是当我激活时，我会得到一个黑色背景。我查看了来源，似乎它应该正确处理 alpha 纹理通道，因为格式正确设置为 THREE.RGBAFormat。

编辑：经过一番研究，我发现这是从哪里来的。它来自 js\postprocessing\UnrealBloomPass.js 中的getSeperableBlurMaterial。

片段的 Alpha 通道始终设置为 1.0，这会导致在最后进行加法混合时完全移除之前的 Alpha 值。

很酷的事情是找到一种在高斯模糊中应用 alpha 的正确方法。知道怎么做吗？

Answer 1

我找到了一个解决方案，可以这样排序： https://github.com/mrdoob/three.js/issues/14104

void main()
{
    vec2 invSize = 1.0 / texSize;
    float fSigma = float(SIGMA);
    float weightSum = gaussianPdf(0.0, fSigma);
    float alphaSum = 0.0;
    vec3 diffuseSum = texture2D(colorTexture, vUv).rgb * weightSum;
    for( int i = 1; i < KERNEL_RADIUS; i ++ )
    {
        float x = float(i);
        float weight = gaussianPdf(x, fSigma);
        vec2 uvOffset = direction * invSize * x;

        vec4 sample1 = texture2D( colorTexture, vUv + uvOffset);
        float weightAlpha = sample1.a * weight;
        diffuseSum += sample1.rgb * weightAlpha;
        alphaSum += weightAlpha;
        weightSum += weight;

        vec4 sample2 = texture2D( colorTexture, vUv - uvOffset);
        weightAlpha = sample2.a * weight;
        diffuseSum += sample2.rgb * weightAlpha;
        alphaSum += weightAlpha;
        weightSum += weight;

    }
    alphaSum /= weightSum;
    diffuseSum /= alphaSum; // Should apply discard here if alphaSum is 0
    gl_FragColor = vec4(diffuseSum.rgb, alphaSum);
}