Something wrong with colors or inspector. It shows different values
Interesting! I confirm I see it as well:
https://playground.babylonjs.com/#9YNAL7
@avin would you mind filing a bug in the repo for this please?
Looks linear/gamma related, there was another topic about it recently.
PBR colors are in a different color space than what the inspector displays
Yes, it is not a bug.
The PBR pipeline is expecting colors to be in linear space, so when you do mainMaterial.albedoColor = new BABYLON.Color3(0.5, 0.5, 0.5);
, the color is in linear space.
In a color picker, however, the color is displayed in gamma space.
So, if the (0.5, 0.5, 0.5)
above is a color you got from a color picker, it is in gamma space! As you should feed the PBR pipeline with colors in linear space, you should do mainMaterial.albedoColor = new BABYLON.Color3(0.5, 0.5, 0.5).toLinearSpace();
By doing so, you will see that the color picker of the inspector will show you a color of (128, 128, 128)
that corresponds to (0.5, 0.5, 0.5)
.
Maybe I don’t understand something but the colors are different anyway - https://playground.babylonjs.com/#9YNAL7#2
Initial color #e50c0c = RGB 229 12 12
Inspector shows #e50b0b = RGB 229 11 11
That’s because the color picker of the inspector is doing a truncate
instead of a round
to display the decimal value:
The inspector is doing the conversion to int like in the last line in the screenshot above.
@Deltakosh Maybe we should do a Math.round(...)
instead?
I’m fine with it
PR:
Erf, I just spend a couple of hours trying to figure out why my colors tweaked using the Inspector were not applied correctly once assigned in the albedoColor by code.
I think it could help to mention the linearSpace tips somewhere inside the color picker, what do you think?
[edit] or better, doing like Blender which shows the “right” color:
Adding @Deltakosh.
Good idea
Please create an issue for me