Hi guys,
I have created a playground to illustrate my issue:
https://www.babylonjs-playground.com/#YDO1F#430
I have attached a png as a diffuseTexture to a material, and with hasAlpha set to false, the engine renders the transparent parts in black by default.
Is there a way to change this color to something else? I’d like that the transparent bits of the PNG to be rendered white.
It doesn’t need to be a StandardMaterial if something like a PBR works.
Thanks.
If you disable transparency, Babylon renders the diffuse texture as it is: yours has a black background, that’s why it’s black, it’s not because black would be a default color.
You have to change the color to white in your diffuse texture if you want it to appear white when no transparency.
Another possibility is to use a CustomMaterial that would set the color to white when alpha is < 1:
Hi Evgeni,
Thanks for the reply and sorry for digging up this old thread, but I got the change to have another go at this and I’m running into issues.
The diffuse texture I’m trying to attach on that playground is a png, with the black parts being transparent, it’s not a black bacground. I need the transparent parts to be rendered white.
The CustomMaterial way you’re talking about should work fine, but I’m dealing with subMaterials on my imported meshes, and applying a CustomMaterial to any subMaterial, for some reason, doesn’t work.
Does anyone else know of any other way to achieve this or how to properly swap a CustomMaterial on an already-existing subMaterial with a StandardMaterial?
Thanks again.
Using CustomMaterial does work with multi-material meshes:
https://www.babylonjs-playground.com/#2Q4S2S#343
I guess you will need to provide a repro in the PG if that does not work for you.
First of, the file you provided in the PG isn’t a PNG, it’s a WEBP. Not that it matters much in this case.
When @Evgeni_Popov talked about “background” he meant that the color of the transparent pixels are black, which they are. All pixels in an transparent PNG (or WEBP in this case) have an color, it is just that you normally don’t see the ones that is fully transparent.
If you only want to solve the problem in this specific case, or for some specific images, you can use an image editing software that will allow you to edit the color of transparent pixels and simply change them to white.
One such free program is Pixelformer:
http://www.qualibyte.com/pixelformer/
Below you can see three images from your WEBP after I converted it to PNG and opened in in Pixelformer. The first is the ARGB image, then the RGB data and finally the Alpha (“A”).
As you can clearly see, the transparent pixels (white in the alpha channel) are indeed black in the color channel. If you disable the alpha channel, you will thus end up with the RGB data, the second image.
