GUI background color

Questions
1

Hello,

We have a strong difference of color between rgb given in rectangle background and result in the scene.

Here is a PG : https://playground.babylonjs.com/#APRUXC#1

If you inspect the rectangle with a color picker it is different than the one set in :
bubble.background = “rgb(34,66,149)”;

In our game, it is even worth :

color change
color change1920×1080 8.85 KB

Any idea, which parameter can be responsible ?

2

Here you can see a side by side pure CSS vs the GUI
image

I am not able to spot a diff in your playground :frowning: What browser are you using ?

3

Neither can I :sweat_smile:

I tried with a different color picker which give me the correct rgb values on the scene. Weird…

In our game, I found a solution by loading GUI library sooner (it is not included in the main webpack that load babylonJS), it works, but still can’t understand what process can interfere with color. Maybe the layer ?

4

@DarraghBurke - is there anything that can ammend the background color of a GUI element outside of the scene itself? I assume lighting should not be an issue, right?

1 Like
5

From the above, I would make a guess about the gammaSpace coming from a renderingPipeline?
Where colors in the BG would be in the gammaSpace and rectangle would be (well, linear).

@Samuel_IMBERT
In any case I tried converting the values to a HEX color, pasted’em in PSD and got the exact same result. So, I’d say it cannot come from the GUI on its own. Either it’s the color of the back mesh that is wrong or post process is applied.

gui-colormatching
gui-colormatching1681×978 172 KB

6

Nothing that I can think of…looking at the two different colors in the OP, they seem too different for this to be a color space issue. Honestly not sure what could be going on here…The fact that it’s dependent on the way you load Babylon makes me wonder if it might be related to incompatible versions?

7

everything is possible. I am at a loss as well. We will require some form of a reproduction to be able to answer better

8

Thanks everyone.

It seems it was indeed related to incompatible versions and the way we load @babylon/gui.

I couldn’t find a way to explore the rendering pipeline of the GUI layer so couldn’t investigate further.

3 Likes
9

There is no specific to the GUI rendering pipeline, it’s just the rendering pipeline (at least by default).
Glad you found your answer for this issue. GL with your project,