Fix alpha blending in WebGL backends

egui_demo_lib/src/apps/color_test.rs

@@ -36,14 +36,6 @@ impl epi::App for ColorTest {
 
     fn update(&mut self, ctx: &egui::CtxRef, frame: &mut epi::Frame<'_>) {
         egui::CentralPanel::default().show(ctx, |ui| {
-            if frame.is_web() {
-                ui.colored_label(
-                    RED,
-                    "NOTE: The WebGL backend does NOT pass the color test."
-                );
-                ui.small("This is because WebGL does not support a linear framebuffer blending (not even WebGL2!).\nMaybe when WebGL3 becomes mainstream in 2030 the web can finally get colors right?");
-                ui.separator();
-            }
             ScrollArea::auto_sized().show(ui, |ui| {
                 self.ui(ui, &mut Some(frame.tex_allocator()));
             });

egui_demo_lib/src/apps/demo/painting.rs

@@ -12,7 +12,7 @@ impl Default for Painting {
     fn default() -> Self {
         Self {
             lines: Default::default(),
-            stroke: Stroke::new(2.0, Color32::LIGHT_BLUE), // Thin strokes looks bad on web
+            stroke: Stroke::new(1.0, Color32::LIGHT_BLUE),
         }
     }
 }

egui_web/CHANGELOG.md

@@ -5,6 +5,9 @@ All notable changes to the `egui_web` integration will be noted in this file.
 
 ## Unreleased
 
+### Fixed 🐛
+* Fix alpha blending, now having identical results as egui_glium
+
 
 ## 0.14.0 - 2021-08-24
 

egui_web/Cargo.toml

@@ -92,11 +92,13 @@ features = [
   "TouchList",
   "WebGl2RenderingContext",
   "WebGlBuffer",
+  "WebGlFramebuffer",
   "WebGlProgram",
   "WebGlRenderingContext",
   "WebGlShader",
   "WebGlTexture",
   "WebGlUniformLocation",
+  "WebGlVertexArrayObject",
   "WheelEvent",
   "Window",
 ]

egui_web/src/shader/main_fragment_100es.glsl

@@ -0,0 +1,26 @@
+precision mediump float;
+uniform sampler2D u_sampler;
+varying vec4 v_rgba;
+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));
+}
+
+// 0-1 linear  from  0-255 sRGBA
+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 WebGL 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;
+}

egui_web/src/shader/main_fragment_300es.glsl

@@ -0,0 +1,13 @@
+precision mediump float;
+uniform sampler2D u_sampler;
+varying vec4 v_rgba;
+varying vec2 v_tc;
+
+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).
+  // Linear color is written and blended in Framebuffer and converted to sRGB later
+  gl_FragColor = v_rgba * texture_rgba;
+}

egui_web/src/shader/post_fragment_100es.glsl

@@ -0,0 +1,22 @@
+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.;
+}

egui_web/src/shader/post_fragment_300es.glsl

@@ -0,0 +1,22 @@
+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.;
+}

egui_web/src/shader/post_vertex_100es.glsl

@@ -0,0 +1,8 @@
+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;
+}

egui_web/src/shader/post_vertex_300es.glsl

@@ -0,0 +1,8 @@
+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;
+}