PNG bad color reproduction, Godot 3.1

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By s4m_ur4i

Hey,

I’m new to Godot, so maybe I overlooked something. When I export an PNG no matter if color-profile included are not. The sprite looks way different when using in Godot, especially in the darker colors. Usually I would say this is a color profile conflict, but even for this, the colors are so far off, that it makes me think it could be something else.

PNG files:

  • 8 Bit, sRGB
  • tested profiles: non-included, sRGB, adobeRGB, P3
  • tested filesizes: 160x160, 320x320,640x640,1024x1024

Interesting is also that in the “filesystem sidebar” the PNG files appear normal with perfect colors. By using them in the editor, preview-camera and running game, the colors are mismatching.

I use a camera environmental setting, but also setup a blank project and the problem still is reproducable. The only thing I found on the internet so far is this threat:
https://forum.godotengine.org/38447/bad-color-reproduction-on-godot-3-1

This post says the colors are “overly saturated” which I would agree that this is the exact same issue I have. I also use “Affinity Designer”; But also tested exporting from Photoshop, the result is the same.

  • HDR is turned off in the project settings, also change the render quality to high to see if it makes any difference.

any support on this would be highly appreciated :slight_smile:

~ sam

Can you provide that PNG to test if it happens on other setups? If it’s not due to sRGB conversion then perhaps it should be a bug on Github.

Zylann | 2019-02-15 13:51

Hey Zylann, thanks for looking into this.

behind my google drive link you will find an example image (test.png), which I can reproduce the effect with. Also a screenshot of what my result is (screenshot.png).

https://drive.google.com/drive/folders/1SPQnTwHrDH_RfwkzA4MJhcux5qXABHAp?usp=sharing

Thanks!

s4m_ur4i | 2019-02-15 14:14

I created a Godot 3.1 beta 4 project, dropped your PNG as a Sprite, and it looks pretty much okay. There are some slight differences if I open the PNG with the Windows image viewer, but if I try in Paint.NET colors are identical to Godot. Do you have a project to share that reproduces the color discrepancy?

Zylann | 2019-02-15 19:45

Thanks again for looking into this :slight_smile:

under the link you can now find the example godot project:
Googel Drive

I am not sure but I think Paint.Net doesn’t have a “good” color management? The difference you can see in the screenshot laying in the folder. Godot itself is showing the difference between the ressource sidebar and the used asset “in scene”. But Maybe I made a mistake by setting up Godot, hope the example project makes it more clear.

Thanks

s4m_ur4i | 2019-02-16 00:33

In Godot, colors show lighter, but I didn’t know you were using this image for 3D. sRGB was set to Detect in the import settings, changing it to Enable appears to fix the colors in 3D (even though it now looks darker in 2D, but that’s a neverending annoyance in Godot because OpenGL requires different sampler setups for different color managements, which means same texture can’t properly be used both in 2D and 3D without having color issues). The fact previews are made darker is beyond my understanding though, since they are supposed to be be generated, unless Godot uses the texture directly which would explain it.

I also opened your PNG in Gimp, which detected the embedded color profile, asking me to convert it to RGB. Godot uses a quite simplified PNG loader so maybe it just doesn’t auto-recognizes it?

Zylann | 2019-02-16 01:29

Thanks so much again for looking into this.
I changed the import setting to “Enable” and reimported the assets. But now the image has a yellow peek in its colors. It’s probably the same way off as before. Before it was more in blue-, now it’s more in a yellow direction, did you had the same result?

That said, if it’s right now the current behavior, how do I make a graphic that blends into a background color? Since the color is always a bit off, I can’t do the color right, is that correct?
(I don’t mind a small variation in colors, but as far as I can see it right now, it’s a good amount off. Just want to get sure that it’s not me)

Thanks you so much for your afford helping me out!

s4m_ur4i | 2019-02-16 01:43

I’m not sure what you are seeing now, the image looks correct to me in 3D, only the file browser previews are too dark. Here is what I have, compared between Gimp and a screenshot of the viewport: https://zylannprods.fr/dl/godot/qa/png_color_profile_test.png
The top right part still looks slightly off, but I’m not sure it can be made more accurate. If you want your color profile to be used by Godot, maybe you could post an issue about it (because you used sRGB and Godot is supposed to support that format in 3D, though I’m not a color profiles expert). Also my screen isn’t the best for color precision so I might be missing other nuances, being comparing with color picker so far :stuck_out_tongue:

Zylann | 2019-02-16 01:57

Oh well, yours looks pretty good tho.
Can you send me the example project or a screenshot of your import settings? that would be great. I think I got something wrong at my end. (I am also on a low end PC right now, everythings a bit buggy, will have a look once I get on my bigger machine).

Since it looks fine at your end, I think the “enable” setting on the import is the correct answer to this question.

Thanks a lot!

s4m_ur4i | 2019-02-16 02:01

Well, all I did was to go to the import settings of your image, and setSrgb to Enable, then click Reimport.
Changing quality to a Lossless compression might also help.

Zylann | 2019-02-16 02:03

Alright. Will have a look on this later. But I think that’s it. Thanks a lot for looking into this.

s4m_ur4i | 2019-02-16 02:04

:bust_in_silhouette: Reply From: s4m_ur4i

Answered by @Zylann

In Godot, colors show lighter, but I didn’t know you were using this image for 3D. sRGB was set to Detect in the import settings, changing it to Enable appears to fix the colors in 3D (even though it now looks darker in 2D, but that’s a neverending annoyance in Godot because OpenGL requires different sampler setups for different color managements, which means same texture can’t properly be used both in 2D and 3D without having color issues). The fact previews are made darker is beyond my understanding though, since they are supposed to be be generated, unless Godot uses the texture directly which would explain it.

I also opened your PNG in Gimp, which detected the embedded color profile, asking me to convert it to RGB. Godot uses a quite simplified PNG loader so maybe it just doesn’t auto-recognizes it?

:bust_in_silhouette: Reply From: jluini

If you are here because your pngs looks too light, check if they are 8-bit.
In my case the png are shown lighter in godot 3.2 until I reexport them with gimp (who changes them from 16 to 8-bit). I ended up finding in the docs (https://docs.godotengine.org/en/3.2/getting_started/workflow/assets/importing_images.html) that only 8-bit pngs are supported.

PNG (.png) - Precision is limited to 8 bits per channel upon importing (no HDR images).