PBRMaterial Albedo Color RGB in Playground Code Different than RGB Shown in Inspector and on Object

Questions
1

Hello All,

I have a simple sphere in the playground with PBRMaterial.
https://www.babylonjs-playground.com/#8MGKWK#263

I set the Albedo Color of the sphere to BABYLON.Color3(0.373, 0.008, 0.122) which represents the Bordeaux color with RGB (95,2,31).

The problem is that the color of the sphere is not the same as the albedo color I selected.
In addition, when looking at the Inspector I see that the Albedo Color for the PBR material have changed to become a color with RGB (0.639,0.111,0.384) instead of (0.373, 0.008, 0.122).

Capture
Capture934×645 58.5 KB

The color of the sphere is now (0.639,0.111,0.384), why is that??
Is there something I’m missing?

I hope it is a simple issue.
Thank you!

1 Like
2

Hello and welcome!

Yes this is a problem I expected to get…

Adding @PatrickRyan, @sebavan.

Technically: the reason is that the inspector will consider your color is from linear space (as this is how PBR works) and then will convert it to gamma space before displaying it.

3

Adding @Evgeni_Popov who added the change for gamma picker :slight_smile:

I think we need a visual indication of some sorts ???

4

That’s what I suggested when updating the inspector, but I don’t know what the visual should be…

5

@YouJ All the PBR workflow (the computation) expects the colors to be in linear space, the problem being that when colors are authored you are working in sRGB space because of the computer screen you are working with => everything would be a lot easier if the monitor would work in linear space…

So, when you pick a color like (0.373, 0.008, 0.122) in your color picker, it is in sRGB space because you can’t do otherwise, it is displayed by your screen.

Now, in Babylon, the PBR colors you set must be in linear space for the material to work as intended. So, when you do:

plastic.albedoColor = new BABYLON.Color3(0.373, 0.008, 0.122);

You are giving a color in linear space and Babylon uses it as being in linear space.

But as you most probably chose this color from a color picker it is wrong, because (0.373, 0.008, 0.122) is in sRGB space then. You must convert it to linear space before passing it to Babylon.

To do that:

plastic.albedoColor = new BABYLON.Color3(0.373, 0.008, 0.122).toLinearSpace();

Now the color displayed by the sphere matches the color you picked from the color picker:

image
image737×580 68.7 KB

7 Likes
6

Actually, I think the issue lies more in the fact that albedoColor expects a linear value and what was passed was a gamma value. Consider this:

image
image888×609 39.6 KB

The square on the left is Photoshop rendering the Bordeaux color and the sphere is the original render from the playground. Photoshop is rendering the gamma color correctly which also matches with the color picker. But passing that gamma color to albedo is incorrect because albedo is assuming linear color space. To correct this, change to the following:

plastic.albedoColor = new BABYLON.Color3(0.373, 0.008, 0.122).toLinearSpace();//Bordeaux Color RGB (95,2,31)

Which renders like this (same photoshop square on the left):

image
image860×596 37.3 KB

7 Likes
7

And @Evgeni_Popov just beat me to hitting the reply button! :rofl:

6 Likes
8

Thank you guys so much!!

Thanks @Evgeni_Popov for clarifying the issue, and thanks to you too @PatrickRyan!

3 Likes