A colour-puzzle to solve - Visual differences between Blender, Photoshop, Substance and BabylonJS

@sebavan @Evgeni_Popov
Hello you both , thanks for digging into the topic with us.
We have tested a bit more.

There is a few news to this.

The extreme color shift clearly comes from my monitor’s colour profile: Dell XPS 17 SHP14D6 Display - Intel(R) UHD Graphics.
We have compared looking at the same images and 3D viewports across several devices next to one another.
So the only solution for me is to find a colour profile for the screen I can set while working, or find out how on earth to change the viewport settings in Blender and Substance to represend sRGB colorspace.
So far nothing i set there seems to have an impact and make it appear like it would in an sRGB environment.

So any ideas or tips are welcome :slight_smile:

The lesser - but still noticeable - colour shift still appears when tested across several browsers.
(now tested on a plain sRGB monitor to avoid colorconfusion from my profile)
We noticed that Chrome and Brave use Webkit, and Firefox uses the Gecko Engine.
So maybe there is a “hint” within that info.

Therefore we made 2 more tests, to showcase the difference.

A. with a uniform color on an unlit material compared with colorpicking between 2 browser outputs.

B. with the same setup as described in one of the former posts (no IBL, ambient in material and scene to white)


It might be hard to see, but firefox clearly has more “cyan” in the blue tone.
Brave and Chrome pretty much have the same blue, whilst Brave has a bit loss of contrast on top.

As a result it seems that Firefox with the Gecko Engine, gives the closes result to the actual color.
So that’s interesting.

1 Like

On that note @PatrickRyan do you have any ideas on how to change the viewing colour space in Substance or Blender to match to correct sRGB working space?
I can easily set it in Photoshop but seem out of luck within the other 2.

It seems that nothing I set in colour management gives me the same look as when I’d switch in Photoshop to sRGB working space.

I know it might be tricky to test for you since you are running on a monitor with sRGB, but maybe you know what settings to set - just fishing for any help or tips =)

edit might have just found it - see next post :slight_smile:

@ whomever faces the same issue:

Problem to troubleshoot:
having any UHD monitor profile that does not match with the clamped sRGB space browser environments or other environments you might work with.

Solution:
I might have just found the magical setting
Left Substance Painter Basecolor Channel - Right Babylon Sandbox with unlit material and no environment

Still a tiny bit of difference in brightness and contrast, but this is at least close enough to be able to work in visuals that match the outcome of when you’ll be adding it in Babylon.

This menu above will be enabled when you switch in Painter in your Project Configuration in the Colour Management to “Adobe Aces”.

It will enable the dropdown menu on top of your viewport to switch between Adobe aces and your Monitor’s profile.

image

There is a few more settings to set it to OpenColor IO and then chose “Aces 2020 Limited” in the viewport dropdown which also gives a pretty close result.

But the Adobe Aces seems to come closest.

1 Like

Regarding the differences in Firefox, can you have a look at these settings:

I know we needed to change the force_srgb and/or native_srgb properties because of some differences between Chrome (can’t remember exactly in which case, though…).

3 Likes

Hello @Evgeni_Popov
thanks for the answer :slight_smile:

It explains the difference, but maybe exposes that some change needs to be done to how the setup is in Chrome too.

Because Firefox is actually the one showing it correctly / being the closest in color.

1 Like