Glow layer with transparent background

Questions
1

https://www.babylonjs-playground.com/index.html#SIXD2Z#4

The effect i would like to do is have an object have a glow layer that bleeds into the transparent background much like bloom can do but with just the glow layer. So when i am running this on a web page the glow still looks good when you can see the webpage under the canvas.

when setting the clear color to be completely transparent the glow doesn’t happen on the clear colored section.
but when you set the clear color alpha to 0.003 (lowest i can see to set it) it glows on the background but can tint the background just a little bit.

is there another way to get the effect i am looking for or something i should look into to get this fixed?

2

You might try smthg like this https://www.babylonjs-playground.com/index.html#SIXD2Z#6 but as this might cause other issues on complex scenes I wonder if I should make it public.

3

Hi guys. I’m probably off-topic… but I wanted to address…

So, I made this thing… abs-positioned a DIV with some textContent… UNDER a semi-opaque renderCanvas.

Besides, I don’t think I have ever tried a semi-transparent renderCanvas with html beneath. Sounded kind of fun, so naturally, I HAD TO try it in a playground. :slight_smile: Now confirmed. It IS fun. Be careful when running a video of a glowLayer… under the renderCanvas glowLayer. I heard… when the renderCanvas goes 50% opaque… the Earth could explode. :open_mouth: :slight_smile:

1 Like
4

@sebavan still doesnt quite work, That alpha setting turns the background black instead of transparent, you could see by changing the background:darkgray or something else. :frowning:

@Wingnut haha thats awesome. but yeah that doesnt quite do what i want it to do.

5

Oh yes sorry I ll try to add smthg for you ASAP.

6

to simulate a glow we currently simply ADD a blurred view of the emissive parts and the main scene. As we do not generate alpha in the blur (this would break the main glow) we can not know where the gradient is transparent.

This means that we have no way to know what level of transparency each pixel of the blurry (glowing) part should have.

It would then require a special addition to our shader to infer a transparency from the current color.

Would you fancy creating a PR to support this ?

The easiest would probably here to integrate your background in the scene.

1 Like
7

I just started getting into Babylon about 1 week ago. I don’t know if i know exactly how things work enough to be able to make a PR just yet. I could try…

Are you suggesting i make a change to glowMapGeneration to have a check to check the alpha channel from the current clearColor?https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/glowMapGeneration.fragment.fx

8

I think here you could add a special mode for your needs which would:

Change the glowLayer neutralColor to 0,0,0,0 to ensure by default the map is transparent where needed, also it could change the alpha mode to full additive. Finally it should ensure that the emissiveColor is replaced by a transparent one instead of black which means no glow.

This would then work like this: https://www.babylonjs-playground.com/index.html#SIXD2Z#11

The only remaining issue would be to change the generation shader you linked to ensure it writes 0 in alpha when emissive is black if coming from a texture (to prevent the black glow in the previous example)

1 Like
9

Sweet! Thank you @sebavan, you’ve been very helpful!

i added this inside the glowMapGenerationPixelShader EMISSIVE ifdef and seems to all work now :smiley: again thank you so much…

// Remove black glow
if (finalColor.r == 1.0 &&
    finalColor.g == 1.0 &&
    finalColor.b == 1.0)
    finalColor.a = 0.0;
10

Awesome, is there the same solution for bloom in DefaultRendering Pipeline?

11

nope as it is not possible. In case of bloom the colored texture is used for both highlights and the main pass.

In your case it would be easier to use glow.