Enable Premultiplied Alpha Mode in materials

Questions
1

Hello,

In some compositing softwares like aftereffects, it is possible to change the alpha blending of an image (like .png) to “premultiplied”. This sometimes help remove black lines around the transparent elements in the image.

Is there a way to achieve the same thing with transparent materials/textures in Babylon ?
I think the “alphamode” is there for that, but I’m not sure how to use it.

Here’s an exemple in the playground (I’m trying to remove the black lines around the cabinets):
https://playground.babylonjs.com/#9WXT4M#1

Thank you!

2

This is how to use it:
alphamode | Babylon.js Playground (babylonjs.com)

But I’m not sure this is what you want?

3

Thank you for your help!
But you’re right, it doesn’t seem to remove the black lines…
image

(at least the other blending modes like ALPHA_ADD works now)

I guess this is not a feature available in Babylon ?
Otherwise, I’ve also tried the the alphaCutOff parameter, but the result is not very good… Any other ideas ?

4

premultiplied works in babylonjs
Are you sure your alpha value is correct in your texture? (it is a png right?)

5

Well I’m guessing it’s the wrong alpha values in the textures. (yes it’s a .png)

I’m not an expert in this (sorry if I use the wrong terms), I know some rendering software (vray, maya) let you enable “premultiplied” or not when saving the image, but unfortunately the one I’m using (Unreal Engine) doesn’t have that setting.

I know that in the compositing software Nuke, the merge method to use to get rid of the black lines is “plus” instead of “over”. Is there something similar in Babylon ?

Also, when I open the image in google chrome, I don’t see the black lines (but maybe it’s because of the white background):

6

With this setup, I can see that the alpha channel is not where you want it:
alphamode | Babylon.js Playground (babylonjs.com)

In that setup we use alpha channel to do the mix and I can see the lines (eg: the alpha channel is not what you need it to be)

7

Sorry I’m not sure to understand, is there a difference between that setup and the first one? (I don’t see a difference visually)

8

yes the difference is that I removed pre multiplied and the outcome is the same. Meaning that the png does not contain premultiplied data

9

Ahh I see, you’re right!

I may have found a solution, but it’s not the most optimized and It’s not perfect…
Using 3 planes instead of 2, with the second one set to “Alpha_ADD”, reduces the black lines:
https://playground.babylonjs.com/#9WXT4M#8

1 Like
10

We are talking about simple planes so this should not be too much expensive and at least it supports your need :wink:

congrats

1 Like