BABYLONGUI Container transparency

Bugs
1

Not sure if this is definitely a bug, but here goes.

https://playground.babylonjs.com/#XCPP9Y#6346

Changing the alpha of the container seems to change the alpha of the children, which gives a different result to what you’d expect when you have overlapping elements within the container (see the darker bar in the center where the two black boxes overlap). In standard DOM, I believe it’s the case that the alpha is applied to the container directly rather than flowing down to the children, so we wouldn’t see the bar where the images overlap.

Is there any way I can get the DOM style functionality?

My use case is I’m attempting to place images that I’d like to be partially transparent next to each other. Obviously this isn’t going to work in a scalable UI as controls end up rendering with fractional bounds, leading to those darker overlap bars. So, I was hoping to get around it by having the images 100% opaque, grouping them together in a container, and then setting the containers transparency. I could then (in theory) make them all overlap by a pixel to ensure no gaps occur, and overlapping wouldn’t result in darker transparency bars.

Is there maybe another solution to this conundrum?

2

Apart from creating a texture “by hand” where you copy all your other textures and then use this single texture with some alpha value I don’t see how to do it. To do what you want, the GUI would need to do some blending itself whereas we are relying on the globalAlpha property of the 2D context to perform the blending each time we draw a control.

3

Unfortunately I can’t create a single texture by hand, as at runtime I would like to change how the parts are positioned and sized :frowning_face:

I don’t have a great understanding of web APIs, but I will have a go at making a change to the GUI package to support what I’m thinking of. Will reply back hopefully tomorrow with my attempt :slight_smile:

1 Like
4

Time really got away from me here! I spent a while going through the BABYLON GUI code, and I think I’ve finally got a workable solution. I’ll do a fork and post my changes after testing. Basically, I’ve added an optional argument to the Container, “renderToIntermediateTexture” which makes transparency behave like divs in the DOM.

5

The solution seems to work :slight_smile:

1 Like
6

It is pretty smart!