Issue with Postprocess and alpha

Questions
, , ,
1

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

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?

2

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

3

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. :melting_face:

4

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?

5

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

6

You also need alpha: true in the options

7

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

I also tried the premultipliedAlpha option with no result.

8

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.

9

Here are the options in Babylon
image

10

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.

11

You can disable premultiply alpha to make it work:

12

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?

13

Maybe they do not support the premultiply alpha option ?

14

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

15

not that I am aware

16

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:

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 :wink:

1 Like