# Enable Premultiplied Alpha Mode in materials

**URL:** https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910
**Category:** Questions
**Tags:** material
**Created:** [October 29, 2021, 10:44pm UTC](https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910 "2021-10-29T22:44:38Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![waketeu](https://avatars.discourse-cdn.com/v4/letter/w/a87d85/32.png) [@waketeu](https://forum.babylonjs.com/u/waketeu)
#### Post date: [October 29, 2021, 10:44pm UTC](https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910/1 "2021-10-29T22:44:38Z")

</div>

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](https://playground.babylonjs.com/#9WXT4M#1)

Thank you!

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [November 1, 2021, 3:23pm UTC](https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910/2 "2021-11-01T15:23:33Z")

</div>

This is how to use it:  
[alphamode | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#9WXT4M#3)

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

---

<div class="post-metadata">

### Author: ![waketeu](https://avatars.discourse-cdn.com/v4/letter/w/a87d85/32.png) [@waketeu](https://forum.babylonjs.com/u/waketeu)
#### Post date: [November 1, 2021, 3:48pm UTC](https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910/3 "2021-11-01T15:48:01Z")

</div>

Thank you for your help!  
But you’re right, it doesn’t seem to remove the black lines…  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/0/90a9a18dd3c9773043d3a4b932b6f484aae4bec8.png)

(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 ?

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [November 1, 2021, 3:53pm UTC](https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910/4 "2021-11-01T15:53:52Z")

</div>

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

---

<div class="post-metadata">

### Author: ![waketeu](https://avatars.discourse-cdn.com/v4/letter/w/a87d85/32.png) [@waketeu](https://forum.babylonjs.com/u/waketeu)
#### Post date: [November 1, 2021, 4:31pm UTC](https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910/5 "2021-11-01T16:31:29Z")

</div>

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):  
[![](https://i.imgur.com/2Jqem4y.png) ](https://i.imgur.com/2Jqem4y.png)

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [November 1, 2021, 4:38pm UTC](https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910/6 "2021-11-01T16:38:56Z")

</div>

With this setup, I can see that the alpha channel is not where you want it:  
[alphamode | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#9WXT4M#6)

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)

---

<div class="post-metadata">

### Author: ![waketeu](https://avatars.discourse-cdn.com/v4/letter/w/a87d85/32.png) [@waketeu](https://forum.babylonjs.com/u/waketeu)
#### Post date: [November 1, 2021, 4:54pm UTC](https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910/7 "2021-11-01T16:54:04Z")

</div>

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)

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [November 1, 2021, 5:29pm UTC](https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910/8 "2021-11-01T17:29:08Z")

</div>

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

---

<div class="post-metadata">

### Author: ![waketeu](https://avatars.discourse-cdn.com/v4/letter/w/a87d85/32.png) [@waketeu](https://forum.babylonjs.com/u/waketeu)
#### Post date: [November 1, 2021, 5:30pm UTC](https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910/9 "2021-11-01T17:30:19Z")

</div>

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](https://playground.babylonjs.com/#9WXT4M#8)

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [November 1, 2021, 5:58pm UTC](https://forum.babylonjs.com/t/enable-premultiplied-alpha-mode-in-materials/24910/10 "2021-11-01T17:58:33Z")

</div>

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

congrats
