GUI : Advanced Dynamic Texture Not Transparent

Hello,

I want to set an AdvancedDynamicTexture (ADT) on a single side of a box. So, I use the faceUV param at box creation time, what set the UVs of 5 from the 6 sides to (0, 0, 0, 0).

Then I create an ADT for this box. The whole box becomes transparent. Accessing its material and setting its alpha to 1 doesn’t change the box opacity.
Box with standard material : https://www.babylonjs-playground.com/#SVZL1I#7
Box with ADT : https://www.babylonjs-playground.com/#SVZL1I#8

I would like to get the same opacity than the default standard material one with the ADT. How could I achieve this please ?

Actually, the only way to fix this that I found is to set the opacity texture to null and a white diffuseColor.
Not sure this is the right hack
https://www.babylonjs-playground.com/#SVZL1I#9

Other related question : when using the former hack, why is the black text outline not visible ?
https://www.babylonjs-playground.com/#SVZL1I#11

same question when the text itself is black : https://www.babylonjs-playground.com/#SVZL1I#12
I guess it’s related to some color blending between the ADT and the material diffuse color, but no idea how to fix this black removal… only if this hack is the right one to disable the ADT transparency.

To not have the transparent cube you could set the background of the ADT to a color: https://www.babylonjs-playground.com/#SVZL1I#13

About the outline it is because by default it is using emissive sampler and black emissive results in no changes.

You can also use the texture in diffuse or totally disable lighting on the cube:
https://www.babylonjs-playground.com/#SVZL1I#14

2 Likes

Excellent !
I didn’t notice the property .background in the ADT class itself.
I wouldn’t have found by myself the trick to set diffuseTexture to the emissiveTexture value, then to set this latter to null… Weird, but works :smiley:
Thanks you

1 Like