ALPHA_ADD not blending with css background only on MacOS

ALPHA_ADD blended materials completely disappear on MacOS when scene.clearColor is set to transparent and a css style is applied to the background.

Here is a playground:
Alpha blend emissive bug test | Babylon.js Playground (babylonjs-playground.com)

Note that the sphere will render correctly on PC but is partially hidden on MacOS. Reproduced on multiple machines running MacOS Monterey. Reproduced in both Safari and Chrome.

It actually looks like this on my desktop:

which sounds correct as we use this setup in Alpha Add:

image

and so everything out the plane will have an alpha of 0 based on 1 * 0 + 0 * the sphere value.

to fully add you could use https://www.babylonjs-playground.com/#5R8E9V#11


This is what I see on my PC (which I think is a really neat look!).

Maybe the question is: is there a reason that html calculates into DST on some platforms but not others? Being able to blend with background HTML would be really valuable to me at least :slight_smile:

You could try to force premultipliedAlpha to false in the engine options.

By default blend is in combine mode between the canvas and the html. I do not understand why your PC would provide such results with the current setup except maybe due to alpha premul ?

Forcing premultipliedAlpha to false on my PC reproduced the issue. ALPHA_ADD objects are no longer visible against the background. Interestingly in my project when I use a highlight layer, I can see the objects rendering in the background but only within the blur radius.

MACOS is currently having quite a few bugs (related to Render Target) that should be fixed soon as it has been fixed in Angle and ported to webkit last week.

1 Like

Nice! Take a look at this:
Alpha blend emissive bug test | Babylon.js Playground (babylonjs-playground.com)

I think I might be able to work around this by creating a layer with a very light alpha texture.

1 Like