search

godotengine / godot

Godot Engine – Multi-platform 2D and 3D game engine
https://godotengine.org
MIT License
90.26k stars 21.04k forks source link

GLB import albedo texture uses sRGB space for Windows export but linear space for HTML export (GLES3) #60482

Open matt-kimball opened 2 years ago

matt-kimball commented 2 years ago

Godot version

3.4.4

System information

Windows 10

Issue description

I have a GLB model with an albedo texture. For the GLB import, I have chosen Material Storage: Built-In. When I export for Windows (or run in the editor) the albedo texture uses sRGB color space, but when I export for HTML the albedo texture uses linear color space. native web

Both of the above images use the texture below, which has a white/black checkboard pattern on half, and an 0.5 grey value on the other half. In linear space they will appear to be the same brightness, but in sRGB space they will not.

texture

Steps to reproduce

Import a GLB model with an albedo texture. Don't change the material. Notice that the Windows editor and Windows export interpret color values in the albedo texture as sRGB, regardless of the 'sRGB' checkbox being unchecked in the material's albedo texture. Notice that the Web export will interpret the color values in the albedo texture as linear, because the 'sRGB' checkbox in the material's albedo texture is unchecked.

Minimal reproduction project

srgb_vs_linear.zip

Calinou commented 2 years ago

Note that using GLES3 on HTML5 is not recommended due to long shader compilation times on some browsers. It's recommended to switch to the GLES2 renderer instead.

matt-kimball commented 2 years ago

Note that using GLES3 on HTML5 is not recommended due to long shader compilation times on some browsers. It's recommended to switch to the GLES2 renderer instead.

Duly noted. However, in the project where I encountered this issue originally, GLES2 was not possible due to needing texture atlasing from BakedLightmap.

fire commented 2 years ago

Godot does not implement the gles3 srgb extension. See also https://developer.mozilla.org/en-US/docs/Web/API/EXT_sRGB

I explored this but didn't get to the result. https://github.com/V-Sekai/godot/commits/web-srgb

matt-kimball commented 2 years ago

Godot does not implement the gles3 srgb extension.

I don't know the Godot WebGL code, but I don't think that is the issue here.

Some additional information is that if I check the 'sRGB' checkbox on the albedo texture, the HTML5 and Windows exports have matching behavior, because then the HTML5 imports the albedo texture as 'sRGB' . See image below.

srgb_check

From my viewpoint, it seems like the Windows build is in error by ignoring that 'sRGB' checkbox, and the HTML5 build is actually doing the right thing.

As a second issue, I believe the default value for that 'sRGB' checkbox should be True. Albedo textures are usually stored on-disk as sRGB, not linear. It is just the case today that nobody notices it is wrong, because the editor and Windows export ignore the checkbox and happily load the albedo texture as sRGB anyway.

Calinou commented 2 years ago

Can you test this in Firefox? This could be related to https://github.com/godotengine/godot/issues/34062.

This issue could also be a duplicate of https://github.com/godotengine/godot/issues/50171.

matt-kimball commented 2 years ago

The result is the same in Chrome and Firefox.

Given this, I do not think it is the same issue as #34062. The root cause might possibly be the same as #50171, but the observed behavior is significantly different, so it is unclear to me whether that is the case or not.

matt-kimball commented 2 years ago

To make it even more clear why I think it is the native / windows export / editor that is in error, I have created a texture where the word 'sRGB' will be shown when displayed in sRGB color space and the word 'Linear' will be shown when displayed in linear space:

color_space_texture

Notice that the Godot editor is actually inconsistent about which space textures are displayed as in the UI:

color_space_ui

When I change the 'sRGB' setting indicated, you can observe the behavior of the GLES3 HTML export actually change! This is what I expect.

HTML export set to Linear:

html_linear

HTML export set to sRGB:

html_srgb

However, when changing this setting and exporting a native Windows build, you see there is no different in display.

Windows export set to Linear:

native_linear

Windows export set to sRGB:

native_srgb

Here is the project using this texture. I hope that it is helpful and clear:

color_space.zip

Calinou commented 2 years ago

Notice that the Godot editor is actually inconsistent about which space textures are displayed as in the UI:

When using GLES3, Godot expects textures in sRGB color space for 2D rendering and linear for 3D rendering (only for albedo maps). Therefore, the inspector preview will look wrong for textures that are used in 3D. See also https://github.com/godotengine/godot/issues/48039.

matt-kimball commented 1 year ago

This is still an issue with the 4.0 release.

The color_space.zip two comments above can be used to easily compare the native Windows export vs the web export in Chrome. In the Windows build, the color space is sRGB, but the web export in Chrome shows the color space is linear.