How to set alpha to Volumetric LightScattering post-process

Questions
1

how can i set alpha to godrays when using Volumetric LightScattering post-process.
i just set the clear color of scene to transparent( scene.clearColor = new BABYLON.Color4(0,0,0,0):wink:
and then set the alphamode godrays.alphaMode = BABYLON.Engine.ALPHA_COMBINE
it seems that is not working at all (and it cause the renderer not clearing the color buffer i think)
so please give me a help.
thank you very much!
demo: https://www.babylonjs-playground.com/#HYFQJ#59

2

The post process buffer is not cleared when alpha mode is enabled. You can do it yourself:

godrays.onActivateObservable.add(() => {
    scene.getEngine().clear(scene.clearColor, scene._allowPostProcessClearColor, true, true);
});

https://www.babylonjs-playground.com/#HYFQJ#60

However, I’m not sure I see any difference when alpha mode is enabled or not…

… and welcome to the forum!

1 Like
3

thanks for your replay, i find out that the alphaMode = ALPHA_COMBINE will not make the background transparent . if i use ALPHA_ADD the alpha will be ok but the other mesh material will also have alpha.
so do you konw why and how can i fix this?
The background of my project is i want the have some ar effect applied on my scene, so the post process should not make the background color become total black.

thanks!

4

show pic
show pic959×693 426 KB

5

It seems you set alpha transparency on all your mesh: you should do it only on the “ray” mesh (meaning you need a different material for the ray and for the remaining mesh).

6

@Evgeni_Popov they are already using different material.

@Deltakosh any suggestion for this issue?

7

Let me ping @julien-moreau who is the creator of the godrays

8

thans @Deltakosh and @Evgeni_Popov, i just made a playground demo to show this issue more clear.
https://www.babylonjs-playground.com/#BRFSGD
when use godrays the background will be black. and comment out the godrays will the the transparent background.

9

Try this:

https://www.babylonjs-playground.com/#BRFSGD#1

I have set a picture in the canvas zone instead of a plain color to better see how it goes.

I have performed one minor change in each shader used by the effect: volumetricLightScatteringPassPixelShader and volumetricLightScatteringPixelShader. I have done it in an ugly way for the PG, I just updated the code in the Effect.ShaderStore object.

In godrays.onActivateObservable (line 58), you should set a clear color corresponding to the object emitting the god rays (that’s why I put (1,1,0) which is the emissive color you used for your cylinder).

I also had to access VolumetricLightScatteringPostProcess._volumetricLightScatteringRTT but as it is not exposed I simply used godrays._volumetricLightScatteringRTT. The onBeforeRenderObservable / onAfterRenderObservable observables clear the buffer to black by default, so I needed to remove them.

10

yes, i find almost the same way to chang the shader,and more ugly ,by changing the source code.


change the default 1 to 0 will solve my problem. and i think your solution is better then mine.

pg here https://www.babylonjs-playground.com/#BRFSGD#2

thanks.

11

Putting 0 in the alpha component really disable most of the effect, that’s why in your PG you can see only the effect on a bit of the sphere: without the sphere you would not see any god rays.

12

@Evgeni_Popov Your solution works great on all browsers. Unfortunately it’s not working for me on iOS 15.4 Safari. Do you have a fix for that as well?

13

Safari 15.4 has currently a lot of issues. They just released the fix in Webkit and I hope they provide an update soon.

14

Do you have a link to the issue?

15
16

Thank you.