Improve text redering and do all color operation in gamma space (#2071)

crates/egui_glium/src/shader/fragment_100es.glsl

@@ -2,7 +2,7 @@
 
 precision mediump float;
 uniform sampler2D u_sampler;
-varying vec4 v_rgba;
+varying vec4 v_rgba_gamma; // 0-1 gamma sRGBA
 varying vec2 v_tc;
 
 // 0-255 sRGB  from  0-1 linear
@@ -30,16 +30,9 @@ vec4 linear_from_srgba(vec4 srgba) {
 }
 
 void main() {
-    // We must decode the colors, since WebGL doesn't come with sRGBA textures:
-    vec4 texture_rgba = linear_from_srgba(texture2D(u_sampler, v_tc) * 255.0);
+    // WebGL doesn't come with sRGBA textures:
+    vec4 texture_in_gamma = texture2D(u_sampler, v_tc);
 
-    /// Multiply vertex color with texture color (in linear space).
-    gl_FragColor = v_rgba * texture_rgba;
-
-    // We must gamma-encode again since WebGL doesn't support linear blending in the framebuffer.
-    gl_FragColor = srgba_from_linear(v_rgba * texture_rgba) / 255.0;
-
-    // WebGL doesn't support linear blending in the framebuffer,
-    // so we apply this hack to at least get a bit closer to the desired blending:
-    gl_FragColor.a = pow(gl_FragColor.a, 1.6); // Empiric nonsense
+    // Multiply vertex color with texture color (in gamma space).
+    gl_FragColor = v_rgba_gamma * texture_in_gamma;
 }

crates/egui_glium/src/shader/fragment_120.glsl

@@ -1,11 +1,31 @@
 #version 120
 
 uniform sampler2D u_sampler;
-varying vec4 v_rgba;
+varying vec4 v_rgba_gamma; // 0-1 gamma sRGBA
 varying vec2 v_tc;
 
-void main() {
-    // The texture sampler is sRGB aware, and glium already expects linear rgba output
-    // so no need for any sRGB conversions here:
-    gl_FragColor = v_rgba * texture2D(u_sampler, v_tc);
+// 0-255 sRGB  from  0-1 linear
+vec3 srgb_from_linear(vec3 rgb) {
+    bvec3 cutoff = lessThan(rgb, vec3(0.0031308));
+    vec3 lower = rgb * vec3(3294.6);
+    vec3 higher = vec3(269.025) * pow(rgb, vec3(1.0 / 2.4)) - vec3(14.025);
+    return mix(higher, lower, vec3(cutoff));
+}
+
+// 0-255 sRGBA  from  0-1 linear
+vec4 srgba_from_linear(vec4 rgba) {
+    return vec4(srgb_from_linear(rgba.rgb), 255.0 * rgba.a);
+}
+
+// 0-1 gamma  from  0-1 linear
+vec4 gamma_from_linear_rgba(vec4 linear_rgba) {
+    return vec4(srgb_from_linear(linear_rgba.rgb) / 255.0, linear_rgba.a);
+}
+
+void main() {
+    // The texture is set up with `SRGB8_ALPHA8`
+    vec4 texture_in_gamma = gamma_from_linear_rgba(texture2D(u_sampler, v_tc));
+
+    // Multiply vertex color with texture color (in gamma space).
+    gl_FragColor = v_rgba_gamma * texture_in_gamma;
 }

crates/egui_glium/src/shader/fragment_140.glsl

@@ -1,12 +1,32 @@
 #version 140
 
 uniform sampler2D u_sampler;
-in vec4 v_rgba;
+in vec4 v_rgba_gamma;
 in vec2 v_tc;
 out vec4 f_color;
 
-void main() {
-    // The texture sampler is sRGB aware, and glium already expects linear rgba output
-    // so no need for any sRGB conversions here:
-    f_color = v_rgba * texture(u_sampler, v_tc);
+// 0-255 sRGB  from  0-1 linear
+vec3 srgb_from_linear(vec3 rgb) {
+    bvec3 cutoff = lessThan(rgb, vec3(0.0031308));
+    vec3 lower = rgb * vec3(3294.6);
+    vec3 higher = vec3(269.025) * pow(rgb, vec3(1.0 / 2.4)) - vec3(14.025);
+    return mix(higher, lower, vec3(cutoff));
+}
+
+// 0-255 sRGBA  from  0-1 linear
+vec4 srgba_from_linear(vec4 rgba) {
+    return vec4(srgb_from_linear(rgba.rgb), 255.0 * rgba.a);
+}
+
+// 0-1 gamma  from  0-1 linear
+vec4 gamma_from_linear_rgba(vec4 linear_rgba) {
+    return vec4(srgb_from_linear(linear_rgba.rgb) / 255.0, linear_rgba.a);
+}
+
+void main() {
+    // The texture is set up with `SRGB8_ALPHA8`
+    vec4 texture_in_gamma = gamma_from_linear_rgba(texture(u_sampler, v_tc));
+
+    // Multiply vertex color with texture color (in gamma space).
+    f_color = v_rgba_gamma * texture_in_gamma;
 }

crates/egui_glium/src/shader/fragment_300es.glsl

@@ -2,7 +2,7 @@
 
 precision mediump float;
 uniform sampler2D u_sampler;
-varying vec4 v_rgba;
+varying vec4 v_rgba_gamma; // 0-1 gamma sRGBA
 varying vec2 v_tc;
 
 // 0-255 sRGB  from  0-1 linear
@@ -13,21 +13,20 @@ vec3 srgb_from_linear(vec3 rgb) {
     return mix(higher, lower, vec3(cutoff));
 }
 
+// 0-255 sRGBA  from  0-1 linear
 vec4 srgba_from_linear(vec4 rgba) {
     return vec4(srgb_from_linear(rgba.rgb), 255.0 * rgba.a);
 }
 
-void main() {
-    // The texture is set up with `SRGB8_ALPHA8`, so no need to decode here!
-    vec4 texture_rgba = texture2D(u_sampler, v_tc);
-
-    /// Multiply vertex color with texture color (in linear space).
-    gl_FragColor = v_rgba * texture_rgba;
-
-    // We must gamma-encode again since WebGL doesn't support linear blending in the framebuffer.
-    gl_FragColor = srgba_from_linear(v_rgba * texture_rgba) / 255.0;
-
-    // WebGL doesn't support linear blending in the framebuffer,
-    // so we apply this hack to at least get a bit closer to the desired blending:
-    gl_FragColor.a = pow(gl_FragColor.a, 1.6); // Empiric nonsense
+// 0-1 gamma  from  0-1 linear
+vec4 gamma_from_linear_rgba(vec4 linear_rgba) {
+    return vec4(srgb_from_linear(linear_rgba.rgb) / 255.0, linear_rgba.a);
+}
+
+void main() {
+    // The texture is set up with `SRGB8_ALPHA8`
+    vec4 texture_in_gamma = gamma_from_linear_rgba(texture2D(u_sampler, v_tc));
+
+    // Multiply vertex color with texture color (in gamma space).
+    gl_FragColor = v_rgba_gamma * texture_in_gamma;
 }

crates/egui_glium/src/shader/vertex_100es.glsl

@@ -5,28 +5,15 @@ uniform vec2 u_screen_size;
 attribute vec2 a_pos;
 attribute vec2 a_tc;
 attribute vec4 a_srgba;
-varying vec4 v_rgba;
+varying vec4 v_rgba_gamma; // 0-1 gamma sRGBA
 varying vec2 v_tc;
 
-// 0-1 linear  from  0-255 sRGB
-vec3 linear_from_srgb(vec3 srgb) {
-    bvec3 cutoff = lessThan(srgb, vec3(10.31475));
-    vec3 lower = srgb / vec3(3294.6);
-    vec3 higher = pow((srgb + vec3(14.025)) / vec3(269.025), vec3(2.4));
-    return mix(higher, lower, vec3(cutoff));
-}
-
-vec4 linear_from_srgba(vec4 srgba) {
-    return vec4(linear_from_srgb(srgba.rgb), srgba.a / 255.0);
-}
-
 void main() {
     gl_Position = vec4(
                       2.0 * a_pos.x / u_screen_size.x - 1.0,
                       1.0 - 2.0 * a_pos.y / u_screen_size.y,
                       0.0,
                       1.0);
-    // egui encodes vertex colors in gamma spaces, so we must decode the colors here:
-    v_rgba = linear_from_srgba(a_srgba);
+    v_rgba_gamma = a_srgba / 255.0;
     v_tc = a_tc;
 }

crates/egui_glium/src/shader/vertex_120.glsl

@@ -4,28 +4,15 @@ uniform vec2 u_screen_size;
 attribute vec2 a_pos;
 attribute vec4 a_srgba; // 0-255 sRGB
 attribute vec2 a_tc;
-varying vec4 v_rgba;
+varying vec4 v_rgba_gamma; // 0-1 gamma sRGBA
 varying vec2 v_tc;
 
-// 0-1 linear  from  0-255 sRGB
-vec3 linear_from_srgb(vec3 srgb) {
-    bvec3 cutoff = lessThan(srgb, vec3(10.31475));
-    vec3 lower = srgb / vec3(3294.6);
-    vec3 higher = pow((srgb + vec3(14.025)) / vec3(269.025), vec3(2.4));
-    return mix(higher, lower, vec3(cutoff));
-}
-
-vec4 linear_from_srgba(vec4 srgba) {
-    return vec4(linear_from_srgb(srgba.rgb), srgba.a / 255.0);
-}
-
 void main() {
     gl_Position = vec4(
                       2.0 * a_pos.x / u_screen_size.x - 1.0,
                       1.0 - 2.0 * a_pos.y / u_screen_size.y,
                       0.0,
                       1.0);
-    // egui encodes vertex colors in gamma spaces, so we must decode the colors here:
-    v_rgba = linear_from_srgba(a_srgba);
+    v_rgba_gamma = a_srgba / 255.0;
     v_tc = a_tc;
 }

crates/egui_glium/src/shader/vertex_140.glsl

@@ -4,28 +4,15 @@ uniform vec2 u_screen_size;
 in vec2 a_pos;
 in vec4 a_srgba; // 0-255 sRGB
 in vec2 a_tc;
-out vec4 v_rgba;
+out vec4 v_rgba_gamma;
 out vec2 v_tc;
 
-// 0-1 linear  from  0-255 sRGB
-vec3 linear_from_srgb(vec3 srgb) {
-    bvec3 cutoff = lessThan(srgb, vec3(10.31475));
-    vec3 lower = srgb / vec3(3294.6);
-    vec3 higher = pow((srgb + vec3(14.025)) / vec3(269.025), vec3(2.4));
-    return mix(higher, lower, cutoff);
-}
-
-vec4 linear_from_srgba(vec4 srgba) {
-    return vec4(linear_from_srgb(srgba.rgb), srgba.a / 255.0);
-}
-
 void main() {
     gl_Position = vec4(
                       2.0 * a_pos.x / u_screen_size.x - 1.0,
                       1.0 - 2.0 * a_pos.y / u_screen_size.y,
                       0.0,
                       1.0);
-    // egui encodes vertex colors in gamma spaces, so we must decode the colors here:
-    v_rgba = linear_from_srgba(a_srgba);
+    v_rgba_gamma = a_srgba / 255.0;
     v_tc = a_tc;
 }

crates/egui_glium/src/shader/vertex_300es.glsl

@@ -5,28 +5,15 @@ uniform vec2 u_screen_size;
 attribute vec2 a_pos;
 attribute vec2 a_tc;
 attribute vec4 a_srgba;
-varying vec4 v_rgba;
+varying vec4 v_rgba_gamma; // 0-1 gamma sRGBA
 varying vec2 v_tc;
 
-// 0-1 linear  from  0-255 sRGB
-vec3 linear_from_srgb(vec3 srgb) {
-    bvec3 cutoff = lessThan(srgb, vec3(10.31475));
-    vec3 lower = srgb / vec3(3294.6);
-    vec3 higher = pow((srgb + vec3(14.025)) / vec3(269.025), vec3(2.4));
-    return mix(higher, lower, vec3(cutoff));
-}
-
-vec4 linear_from_srgba(vec4 srgba) {
-   return vec4(linear_from_srgb(srgba.rgb), srgba.a / 255.0);
-}
-
 void main() {
     gl_Position = vec4(
                       2.0 * a_pos.x / u_screen_size.x - 1.0,
                       1.0 - 2.0 * a_pos.y / u_screen_size.y,
                       0.0,
                       1.0);
-    // egui encodes vertex colors in gamma spaces, so we must decode the colors here:
-    v_rgba = linear_from_srgba(a_srgba);
+    v_rgba_gamma = a_srgba / 255.0;
     v_tc = a_tc;
 }