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

crates/egui_glow/src/shader/fragment.glsl

@@ -4,73 +4,38 @@
 
 uniform sampler2D u_sampler;
 
-#ifdef NEW_SHADER_INTERFACE
-    in vec4 v_rgba;
+#if NEW_SHADER_INTERFACE
+    in vec4 v_rgba_in_gamma;
     in vec2 v_tc;
     out vec4 f_color;
     // a dirty hack applied to support webGL2
     #define gl_FragColor f_color
     #define texture2D texture
 #else
-    varying vec4 v_rgba;
+    varying vec4 v_rgba_in_gamma;
     varying vec2 v_tc;
 #endif
 
-#ifdef SRGB_SUPPORTED
-    void main() {
-        // The texture sampler is sRGB aware, and OpenGL already expects linear rgba output
-        // so no need for any sRGB conversions here:
-        gl_FragColor = v_rgba * texture2D(u_sampler, v_tc);
-    }
+// 0-1 sRGB gamma  from  0-1 linear
+vec3 srgb_gamma_from_linear(vec3 rgb) {
+    bvec3 cutoff = lessThan(rgb, vec3(0.0031308));
+    vec3 lower = rgb * vec3(12.92);
+    vec3 higher = vec3(1.055) * pow(rgb, vec3(1.0 / 2.4)) - vec3(0.055);
+    return mix(higher, lower, vec3(cutoff));
+}
+
+// 0-1 sRGBA gamma  from  0-1 linear
+vec4 srgba_gamma_from_linear(vec4 rgba) {
+    return vec4(srgb_gamma_from_linear(rgba.rgb), rgba.a);
+}
+
+void main() {
+#if SRGB_TEXTURES
+    vec4 texture_in_gamma = srgba_gamma_from_linear(texture2D(u_sampler, v_tc));
 #else
-    // 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));
-    }
-
-    vec4 srgba_from_linear(vec4 rgba) {
-        return vec4(srgb_from_linear(rgba.rgb), 255.0 * rgba.a);
-    }
-
-    // 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() {
-        // We must decode the colors, since WebGL1 doesn't come with sRGBA textures:
-        vec4 texture_rgba = linear_from_srgba(texture2D(u_sampler, v_tc) * 255.0);
-        /// Multiply vertex color with texture color (in linear space).
-        gl_FragColor = v_rgba * texture_rgba;
-
-        // WebGL1 doesn't support linear blending in the framebuffer,
-        // so we do a hack here where we change the premultiplied alpha
-        // to do the multiplication in gamma space instead:
-
-        // Unmultiply alpha:
-        if (gl_FragColor.a > 0.0) {
-            gl_FragColor.rgb /= gl_FragColor.a;
-        }
-
-        // Empiric tweak to make e.g. shadows look more like they should:
-        gl_FragColor.a *= sqrt(gl_FragColor.a);
-
-        // To gamma:
-        gl_FragColor = srgba_from_linear(gl_FragColor) / 255.0;
-
-        // Premultiply alpha, this time in gamma space:
-        if (gl_FragColor.a > 0.0) {
-            gl_FragColor.rgb *= gl_FragColor.a;
-        }
-    }
+    vec4 texture_in_gamma = texture2D(u_sampler, v_tc);
 #endif
+
+    // We multiply the colors in gamma space, because that's the only way to get text to look right.
+    gl_FragColor = v_rgba_in_gamma * texture_in_gamma;
+}

crates/egui_glow/src/shader/post_fragment_100es.glsl

@@ -1,26 +0,0 @@
-precision mediump float;
-uniform sampler2D u_sampler;
-varying vec2 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);
-}
-
-void main() {
-    gl_FragColor = texture2D(u_sampler, v_tc);
-
-    gl_FragColor = srgba_from_linear(gl_FragColor) / 255.0;
-
-    #ifdef APPLY_BRIGHTENING_GAMMA
-        gl_FragColor = vec4(pow(gl_FragColor.rgb, vec3(1.0/2.2)), gl_FragColor.a);
-    #endif
-}

crates/egui_glow/src/shader/post_vertex_100es.glsl

@@ -1,8 +0,0 @@
-precision mediump float;
-attribute vec2 a_pos;
-varying vec2 v_tc;
-
-void main() {
-    gl_Position = vec4(a_pos * 2. - 1., 0.0, 1.0);
-    v_tc = a_pos;
-}

crates/egui_glow/src/shader/vertex.glsl

@@ -1,4 +1,4 @@
-#ifdef NEW_SHADER_INTERFACE
+#if NEW_SHADER_INTERFACE
     #define I in
     #define O out
     #define V(x) x
@@ -16,28 +16,15 @@ uniform vec2 u_screen_size;
 I vec2 a_pos;
 I vec4 a_srgba; // 0-255 sRGB
 I vec2 a_tc;
-O vec4 v_rgba;
+O vec4 v_rgba_in_gamma;
 O 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, V(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 space, so we must decode the colors here:
-    v_rgba = linear_from_srgba(a_srgba);
+    v_rgba_in_gamma = a_srgba / 255.0;
     v_tc = a_tc;
 }