Colors appear desaturated in Chrome / WebKit

[belen-albeza]

Godot version: 3.1.1

OS/device including version: Chrome 78 / Mac OS Catalina

Issue description: When playing an HTML5 exported game, colors appear desaturated in Google Chrome and other webkit-based browsers. On Firefox, and when exporting the game to a native executable, colors look fine.

See this screenshot (left: Firefox, original colors; right: Chrome, desaturated colors)

[FeralBytes]

@belen-albeza Can you by chance check some unity web based games with the same 2 browsers, with pictures to compare? I am curious if it is a Chrome issue or a Godot issue. Thank you.

[lawnjelly]

Agree it looks like a colour management issue in the browser, kind of like how images can look different depending on how colour aware the app is that you view them in.

[akien-mga]

IIRC @henriiquecampos had a similar issue in the past, not sure how it got solved.

[henriiquecampos]

In my case it was a browser-specific thing, so...I had to wait for a browser update.

#13985 (comment)

I dunno if this also happens in Godot, but as a rule of thumb, don't save your color profile in images, especially if you are using GIMP.

By default, GIMP exports with a default color profile that most browsers recognize (sorry I dunno the technicality of that) but what I know is that after I stopped saving my color profile in my exports, I didn't have color profiling issues anymore.

[lawnjelly]

It might not even be a bug - the chrome version could be the 'technically correct version'. If you supply an image in standard sRGB to a colour aware application, it might do a slight conversion to this to supposedly match the monitor (that's the kind of thing monitor profiles do I believe). It might be possible in webGL / chrome to somehow tell it to not do this conversion, I don't know though.

A quick google search indicates this is a common problem:
https://www.google.com/search?q=webgl+color+management+chrome

[belen-albeza]

Hi, I have checked and Chrome does color management. What is confusing is that withing Godot (the editor itself) it appears not be color managed, and when running an exported Mac app version, the colors also are not managed.

I think it's important that colors look the same. If what Chrome does is the "technically correct version", shouldn't Godot also do color management for other export targets (and the editor)?

[name-here]

Judging from what people were saying here (though they may be wrong for all I know), Chrome is doing its own (not quite right) color management, and there isn't really a way to turn it off if you are making web content. So Godot can't really fix this.

[FeralBytes]

@belen-albeza You stated that you checked and Chrome does color management, do you mean that you tried using GIMP with and then without a color profile? Or do you mean that you tested Unity games and saw the same effect?
Firefox does not do color management, so even if Godot did color management, that would not help you in the web context on a Firefox browser.
Do you have a compelling reason for Godot to do color management? Because I can tell you that most monitors will differ and they will not apply color management correctly. I did a lot of research on this topic for my wife (an artist) about 6 months ago. In fact most users never set a color profile for there monitor as the hardware and software to do this correctly is very expensive. People set their monitors according to their own tastes. Also Godot is technically doing color management for the web export that is why Chrome shows a difference.

But I would like to kindly ask for a screen shot of Safari next to Chrome and Firefox since you are on a Mac.

[Calinou]

See also #26826.

[belen-albeza]

@belen-albeza You stated that you checked and Chrome does color management, do you mean that you tried using GIMP with and then without a color profile? Or do you mean that you tested Unity games and saw the same effect?

I have tested GameMaker (not Unity) games and I can see the same effect.

Firefox does not do color management, so even if Godot did color management, that would not help you in the web context on a Firefox browser.

No, but the issue here is that if Chrome and webkit-based browsers are doing the right thing (color management), Godot games exported as Mac apps are not doing it.

Do you have a compelling reason for Godot to do color management?

Mac screens (iMac and Macbook) do have a different color profile that is not sRGB. I have checked images in some other apps (Preview –a pre-bundled app that comes with MacOS– and Pixelmator –an image editor–) and they do appear like in Chrome – which is different than they appear within Godot and within the game exported as a Mac app (instead of wasm), where they appear more saturated

Because I can tell you that most monitors will differ and they will not apply color management correctly. I did a lot of research on this topic for my wife (an artist) about 6 months ago. In fact most users never set a color profile for there monitor as the hardware and software to do this correctly is very expensive.

Not on the Mac. It already comes with a default profile (in iMac's and laptops).

Also Godot is technically doing color management for the web export that is why Chrome shows a difference.

No, it's Chrome what does the color management. It can be flipped on and or by a Chrome flag.

But I would like to kindly ask for a screen shot of Safari next to Chrome and Firefox since you are on a Mac.

Here's a Safari screenshot – color managed as well.

And here's the game running as an app (outside the browser) – colors are not managed, so they look more saturated.

Maybe it's worth it to change the bug title? It looks like Chrome is doing the right thing, the issue is that Godot looks like it isn't.

If anybody wants to check the actual project, it's here https://github.com/belen-albeza/godot-endless-runner

I'm new to Godot and I'm not familiar with the image import settings, so if there's anything there to tweak color profiling, please let me know.

[ghost]

@belen-albeza

Might be related to the CSS settings of default HTML5 export template, I believe I had the same issue some time ago (only saw this GitHub issue today) and adding the following properties to the #canvas selector solved the problem for me.

image-rendering: pixelated; image-rendering: crisp-edges;

I'd suggest trying that to see if works for you as well. My bet is some sort of antialiasing is applied on the canvas regardless of your project settings and telling the browser not to do that helps.

[kelteseth]

@belen-albeza

Might be related to the CSS settings of default HTML5 export template, I believe I had the same issue some time ago (only saw this GitHub issue today) and adding the following properties to the #canvas selector solved the problem for me.

image-rendering: pixelated; image-rendering: crisp-edges;

I'd suggest trying that to see if works for you as well. My bet is some sort of antialiasing is applied on the canvas regardless of your project settings and telling the browser not to do that helps.

Sadly, this did not help. The only solution was to switch to OpenGLES2. See #50171 (comment)