OpenGL Vulkan color comparison

It seems to me that there is a difference in color grading (or some other color property) between openGL and Vulkan. Attached the same image rendered with openGL (left) and Vulkan (right). This is only a small portion of the screen that, in general, looks quite more desaturated with Vulkan…

Is this to be expected?

Thanks!

color_opengl_vulkan

How is this getting rendered? Are you using render targets? Custom shaders? Which platform?

Same platform: macOS,
No render target, it is a 3D model with a simple custom shader using a light.
The same desaturation appears however also with sprites with a simpler (custom) shader with vertex color.

Could you share the simple custom shader?

Sure! Here are the sprite vertex and fragment shaders:

uniform highp mat4 view_proj;

attribute highp vec4 position;
attribute mediump vec2 texcoord0;
attribute lowp vec4 color;

varying mediump vec2 var_texcoord0;
varying lowp vec4 var_color;

void main()
{
var_texcoord0 = texcoord0;
var_color = vec4(color.rgb * color.a, color.a);
gl_Position = view_proj * vec4(position.xyz, 1.0);
}

varying mediump vec2 var_texcoord0;
varying lowp vec4 var_color;

uniform lowp sampler2D tex0;

void main()
{
gl_FragColor = texture2D(tex0, var_texcoord0.xy) * var_color;
}

Thanks!

Actually, would you be able to open an issue for this and attach a small repro? I will probably forget this otherwise :slight_smile:

1 Like

I will do it as soon as possible!

1 Like

I have created an issue on github about this: Inconsistent openGL / Vulkan colors · Issue #10276 · defold/defold · GitHub

But I don’t know how to attach a minimal repro on github. So here it is. It uses the builtin sprite shader.

defold_color_test.zip (168.9 KB)

and here is an image with the openGL and Vulkan screenshots

Maybe it’s the precision modifier? Try doing highp for the color attribute.

I’ve once faced similar issues using a custom engine, the issue was solved by adding v_color.a *= (255.0 / 254.0); to the vertex shader, though I think that’s not the solution here.

I will try it, thanks! But also the builtin sprite shader has the issue.

I read this when it was posted, and today I also bumped into something similar:

I’m getting the slightly muted colours on HTML5 on macOS.

Is it relevant to the issue above? If so I can add the details below to the Github issue.

model_unlit.fp:

varying highp vec2 var_texcoord0;  // Texture coordinates from vertex shader
uniform highp sampler2D tex0;      // The texture sampler

void main() {
    // Sample the texture using the texture coordinates
    vec4 color = texture2D(tex0, var_texcoord0);

    // Output the color without modifying transparency
    gl_FragColor = color;
}

model_unlit.vp:


attribute highp vec4 position;    // Position of the vertex
attribute highp vec2 texcoord0;   // Texture coordinates
uniform highp mat4 mtx_view;      // View matrix
uniform highp mat4 mtx_proj;      // Projection matrix
varying highp vec2 var_texcoord0; // Passing texture coordinates to the fragment shader

void main() {
    // Pass texture coordinates to the fragment shader
    var_texcoord0 = texcoord0;

    // Transform vertex position to clip space (for rendering on screen)
    gl_Position = mtx_proj * mtx_view * position;
}

model_unlit.zip (2.3 KB)

1 Like

Thanks for this. Perhaps you could try if the buildin sprite shader has the issue also on html5. The repro I prepared on github shows the muted colours on macOS with the builtin sprite shader.

1 Like

Yes, the built in sprite shader seems to behave the same:

Defold ⌘B to the left, html5 to the right.

1 Like

What browser? Is is same in all browsers?

Yes, probably. :slight_smile:

I gave it a test on the browsers I have to hand. It’s the same (desaturated) on these ones:

  • Chrome on Mac
  • Safari on Mac
  • Firefox on Mac
  • Chrome on Android
  • Chrome on iOS
  • Safari on iOS
2 Likes

Moreover, if you’ll move it between different monitors, it will be different colors as well.

main monitor:

external Dell monitor (the same app moved to another monitor):

I was wondering if monitor calibration was causing it initially¹. However, after testing the actual colour from a screenshot, it’s clear that it’s a different hex (so would show a difference on all screens, regardless of their individual calibration).

This is why I included the hex; FF0066 for the original bitmap, and EB3468 after exported to HTML5.

¹ This was the bane of my life when starting out in web design in the late 90s, because there were no clear standards back in those days. What looked blue on one screen could look green on another. :person_facepalming:

1 Like

Also for me the builds with openGL and Vulkan show different hex color values on the same monitor (in my case the built in iMac monitor).

1 Like

Are you saying that a different monitor results in a DIFFERENT COLOUR HEX? This boggles my mind. The output device now has something to say about the content it displays?!

Yep, you see it on video.

  • run color picker
  • run app
  • check colors using the color picker on the first screen
  • move app to another monitor
  • check colors using color picker again
  • monitor one (mbp): FF0064
  • monitor two (external Dell): FF0063