[gnome-shell/gnome-40] lightbox: Fix banding issues with the vignette shader

[Marge Bot <marge-bot src gnome org>]

commit 0fb2ee5bccaf4ba4a8a1f95b1ccb3037eae0cbb1
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Thu Jan 27 17:48:20 2022 +0100

    lightbox: Fix banding issues with the vignette shader
    
    Just as https://gitlab.gnome.org/GNOME/mutter/-/merge_requests/352
    did for the MetaBackgroundActor in mutter, let's fix the vignette shader
    in gnome-shell, too.
    
    Based on a patch originally propsed by Nikita Churaev, see
    https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/59.
    
    Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3942
    (cherry picked from commit 81f62e9df83479d17d8c8259002bec365d842154)
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2181>

 js/ui/lightbox.js | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)
---
diff --git a/js/ui/lightbox.js b/js/ui/lightbox.js
index 7d2784df15..1c016c3208 100644
--- a/js/ui/lightbox.js
+++ b/js/ui/lightbox.js
@@ -9,18 +9,22 @@ var DEFAULT_FADE_FACTOR = 0.4;
 var VIGNETTE_BRIGHTNESS = 0.5;
 var VIGNETTE_SHARPNESS = 0.7;
 
-const VIGNETTE_DECLARATIONS = '\
-uniform float brightness;\n\
-uniform float vignette_sharpness;\n';
-
-const VIGNETTE_CODE = '\
-cogl_color_out.a = cogl_color_in.a;\n\
-cogl_color_out.rgb = vec3(0.0, 0.0, 0.0);\n\
-vec2 position = cogl_tex_coord_in[0].xy - 0.5;\n\
-float t = length(2.0 * position);\n\
-t = clamp(t, 0.0, 1.0);\n\
-float pixel_brightness = mix(1.0, 1.0 - vignette_sharpness, t);\n\
-cogl_color_out.a = cogl_color_out.a * (1.0 - pixel_brightness * brightness);';
+const VIGNETTE_DECLARATIONS = '                                              \
+uniform float brightness;                                                  \n\
+uniform float vignette_sharpness;                                          \n\
+float rand(vec2 p) {                                                       \n\
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453123);        \n\
+}                                                                          \n';
+
+const VIGNETTE_CODE = '                                                      \
+cogl_color_out.a = cogl_color_in.a;                                        \n\
+cogl_color_out.rgb = vec3(0.0, 0.0, 0.0);                                  \n\
+vec2 position = cogl_tex_coord_in[0].xy - 0.5;                             \n\
+float t = clamp(length(1.41421 * position), 0.0, 1.0);                     \n\
+float pixel_brightness = mix(1.0, 1.0 - vignette_sharpness, t);            \n\
+cogl_color_out.a *= 1.0 - pixel_brightness * brightness;                   \n\
+cogl_color_out.a += (rand(position) - 0.5) / 100.0;                        \n';
+
 
 var RadialShaderEffect = GObject.registerClass({
     Properties: {