Shader to turns black into transparency. Bloompass

Questions
,
1

Hi guys!
I’m trying to make a scene with selective bloom pass, but the example Selective bloom dont work for me because uses scene.traverse on animate() and my scene have a lot of meshes. Kills performance.

I’ve created two compossers, one without bloom and another (on top) only with the objects with bloom using layers.
Up here, everything ok.

The issue is than the bloom composer have a black background, so the scene without bloom is not visible but is there.
I’ve read about that… and with a custom shader mat can turn those black pexels into transparency.

Any hero around here to help with this?

1 Like
2

I had exactly the same issue, but I managed to solve it modifiying UnrealBloomPass.js, but the issue is in the ShaderMaterial of UnrealBloomPass at the method getSeperableBlurMaterial.

You need to replace the fragmentShader by this code below and your pass background will consider the alpha channel:

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\
	}"

I used the same official example with a cool background and it works perfectly.

image
image1488×1078 280 KB

2 Likes
3

Also, to avoid rewriting shaders manually you can also consider using vanruesc/postprocessing SelectiveBloomPass - keep in mind though it’s not 100% compatible with built-in three passes.

1 Like