# Issue with Postprocess and alpha

**URL:** https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463
**Category:** Questions
**Tags:** shader, mobile, postprocessing, alpha
**Created:** [March 3, 2024, 5:45pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463 "2024-03-03T17:45:31Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [March 3, 2024, 5:45pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/1 "2024-03-03T17:45:31Z")

</div>

Hi everyone, I need your help with glsl postprocess.

I can’t manage to make the alpha channel work in my project like in [this playground](https://playground.babylonjs.com/#8BHKCQ#19).  
I tried everything to be as close as possible to the playground in my project but no matter what I do, I never had alpha transparency and instead a full blue image.  
I even put the same engine options as in the playground to make sure everything stays the same.

```auto
preserveDrawingBuffer: true,
stencil: true,

```

I start to wonder if I am missing a specific file as I use the ES6 packages?  
Or do you have any idea what could cause this?

---

<div class="post-metadata">

### Author: ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [March 3, 2024, 6:10pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/2 "2024-03-03T18:10:49Z")

</div>

I also made sure to be up to date and currently on v6.45.1 - WebGL2 like in the playground.

---

<div class="post-metadata">

### Author: ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [March 3, 2024, 6:29pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/3 "2024-03-03T18:29:58Z")

</div>

I made new modifications and now I can’t be closer to the playground. I only create a canvas element, put it in the body, build the engine, and then it is a copy/paste of the playground code.  
I managed to get it to work on the computer, but on my iPhone, unlike the playground, it stays all blue. 🫠

---

<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: [March 4, 2024, 11:28am UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/4 "2024-03-04T11:28:23Z")

</div>

Did you try to create an enclosing div around the canvas and set the background color to the color you want your code to blend with?

---

<div class="post-metadata">

### Author: ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [March 4, 2024, 6:17pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/5 "2024-03-04T18:17:13Z")

</div>

Yes, I have a background color set that is white like in the playground.

---

<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 4, 2024, 8:00pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/6 "2024-03-04T20:00:59Z")

</div>

> [@PichouPichou](#):
>
> `stencil: true,`

You also need `alpha: true` in the options

---

<div class="post-metadata">

### Author: ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [March 4, 2024, 8:30pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/7 "2024-03-04T20:30:31Z")

</div>

Hi @sebavan, I just tested with the alpha option but nothing changed.  
Just so you know this option doesn’t appear in the doc: [Babylon.js docs](https://doc.babylonjs.com/typedoc/interfaces/BABYLON.EngineOptions)

I also tried the premultipliedAlpha option with no result.

---

<div class="post-metadata">

### Author: ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [March 4, 2024, 8:55pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/8 "2024-03-04T20:55:39Z")

</div>

I noticed something that could be related to my issue.  
If you put a black background, the color stays the same no matter what value you put in the alpha channel. I would expect it to be darker as it does go lighter with a white background.

> **[Babylon.js Playground](https://playground.babylonjs.com/#8BHKCQ%2320)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<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 4, 2024, 11:41pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/9 "2024-03-04T23:41:44Z")

</div>

Here are the options in Babylon  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/c/bc1df835a489fd1c66156ce2e4d1c67ae815a5ab.png)

---

<div class="post-metadata">

### Author: ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [March 5, 2024, 8:22am UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/10 "2024-03-05T08:22:07Z")

</div>

Thanks.

After some further tests, I confirm that my issue is related to the fact that when the background is black, the alpha stops working like in the playground. The more it is black the less it works and the more it is white the better it works.  
I tried to play with clearColor and fogColor but I still have the same issue when the parent background is black.

---

<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: [March 5, 2024, 10:53am UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/11 "2024-03-05T10:53:40Z")

</div>

You can disable premultiply alpha to make it work:

> **[Babylon.js Playground](https://playground.babylonjs.com/#8BHKCQ%2322)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

### Author: ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [March 5, 2024, 6:29pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/12 "2024-03-05T18:29:56Z")

</div>

Thanks @Evgeni_Popov,

Now it does work except if you open the playground on an iPhone. You still have this weird behavior where it works with a white background but not a black one. I don’t see any error in the console.  
How can we debug a thing like that?

---

<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 5, 2024, 9:40pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/13 "2024-03-05T21:40:50Z")

</div>

Maybe they do not support the premultiply alpha option ?

---

<div class="post-metadata">

### Author: ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [March 6, 2024, 8:59am UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/14 "2024-03-06T08:59:53Z")

</div>

Maybe indeed, that won’t be a surprise from Apple. 😉  
Is there any alternative to make that work then?

---

<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 7, 2024, 12:30am UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/15 "2024-03-07T00:30:34Z")

</div>

not that I am aware

---

<div class="post-metadata">

### Author: ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)
#### Post date: [March 9, 2024, 8:52pm UTC](https://forum.babylonjs.com/t/issue-with-postprocess-and-alpha/48463/16 "2024-03-09T20:52:59Z")

</div>

I ended up following the alpha value to change the shader color with clearColor so as not to depend on the transparency of the canvas and to make sure it worked everywhere.

Here’s the code if anyone needs it:

```auto
float alpha = sourceColor.w;
vec3 color = alpha * sourceColor.xyz + (1. - alpha) * clearColor.xyz;
gl_FragColor = vec4(color, 1.);

```

Thanks for trying @Evgeni_Popov and @sebavan 😉
