# Volumetric Light Scattering Turning ClearColor Black

**URL:** <https://forum.babylonjs.com/t/volumetric-light-scattering-turning-clearcolor-black/47706>\
**Category:** Questions\
**Created:** [January 31, 2024, 8:31pm UTC](https://forum.babylonjs.com/t/volumetric-light-scattering-turning-clearcolor-black/47706 "2024-01-31T20:31:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Karim\_Salam](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/karim_salam/32/30201_2.png) [@Karim\_Salam](https://forum.babylonjs.com/u/Karim_Salam)\
**Post date:** [January 31, 2024, 8:31pm UTC](https://forum.babylonjs.com/t/volumetric-light-scattering-turning-clearcolor-black/47706/1 "2024-01-31T20:31:43Z")

</div>

Hello Guys,

I have a project that I’m using the VolumetricLightScatteringPostProcess in, its a client project so i cannot share a playground unfortunately, the issue is i have several products but one of them im using the vls in it all of them has a transparent background and is looking good, except for this particular model that im using vls on its turning the entire scene black, i want it to be transparent how can i fix it ?

```auto
const vls = new VolumetricLightScatteringPostProcess(
        "vls",
        { postProcessRatio: 1.0, passRatio: 0.5 },
        this.camera,
        lightMesh,
        100,
        Texture.BILINEAR_SAMPLINGMODE,
        this.engine,
        false
      );
      vls.invert = false;
      vls.weight = 1;
      vls.exposure = 2;
      vls.width = 100;
      vls.useCustomMeshPosition = true;
      vls.setCustomMeshPosition(new Vector3(0, 0, 0));
      vls.decay = 0.9;

```

this is the vls part of the code

Best Regards.

---

<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:** [February 1, 2024, 11:01am UTC](https://forum.babylonjs.com/t/volumetric-light-scattering-turning-clearcolor-black/47706/2 "2024-02-01T11:01:08Z")

</div>

Try to look at the console of the browser, in case there’s an error there. You could also try to use [Spector](https://chromewebstore.google.com/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk?pli=1) and compare the bad rendering with a good one and see if you can pinpoint some differences.

But without a repro, I’m afraid it’s hard to find the problem if no one has encountered it before…

---

<div class="post-metadata">

**Author:** ![Karim\_Salam](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/karim_salam/32/30201_2.png) [@Karim\_Salam](https://forum.babylonjs.com/u/Karim_Salam)\
**Post date:** [February 1, 2024, 11:09am UTC](https://forum.babylonjs.com/t/volumetric-light-scattering-turning-clearcolor-black/47706/3 "2024-02-01T11:09:47Z")

</div>

There is no errors everything is rendering fine but the background is turning black instead of being transparent i saw a similar issue on the forum in the following link

[https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576?u=karim\_salam](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576)

The code is a really simple one its just the scene the camera the model and this vls

Let me clarify the problem is that the vls is turning the clearcolor full black instead of transparent

---

<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:** [February 1, 2024, 11:18am UTC](https://forum.babylonjs.com/t/volumetric-light-scattering-turning-clearcolor-black/47706/4 "2024-02-01T11:18:39Z")

</div>

Does the fix work for you?

> [@How to set alpha to Volumetric LightScattering post-process](https://forum.babylonjs.com/t/how-to-set-alpha-to-volumetric-lightscattering-post-process/7576/9):
>
> 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 ob…

---

<div class="post-metadata">

**Author:** ![Karim\_Salam](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/karim_salam/32/30201_2.png) [@Karim\_Salam](https://forum.babylonjs.com/u/Karim_Salam)\
**Post date:** [February 1, 2024, 11:30am UTC](https://forum.babylonjs.com/t/volumetric-light-scattering-turning-clearcolor-black/47706/5 "2024-02-01T11:30:41Z")

</div>

I tried these but it didnt work i dont know if its because you are using a background image instead of a color or transparent

---

<div class="post-metadata">

**Author:** ![Karim\_Salam](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/karim_salam/32/30201_2.png) [@Karim\_Salam](https://forum.babylonjs.com/u/Karim_Salam)\
**Post date:** [February 1, 2024, 11:55am UTC](https://forum.babylonjs.com/t/volumetric-light-scattering-turning-clearcolor-black/47706/6 "2024-02-01T11:55:47Z")

</div>

Okay it worked turns out i needed to use the shaders you added too i didn’t add them before to my code after adding them with the following two all worked and the transparent background is done thanks for your help

vls.\_volumetricLightScatteringRTT.onBeforeRenderObservable.clear();  
vls.\_volumetricLightScatteringRTT.onAfterRenderObservable.clear();