Clear color transparency causes color to disappear entirely in some circumstances

Clear color transparency seems to work for some colors, but not others. I included a scene with 3 different clear colors with transparencies. The first one just shows up as straight white, although it should have at least some tint to it. However, other colors work fine at the same alpha value. Has anyone else seen this? Or is it perhaps user error?

I can see the difference between white and your first color. It is small but evident.


Make sure that your display is calibrated properly.

1 Like

Wow. the default macbook color display shows it as pure white. (made the sphere pure white to test comparison)

Changed the color profile on the macbook and all of a sudden it shows up clear as day.

2 Likes

@labris i will say that the clear color does not seem to match what i would expect. Its almost a teal color,


(note that i flipped the g and b values, had a typo the first time around, new link is here: https://playground.babylonjs.com/#U490IZ#20).

However, that rgba value seems like it should be a much darker blue.

That’s because you used alpha=0.5, so it is blending with the white background. If alpha=1:

alpha=0.5 but with a pure red background:

Its still pretty radically different than the same values mixed with white via css:

Is this expected due to lighting? i guess i expected clear color to be independent of lighting and to match the color exactly.

That’s because the browser is using pre-multiplied alpha for the composition with CSS.

If you want the same result when the scene is rendered, you should multiply the r/g/b components of the clear color with the a component of the clear color before passing it to the scene:

3 Likes

Wow. i never ever would have known that. Thank you.