GUI : Advanced Dynamic Texture Not Transparent

Questions
1

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 ?

2

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

3

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.

4

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
5

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
6

If I have this right, the solution provided by sebavan dispenses with jerome’s original standard material, uses instead the advanced texture with the background colour set to white, and then copies over those values with the line:

box.material.diffuseColor.copyFromFloats(1.0, 1.0, 1.0);

This works well for a mesh with a solid colour. What if you have a mesh with a standard material already applied using textures (Albedo, Bump, Ambient etc.) and you wish to add text as an overlay. Can this still be achieved using an advanced texture and some form of transparency?

Basic playground set up - please fix me:

7

Since you want to mix two diffuse textures (the grass and the text), you’ll need either a material plugin or a node material. Here’s an example using the node material to mix the textures based on the GUI texture’s alpha property (you can also add bump, ambient, etc on the mix, I didn’t for brevity): https://playground.babylonjs.com/#1R40S7#1

1 Like
8

As always the solution is elegantly simple. Thank you.

1 Like