Color of the PBRMaterial

Questions
1

Hi guys,

I checked some colors in my PBRMaterial recently and found that the color changed somehow. Has anybody tried to check the color here in Babylonjs?

So in my case, I put a albedoTexture with four color in the material, I build the texture in photoshop and put the rgb value. yellow(254,205,0), grey(43,43,43), black(0,0,0), blue(0,127,159). I did nothing about color here, and the picture has no color profile(no srgb). I don’t know if I shoud reference the srgb to it or not. I uploaded the picture in a online hosting website, the color changed, I think it is because the srgb convert, yellow(246,204,25),grey(46,46,46),black(0,0,0),blue(0,126,157). The picture is here.

Then I created a simple scene with a direction light and PBRMaterial. I turnned off all the parameters in TEXTURE CHANNELS in inspector except the “Diffuse”, and turnned off all the parameters in FEATURE except the “Lights” and “Textures”. After that I tried to change the light intensity, to make the color of yellow and blue similar to my photoshop value, but then the gamma changed automatically. yellow(246,205,44), grey(55,55,55), black(37,37,37), blue(37,128,159).

Here is the scene in playground:
https://www.babylonjs-playground.com/#PYK96N

I just want to check the gamma(grey scale) and colors of my PBRMaterial. For example I have a color checker, how can I get the similar grey scale and color values in my scene with PBRMaterial to the real grey scale that I have in my hand in the color checker? As we know, we always get the rgb color from the color checker when we buy it. Actually I tried the color checker locally in my computer, got similar grey scale but never a black color, even though the grey scale are similar, the color changed a lot, especially the yellow and blue color, same like what I got in the playground scene.

Perhaps it is just something about gamma correction in the PBRMaterial.
Perhaps you have an idea?

Thanks,
Sonja

2

Pinging @sebavan

3

If you want your texture to keep exactly its color information, I think you just have to disable lighting on it : https://www.babylonjs-playground.com/#PYK96N#2 (here I got the same result than the one on imgur)
Otherwise, your material will surely be mixed by the scene setup, and so your colors be modified.

4

another example with hemispheric light instead of direct, I get (yep ok, almost) the same texture than the raw texture : https://www.babylonjs-playground.com/#PYK96N#3

5

Hi Vinc3r,

So it means, that the color changes because of the lights in the scene? But do you know how strong is the effect of the mixing? It is a PBRMaterial, I need lights for it, I can’t use a unlit material. The colors changes really a lot when I use a spot light. I just found in my scene, the dark colors get too dark, and the bright colors get burned, and some other color get hard mixed(e.g. blue color and pink color). When I put my color checker under the D65 light, the color is pretty similar to the rgb color in my photoshop…

Thanks,
Sonja

6

I’m walking on eggshells about calculating part, but here some clues :

7

ok, I understand, the lights affect a lot for the final colors. What i can do is, 1. I need to keep the raw picture in a stable color enviroment(reference it to the srgb color profile); 2. tricking my spot lights to get the most similar result with my color cheker…Can I do something more?

8

You can also play with ambientColor. Here, no light at all : https://www.babylonjs-playground.com/#PYK96N#4

9

Also to prevent to dark and burnt colors you could turn on tone mapping on the imageProcessingConfiguration. I would recommend to use the ACES mode for it.

https://www.babylonjs-playground.com/#PYK96N#5

1 Like
10

emmm… with ambientColor, I can’t get shadows …ok, thanks a lot. I am going to play with these infos and try to get better result.

11

thanks for the information, I have already tried the tone mapping, it helped a little bit :smile:, I am going to trick the lights then. I know it is always a little bit mess to do something with the color management. But it is good to know where is the real problem.

12

Hey,

I tried something with the post-processing! Since my scene is an indoor scene, the lights what I’m using are for shadows. The models and lights(directional light) have fixed positions, so I just get the idea to correct the color from the output of the camera in a post-process with a color correction matrix, which just applys to every pixel of the screen. https://www.babylonjs-playground.com/#PYK96N#8
I don’t know, if this way is expensive for the rendering or not. This is just a small color checker, with a bigger color checker I will perhaps get a better representation in grey scale. I’ going to try it…

13

Yep postprocess is also a way to do it indeed!

Using the defaultRenderingPipeline you already have the colorGrading implemented. You can do quick plays in the playground to test it but I see something is missing to the doc’, check this thread on the old forum: Default Rendering Pipeline and colorGrading - Bugs - HTML5 Game Devs Forum (I take note to do the required addition to the doc’ ASAP…)

15

Hi,
It looks very helpful. I played with it, it works, now is just a little bit problem, I just want to correct some of the colors, not all. When I use photoshop to generate the look up table, it might be very hard. So the color correction depends on my light, and it is necessary to generate one lut for my scene. How do you get you lut? With some special software?

16

Hi,
I need to correct the color of my scene output in post-process, and I am thinking about to use Custom postprocesses with fragment shader or use builtin Color Correction with a look up table. Either of them should be enough for my purpose. Could you give me some suggestion about the cost of them? which is effectiver for the rendering pipeline? Here is my custom fragment way: https://www.babylonjs-playground.com/#PYK96N#8, it is just a color correction matrix.
I’m a little bit afraid of this custom fragment way, because the fps drop down sometimes wenn I scroll the mouse on my computer.

Thanks

17

You could use the colorGradingTexture of the scene.imageProcessingCinfiguration for that. It supports standard 3dl LUT and might help you doing exactly this.

18

thanks,
It works perfect.https://www.babylonjs-playground.com/#PYK96N#9
I generate the 3dl look-up-table in photoshop and it works fine.

3 Likes