# How to set alpha to Volumetric LightScattering post-process

**URL:** <https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576>\
**Category:** Questions\
**Created:** [December 13, 2019, 12:27pm UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576 "2019-12-13T12:27:00Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![lhx880619](https://avatars.discourse-cdn.com/v4/letter/l/ac91a4/32.png) [@lhx880619](https://forum.babylonjs.com/u/lhx880619)\
**Post date:** [December 13, 2019, 12:27pm UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/1 "2019-12-13T12:27:00Z")

</div>

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)😉  
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](https://www.babylonjs-playground.com/#HYFQJ#59)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [December 13, 2019, 1:25pm UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/2 "2019-12-13T13:25:41Z")

</div>

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

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

```

[https://www.babylonjs-playground.com/#HYFQJ#60](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!

---

<div class="post-metadata">

**Author:** ![lhx880619](https://avatars.discourse-cdn.com/v4/letter/l/ac91a4/32.png) [@lhx880619](https://forum.babylonjs.com/u/lhx880619)\
**Post date:** [December 13, 2019, 2:18pm UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/3 "2019-12-13T14:18:06Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![lhx880619](https://avatars.discourse-cdn.com/v4/letter/l/ac91a4/32.png) [@lhx880619](https://forum.babylonjs.com/u/lhx880619)\
**Post date:** [December 13, 2019, 2:28pm UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/4 "2019-12-13T14:28:55Z")

</div>

![show pic](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/c/c50cdb5a49603a8ea55031534b88232ac835c341.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [December 13, 2019, 7:58pm UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/5 "2019-12-13T19:58:25Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![lhx880619](https://avatars.discourse-cdn.com/v4/letter/l/ac91a4/32.png) [@lhx880619](https://forum.babylonjs.com/u/lhx880619)\
**Post date:** [December 14, 2019, 12:05am UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/6 "2019-12-14T00:05:45Z")

</div>

@Evgeni_Popov they are already using different material.

@Deltakosh any suggestion for this issue?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 14, 2019, 3:44am UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/7 "2019-12-14T03:44:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lhx880619](https://avatars.discourse-cdn.com/v4/letter/l/ac91a4/32.png) [@lhx880619](https://forum.babylonjs.com/u/lhx880619)\
**Post date:** [December 14, 2019, 4:22am UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/8 "2019-12-14T04:22:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [December 14, 2019, 12:23pm UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/9 "2019-12-14T12:23:42Z")

</div>

Try this:

[https://www.babylonjs-playground.com/#BRFSGD#1](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.

---

<div class="post-metadata">

**Author:** ![lhx880619](https://avatars.discourse-cdn.com/v4/letter/l/ac91a4/32.png) [@lhx880619](https://forum.babylonjs.com/u/lhx880619)\
**Post date:** [December 14, 2019, 3:08pm UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/10 "2019-12-14T15:08:01Z")

</div>

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

> <https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/volumetricLightScattering.fragment.fx#L30>

  
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](https://www.babylonjs-playground.com/#BRFSGD#2)

thanks.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [December 14, 2019, 6:31pm UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/11 "2019-12-14T18:31:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![antonio](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@antonio](https://forum.babylonjs.com/u/antonio)\
**Post date:** [March 31, 2022, 10:55am UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/12 "2022-03-31T10:55:52Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [March 31, 2022, 2:25pm UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/13 "2022-03-31T14:25:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![antonio](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@antonio](https://forum.babylonjs.com/u/antonio)\
**Post date:** [April 1, 2022, 4:05am UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/14 "2022-04-01T04:05:42Z")

</div>

Do you have a link to the issue?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [April 1, 2022, 1:35pm UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/15 "2022-04-01T13:35:42Z")

</div>

> [@Possible upcoming iOS 15.4 bug](https://forum.babylonjs.com/t/possible-upcoming-ios-15-4-bug/27827):
>
> I am seeing this in our app as well on iOS 15.4 beta4 seen in this video. Most PGs are fine, could be related to animations it seems See attached video

> [@Safari 15.4 Beta issue combining UtilityLayerRenderer and DefaultRenderingPipeline](https://forum.babylonjs.com/t/safari-15-4-beta-issue-combining-utilitylayerrenderer-and-defaultrenderingpipeline/28316):
>
> Using BabylonJS v4.2.1, I am seeing a rendering issue on iOS Safari 15.4 Beta 5 on an iPad Pro when adding both a UtilityLayerRenderer and DefaultRenderingPipeline. The issue does not appear in the latest 5.0.0 of BabylonJS, or on my desktop non-beta version of Safari. My project resembles a simple model viewer with a rotatable camera, so I have been able to recreate the issue in the default Babylon Playground example. You can view my example code here: [https://playground.babylonjs.com/#SGLH1…](https://playground.babylonjs.com/#SGLH1F)

> [@ShadowGenerator causing rendering artifacts in Safari 15.4](https://forum.babylonjs.com/t/shadowgenerator-causing-rendering-artifacts-in-safari-15-4/28478):
>
> Since the update to Safari 15.4, scenes using a ShadowGenerator seem to be causing rendering artifacts. When you drag a mesh around or move the camera, each frame of the animation stays on screen. Playground: [https://playground.babylonjs.com/#11YRJ0#2](https://playground.babylonjs.com/#11YRJ0#2)

> [@Broken rendering in gltf models with transmission on safari 15.4 on M1/iOS devices?](https://forum.babylonjs.com/t/broken-rendering-in-gltf-models-with-transmission-on-safari-15-4-on-m1-ios-devices/28474):
>
> Hi, if I load gltf models with transmission on Babylon sandbox, rendering is broken, as if the color buffer is never cleared (but sometimes, errors are different). Everything was working fine with Safari 15.3, and works perfectly in Chrome. I would attach a sample glb if I could find a way to do it … I can however attach two screenshots: the scene after loaded, and then after moving around the camera a bit: p.s. I see …

---

<div class="post-metadata">

**Author:** ![antonio](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@antonio](https://forum.babylonjs.com/u/antonio)\
**Post date:** [April 2, 2022, 6:23am UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/16 "2022-04-02T06:23:58Z")

</div>

Thank you.

---

<div class="post-metadata">

**Author:** ![jamjamg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jamjamg/32/44549_2.png) [@jamjamg](https://forum.babylonjs.com/u/jamjamg)\
**Post date:** [January 7, 2025, 9:05am UTC](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/17 "2025-01-07T09:05:14Z")

</div>

> [@Evgeni\_Popov](#):
>
> Try this:
> 
> [https://www.babylonjs-playground.com/#BRFSGD#1](https://www.babylonjs-playground.com/#BRFSGD#1)

If you try this in 2025 it stopped working because of [Fix #15786 (#15787) · BabylonJS/Babylon.js@655c2c2 · GitHub](https://github.com/BabylonJS/Babylon.js/commit/655c2c20345ce33ef47b7cd9362e9180d517fa1b) .

(the line to be replaced is now ‘gl\_FragColor=((vec4((vec3(color.r,color.g,color.b)_exposure),realColor.a))+(realColor_(1.5-0.4)));’ instead of  
‘gl\_FragColor=((vec4((vec3(color.r,color.g,color.b)_exposure),1))+(realColor_(1.5-0.4)));’)

Here is a fixed version: [https://www.babylonjs-playground.com/#BRFSGD#14](https://www.babylonjs-playground.com/#BRFSGD#14)
