How to improve lighting/coloring?

Hello Babylon Forum :slight_smile:

I have been working on my project for a while now and tried rendering my test-scene in Playcanvas as a reference. The results look AMAZING (in my humble opinion) :smiley: The results in PlayCanvas look richer in color and sharper. Also, the metallic effects on the chrome parts look better… :confused: I don’t seem to be able to recreate this look in Babylon and would like to know your thoughts on this.

This is my PG.

I am using ACES Tone mapping in both engines and a directional Light in the same angle. I know that there are different environments used, but I can’t imagine that this is the only reason for this immense difference… (they are also similar in their color theme)


PlayCanvas


Babylon

Thank you for any Help you can provide <3

PS: ChatGPT could not help me this time…

Maybe it has different hdr?

Look at the bg:

Yes, I would say about the same. Looks like you have a different env. If I change some of the skybox mat properties and lower the env intensity, I tend to get a similar result.

I am using the sky material as skybox in Babylon. I thought this does not have any effect on the lighting/coloring of the scene. But yes, like i said, there are different environments used. I just did not think it would have such a great effect. I am not sure if i can get my hands on the hdr / env used in Play Canvas but i’ll give it a try.

Yes, i know, but they are similar in their color theme and i thought it would not have such a great impact.

Oh, I did not know that you could change those properties via code. I’ll see what i can find and try it out :slight_smile:

Thank you

Tone mapping is not enabled in your PG, you must set postprocess.toneMappingEnabled = true;.

Also, to compare with Playcanvas, in addition to making sure you use the same env texture, you should also make sure you create the same directional light with the same direction / intensity.

Note that you have an error in your PG because mesh is undefined (line 47).

Thank you!

I am pretty sure it has nothing to do with the environment. I disabled both environments and made sure the light is exactly the same (angle/intensity) but there is still a large difference in the color tone (see images). I thought it could have something to do with the Gamma Correction? I am still relatively new to all of this, as you might notice…

PlayGround


Play Canvas with Gamma Correction=2.2


Play Canvas with Gamma Correction=1.0 → colors appear not that rich but a bit more pale


Babylon

Firstly: Could it be that the gamma correction causes the richer colors, and if so, can i adjust the gamma correction value for Babylon? I thought that Babylon has a gamma correction value of 2.2 by default?

Secondly: Even with just the Object and one simple light, the Scene looks different (brighter in Play Canvas). It seems to me that the light intensity value of the both engines is not comparable…

I am very grateful for all your support. Could not do it without you :slight_smile:

and what about the distance vs scaling of the scene? I’m not gonna ask about the type of light as I believe it is the same.

Problem is I do not know about Play Canvas so it’s hard for me to answer. But obviously, the lighting conditions are very different (looking at how the ground is ‘exploded’ in the play canvas version with correction gamma 1.0 VS the BJS screenshot). This is something that exposure and contrast cannot modify globally while keeping with the walls nearly black. So I’d say, either it’s a problem with the channelling or values of ‘metallic’ or/and something with the lighting.

No way we can notice that in this topic. The handling of colors, lights and materials across apps (and even within a single app) is already an expert subject. And experts themselves aren’t always quite sure which one influences or handles the other :grin:

You should also try to display your model in another glTF viewer (like https://gltf-viewer.donmccurdy.com/).

Position and Scaling of the (directional) lights is also the same :smiley:

Is there a way to change the gamma correction for the whole Scene in Babylon?

Could you please explain what you mean by that?

Thank you for your time!


PlayCanvas Gamma = 2.2


Babylon


glTF Viewer

In the viewer i tried to use simmilar settings. It looks closer to PlayCanvas I’d say…
Again the wood texture is more colorful

First and foremost, you should listen to evgeni’s advise. He’s the true expert :stuck_out_tongue_winking_eye:

Next, check out my screnshot, with my twisted directional light.
Doesn’t it look pretty similar to your 1.0 gamma Play Canvas version?

Here I pushed the direction to *100 essentially, so the ground is now ‘exploded’ as in your play canvas screenshot and the walls nearly black.

Note that the gamma correction on the entire scene will make the black point whiter (greyish) or the white point less white (greyish) ALTOGETHER. So this alone cannot explain why the walls would be nearly black while the ground texture is ‘exploded’/overexposed)

Can you take both (gltf viewer and bjs) screenshots from (roughly) the same angle, distance and position?

Edit: Look at your latest screenshots. In the BJS version the wall to the right is nearly black as opposed to gltf-viewer version. It could be a clue to a difference in the light position/direction/intensity but without shots from the same view it’s hard to tell.


BJS


glTF Viewer

Is this good enough? It realy looks like the lighting i totally different… I cant explain myself why.

EDIT: Here is the newsest version of the PG where the light is simply added by giving it a direction.

Sure is. What I can notice instantly in these 2 screenshots is that the wall to the left is darker in the bjs version than the one in the gltf-viewer. Whereas, interesting enough, the right wall is darker (nearly black) in bjs but is lighter than the left wall in the gltf-viewer.
Also, the backwall, in gltf-viewer is darker than the side-walls where in BJS, it’s the other way round…

right-handed vs left-handed, may be? @Evgeni_Popov

Do you think that the reason for this behavior also causes the pale color of the wood texture?

Are you sure you are using a directional light in play canvas?
I think for once you have an issue with scaling. May be also with left-handed vs right-handed and if I displace a directional light slightly from the center, I will always have one wall not lit correctly! The more I think of it, the more I believe we are just cumulating issues/discrepancies here.
In the below SS, I revamped the values of the directional light (/10) and inverted the z-axis.
I now have a backwall darker then the left wall side, but I cannot have the right wall correctly??!!

Yes I am :smiley:
image