[RFC] vulkan: compensate alpha to better match perceptual blend intent

The Vulkan renderer performs alpha blending in linear RGB space, which
preserves hue better than blending sRGB-encoded values directly (as the
gles and pixman renderers do), but unfortunately tends to give a
too-bright result when blending dark and light colors.

(In desktop usage, this especially affects dark, semi-transparent
tooltips, which appear significantly more transparent than expected,
affecting readability if light text underneath shows through.)

This is a novel (I think) approach to compensating for this effect by
adjusting the alpha value of the source texture - basically the result
is that dark semi-transparent pixels are made a little more opaque,
while light semi-transparent pixels are made a little more transparent.
Alpha values of 0 and 1 are unchanged.

I am somewhat new to science of color blending (Björn Ottosson's page,
"How software gets color wrong" is very enlightening) but I think this
approach makes at least a little bit of sense theoretically, and the
result seems to me subjectively to be an improvement.

Analysis from an expert on the subject would be greatly appreciated.

v2: compensate alpha in solid color conversions also
v3: un-premultiply average value for solid color conversion
This commit is contained in:
John Lindgren 2024-12-14 11:55:03 -05:00
parent 546c5d000d
commit 2ec08b38d8
3 changed files with 81 additions and 8 deletions

View file

@ -26,11 +26,17 @@ vec4 srgb_color_to_linear(vec4 color) {
return vec4(0);
}
color.rgb /= color.a;
// Estimate perceptual lightness from sRGB values
float v = (color.r + color.g + color.b) / 3;
color.rgb = vec3(
srgb_channel_to_linear(color.r),
srgb_channel_to_linear(color.g),
srgb_channel_to_linear(color.b)
);
// Adjust alpha to make dark semi-transparent overlays a bit more
// opaque, better matching perceptual intent compared to simple
// linear blending (see README-alpha-blend for a longer discussion)
color.a = ((v - 0.5) * color.a * color.a + color.a) / (v + 0.5);
color.rgb *= color.a;
return color;
}