ThreeJS- 添加泛光通道会影响画布透明度

Question

泛光影响透明度

对于渲染器，我有这样的设置：

renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer:true, alpha:true } );

用于布隆通道(后处理(

var renderPass = new RenderPass( scene, camera );
var bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
bloomPass.exposure =0.2;
bloomPass.threshold =0;
bloomPass.strength = 0.2;
bloomPass.radius = 0.1;
composer.addPass( renderPass );
composer.addPass( bloomPass );

在渲染时我正在使用

composer.render()

但这通过使画布变暗来影响画布的透明度(场景(

Answer 1

我遇到了同样的问题，您的代码适合创建UnrealBloomPass，但问题出在方法getSeperableBlurMaterial的UnrealBloomPass着色器中。

您需要将fragmentShader替换为以下代码，您的通行证背景将考虑 alpha 通道：

fragmentShader:
"#include <common>
varying vec2 vUv;n
uniform sampler2D colorTexture;n
uniform vec2 texSize;
uniform vec2 direction;

float gaussianPdf(in float x, in float sigma) {
return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
}
void main() {n
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 w = gaussianPdf(x, fSigma);
vec2 uvOffset = direction * invSize * x;
vec4 sample1 = texture2D( colorTexture, vUv + uvOffset);
vec4 sample2 = texture2D( colorTexture, vUv - uvOffset);
diffuseSum += (sample1.rgb + sample2.rgb) * w;
alphaSum += (sample1.a + sample2.a) * w;
weightSum += 2.0 * w;
}
gl_FragColor = vec4(diffuseSum/weightSum, alphaSum/weightSum);n
}"

Answer 2

泛光通道是在图像和模糊版本之间进行一些混合，导致颜色发生变化。应考虑设置 WebGLRenderer 色调映射属性，以设置良好的颜色动态范围

色调映射定义(维基百科(

色调映射是一种用于图像处理和计算机的技术 将一组颜色映射到另一组颜色以近似 在具有更多 动态范围有限。

在初始化例程中添加此行

renderer.toneMapping = THREE.ReinhardToneMapping