egui_web: make text thicker and less pixelated (#640)

Closes #516

Author: emilk

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(1.0, Color32::LIGHT_BLUE),
+            stroke: Stroke::new(2.0, Color32::LIGHT_BLUE), // Thin strokes looks bad on web
         }
     }
 }

egui_web/CHANGELOG.md

@@ -8,6 +8,9 @@ All notable changes to the `egui_web` integration will be noted in this file.
 ### Added ⭐
 * Added support for dragging and dropping files into the browser window.
 
+### Fixed 🐛
+* Made text thicker and less pixelated.
+
 
 ## 0.13.0 - 2021-06-24
 

egui_web/src/webgl1.rs

@@ -367,7 +367,8 @@ impl crate::Painter for WebGlPainter {
         }
 
         let mut pixels: Vec<u8> = Vec::with_capacity(texture.pixels.len() * 4);
-        for srgba in texture.srgba_pixels() {
+        let font_gamma = 1.0 / 2.2; // HACK due to non-linear framebuffer blending.
+        for srgba in texture.srgba_pixels(font_gamma) {
             pixels.push(srgba.r());
             pixels.push(srgba.g());
             pixels.push(srgba.b());

egui_web/src/webgl2.rs

@@ -368,7 +368,8 @@ impl crate::Painter for WebGl2Painter {
         }
 
         let mut pixels: Vec<u8> = Vec::with_capacity(texture.pixels.len() * 4);
-        for srgba in texture.srgba_pixels() {
+        let font_gamma = 1.0 / 2.2; // HACK due to non-linear framebuffer blending.
+        for srgba in texture.srgba_pixels(font_gamma) {
             pixels.push(srgba.r());
             pixels.push(srgba.g());
             pixels.push(srgba.b());

epaint/src/texture_atlas.rs

@@ -17,10 +17,19 @@ impl Texture {
     }
 
     /// Returns the textures as `sRGBA` premultiplied pixels, row by row, top to bottom.
-    pub fn srgba_pixels(&'_ self) -> impl Iterator<Item = super::Color32> + '_ {
+    ///
+    /// `gamma` should normally be set to 1.0.
+    /// If you are having problems with egui text looking skinny and pixelated, try
+    /// setting a lower gamma, e.g. `0.5`.
+    pub fn srgba_pixels(&'_ self, gamma: f32) -> impl Iterator<Item = super::Color32> + '_ {
         use super::Color32;
-        let srgba_from_luminance_lut: Vec<Color32> =
-            (0..=255).map(Color32::from_white_alpha).collect();
+
+        let srgba_from_luminance_lut: Vec<Color32> = (0..=255)
+            .map(|a| {
+                let a = super::color::linear_f32_from_linear_u8(a).powf(gamma);
+                super::Rgba::from_white_alpha(a).into()
+            })
+            .collect();
         self.pixels
             .iter()
             .map(move |&l| srgba_from_luminance_lut[l as usize])