Added dithering to fix gradient banding.

iced-rs · Jan 11, 2023 · d33e3e6 · d33e3e6
1 parent 9987bf4
commit d33e3e6
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git a/glow/src/shader/quad/compatibility/gradient.frag b/glow/src/shader/quad/compatibility/gradient.frag
@@ -6,6 +6,10 @@ precision mediump float;
 #endif
 #endif
 
+float random(vec2 coords) {
+    return fract(sin(dot(coords.xy, vec2(12.9898,78.233))) * 43758.5453);
+}
+
 float selectBorderRadius(vec4 radi, vec2 position, vec2 center)
 {
     float rx = radi.x;
@@ -33,6 +37,8 @@ vec4 gradient(
     //if a gradient has a start/end stop that is identical, the mesh will have a transparent fill
     vec4 color;
 
+    float noise_granularity = 0.3/255.0;
+
     float offsets_arr[8];
     offsets_arr[0] = offsets[0].x;
     offsets_arr[1] = offsets[0].y;
@@ -75,7 +81,7 @@ vec4 gradient(
         }
     }
 
-    return color;
+    return color += mix(-noise_granularity, noise_granularity, random(raw_position));
 }
 
 float fDistance(vec2 frag_coord, vec2 position, vec2 size, float radius)

diff --git a/glow/src/shader/quad/core/gradient.frag b/glow/src/shader/quad/core/gradient.frag
@@ -11,6 +11,10 @@ out vec4 fragColor;
 #define gl_FragColor fragColor
 #endif
 
+float random(vec2 coords) {
+    return fract(sin(dot(coords.xy, vec2(12.9898,78.233))) * 43758.5453);
+}
+
 float selectBorderRadius(vec4 radi, vec2 position, vec2 center)
 {
     float rx = radi.x;
@@ -38,6 +42,8 @@ vec4 gradient(
     //if a gradient has a start/end stop that is identical, the mesh will have a transparent fill
     vec4 color;
 
+    float noise_granularity = 0.3/255.0;
+
     float offsets_arr[8];
     offsets_arr[0] = offsets[0].x;
     offsets_arr[1] = offsets[0].y;
@@ -80,7 +86,7 @@ vec4 gradient(
         }
     }
 
-    return color;
+    return color += mix(-noise_granularity, noise_granularity, random(raw_position));
 }
 
 float fDistance(vec2 frag_coord, vec2 position, vec2 size, float radius)

diff --git a/glow/src/shader/triangle/gradient.frag b/glow/src/shader/triangle/gradient.frag
@@ -11,6 +11,10 @@ out vec4 fragColor;
 #define gl_FragColor fragColor
 #endif
 
+float random(vec2 coords) {
+    return fract(sin(dot(coords.xy, vec2(12.9898,78.233))) * 43758.5453);
+}
+
 vec4 gradient(
     vec4 direction,
     vec2 raw_position,
@@ -28,6 +32,8 @@ vec4 gradient(
     //if a gradient has a start/end stop that is identical, the mesh will have a transparent fill
     vec4 color;
 
+    float noise_granularity = 0.3/255.0;
+
     float offsets_arr[8];
     offsets_arr[0] = offsets[0].x;
     offsets_arr[1] = offsets[0].y;
@@ -70,7 +76,7 @@ vec4 gradient(
         }
     }
 
-    return color;
+    return color += mix(-noise_granularity, noise_granularity, random(raw_position));
 }
 
 in vec2 v_raw_position;

diff --git a/wgpu/src/shader/quad.wgsl b/wgpu/src/shader/quad.wgsl
@@ -218,6 +218,10 @@ fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput {
     return out;
 }
 
+fn random(coords: vec2<f32>) -> f32 {
+    return fract(sin(dot(coords, vec2(12.9898,78.233))) * 43758.5453);
+}
+
 /// Returns the current interpolated color with a max 8-stop gradient
 fn gradient(
     raw_position: vec2<f32>,
@@ -241,6 +245,8 @@ fn gradient(
 
     var color: vec4<f32>;
 
+    let noise_granularity: f32 = 0.3/255.0;
+
     for (var i: i32 = 0; i < last_index; i++) {
         let curr_offset = offsets_arr[i];
         let next_offset = offsets_arr[i+1];
@@ -262,7 +268,7 @@ fn gradient(
         }
     }
 
-    return color;
+    return color + mix(-noise_granularity, noise_granularity, random(raw_position));
 }
 
 @fragment

diff --git a/wgpu/src/shader/triangle.wgsl b/wgpu/src/shader/triangle.wgsl
@@ -79,6 +79,10 @@ fn gradient_vs_main(
     return output;
 }
 
+fn random(coords: vec2<f32>) -> f32 {
+    return fract(sin(dot(coords, vec2(12.9898,78.233))) * 43758.5453);
+}
+
 /// Returns the current interpolated color with a max 8-stop gradient
 fn gradient(
     raw_position: vec2<f32>,
@@ -102,6 +106,8 @@ fn gradient(
 
     var color: vec4<f32>;
 
+    let noise_granularity: f32 = 0.3/255.0;
+
     for (var i: i32 = 0; i < last_index; i++) {
         let curr_offset = offsets_arr[i];
         let next_offset = offsets_arr[i+1];
@@ -123,7 +129,7 @@ fn gradient(
         }
     }
 
-    return color;
+    return color + mix(-noise_granularity, noise_granularity, random(raw_position));
 }
 
 @fragment