♻️ Move shader code to bottom of file

src/FireEffect.js

@@ -29,140 +29,6 @@ const utils          = Me.imports.src.utils;
 
 let FireShader = null;
 
-if (utils.isInShellProcess()) {
-
-  const Clutter        = imports.gi.Clutter;
-  const shaderSnippets = Me.imports.src.shaderSnippets;
-
-  FireShader = GObject.registerClass({Properties: {}, Signals: {}},
-                                     class FireShader extends Clutter.ShaderEffect {
-    _init(settings) {
-      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
-
-      // Load the gradient values from the settings. We directly inject the values in the
-      // GLSL code below. The shader is compiled once for each window-closing anyways. In
-      // the future, we may want to prevent this frequent recompilations of shaders,
-      // though.
-      const gradient = [];
-      for (let i = 1; i <= 5; i++) {
-        const color =
-            Clutter.Color.from_string(settings.get_string('fire-color-' + i))[1];
-        gradient.push(`vec4(${color.red / 255}, ${color.green / 255}, ${
-            color.blue / 255}, ${color.alpha / 255})`);
-      }
-
-      this.set_shader_source(`
-
-        // Inject some common shader snippets.
-        ${shaderSnippets.standardUniforms()}
-        ${shaderSnippets.noise()}
-
-        // These may be configurable in the future.
-        const float EDGE_FADE  = 90;
-        const float FADE_WIDTH = 0.1;
-        const float HIDE_TIME  = 0.4;
-        const vec2  FIRE_SCALE = vec2(400, 600) * ${settings.get_double('flame-scale')};
-        const float FIRE_SPEED = ${settings.get_double('flame-movement-speed')};
-
-        // This maps the input value from [0..1] to a color from the gradient.
-        vec4 getFireColor(float v) {
-          const float steps[5] = float[](0.0, 0.2, 0.35, 0.5, 0.8);
-          const vec4 colors[5] = vec4[](
-            ${gradient[0]},
-            ${gradient[1]},
-            ${gradient[2]},
-            ${gradient[3]},
-            ${gradient[4]}
-          );
-
-          if (v < steps[0]) {
-            return colors[0];
-          }
-
-          for (int i=0; i<4; ++i) {
-            if (v <= steps[i+1]) {
-              return mix(colors[i], colors[i+1], vec4(v - steps[i])/(steps[i+1]-steps[i]));
-            }
-          }
-
-          return colors[4];
-        }
-
-        // This method requires the uniforms from standardUniforms() to be available.
-        // It returns two values: The first is an alpha value which can be used for the window
-        // texture. This gradually dissolves the window from top to bottom. The second can be used
-        // to mask any effect, it will be most opaque where the window is currently fading and
-        // gradually dissolve to zero over time.
-        // hideTime:      A value in [0..1]. It determines the percentage of the animation which
-        //                is spent for hiding the window. 1-hideTime will be spent thereafter for
-        //                dissolving the effect mask.
-        // fadeWidth:     The relative size of the window-hiding gradient in [0..1].
-        // edgeFadeWidth: The pixel width of the effect fading range at the edges of the window.
-        vec2 effectMask(float hideTime, float fadeWidth, float edgeFadeWidth) {
-          float burnProgress      = clamp(uProgress/hideTime, 0, 1);
-          float afterBurnProgress = clamp((uProgress-hideTime)/(1-hideTime), 0, 1);
-
-          // Gradient from top to bottom.
-          float t = cogl_tex_coord_in[0].t * (1 - fadeWidth);
-
-          // Visible part of the window. Gradually dissolves towards the bottom.
-          float windowMask = 1 - clamp((burnProgress - t) / fadeWidth, 0, 1);
-
-          // Gradient from top burning window.
-          float effectMask = clamp(t*(1-windowMask)/burnProgress, 0, 1);
-
-          // Fade-out when the window burned down.
-          if (uProgress > hideTime) {
-            float fade = sqrt(1-afterBurnProgress*afterBurnProgress);
-            effectMask *= mix(1, 1-t, afterBurnProgress) * fade;
-          }
-
-          // Fade at window borders.
-          vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
-          effectMask *= smoothstep(0, 1, clamp(pos.x / edgeFadeWidth, 0, 1));
-          effectMask *= smoothstep(0, 1, clamp(pos.y / edgeFadeWidth, 0, 1));
-          effectMask *= smoothstep(0, 1, clamp((uSizeX - pos.x) / edgeFadeWidth, 0, 1));
-          effectMask *= smoothstep(0, 1, clamp((uSizeY - pos.y) / edgeFadeWidth, 0, 1));
-
-          return vec2(windowMask, effectMask);
-        }
-
-        void main() {
-
-          // Get a noise value which moves vertically in time.
-          vec2 uv = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY) / FIRE_SCALE;
-          uv.y += uTime * FIRE_SPEED;
-
-          #if ${settings.get_boolean('flame-3d-noise') ? 1 : 0}
-            float noise = noise3D(vec3(uv*7.5, uTime*FIRE_SPEED*3.0), 5);
-          #else
-            float noise = noise2D(uv * 7.5, 5);
-          #endif
-
-          // Modulate noise by effect mask.
-          vec2 effectMask = effectMask(HIDE_TIME, FADE_WIDTH, EDGE_FADE);
-          noise *= effectMask.y;
-
-          // Map noise value to color.
-          vec4 fire = getFireColor(noise);
-          fire.rgb *= fire.a;
-
-          // Get the window texture and fade it according to the effect mask.
-          cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * effectMask.x;
-
-          // Add the fire to the window.
-          cogl_color_out += fire;
-
-          // These are pretty useful for understanding how this works.
-          // cogl_color_out = vec4(vec3(noise), 1);
-          // cogl_color_out = vec4(vec3(effectMask.x), 1);
-          // cogl_color_out = vec4(vec3(effectMask.y), 1);
-        }
-      `);
-    };
-  });
-}
-
 var FireEffect = class FireEffect {
 
   // ---------------------------------------------------------------------- static methods
@@ -322,3 +188,138 @@ var FireEffect = class FireEffect {
     });
   }
 }
+
+
+if (utils.isInShellProcess()) {
+
+  const Clutter        = imports.gi.Clutter;
+  const shaderSnippets = Me.imports.src.shaderSnippets;
+
+  FireShader = GObject.registerClass({Properties: {}, Signals: {}},
+                                     class FireShader extends Clutter.ShaderEffect {
+    _init(settings) {
+      super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
+
+      // Load the gradient values from the settings. We directly inject the values in the
+      // GLSL code below. The shader is compiled once for each window-closing anyways. In
+      // the future, we may want to prevent this frequent recompilations of shaders,
+      // though.
+      const gradient = [];
+      for (let i = 1; i <= 5; i++) {
+        const color =
+            Clutter.Color.from_string(settings.get_string('fire-color-' + i))[1];
+        gradient.push(`vec4(${color.red / 255}, ${color.green / 255}, ${
+            color.blue / 255}, ${color.alpha / 255})`);
+      }
+
+      this.set_shader_source(`
+
+        // Inject some common shader snippets.
+        ${shaderSnippets.standardUniforms()}
+        ${shaderSnippets.noise()}
+
+        // These may be configurable in the future.
+        const float EDGE_FADE  = 90;
+        const float FADE_WIDTH = 0.1;
+        const float HIDE_TIME  = 0.4;
+        const vec2  FIRE_SCALE = vec2(400, 600) * ${settings.get_double('flame-scale')};
+        const float FIRE_SPEED = ${settings.get_double('flame-movement-speed')};
+
+        // This maps the input value from [0..1] to a color from the gradient.
+        vec4 getFireColor(float v) {
+          const float steps[5] = float[](0.0, 0.2, 0.35, 0.5, 0.8);
+          const vec4 colors[5] = vec4[](
+            ${gradient[0]},
+            ${gradient[1]},
+            ${gradient[2]},
+            ${gradient[3]},
+            ${gradient[4]}
+          );
+
+          if (v < steps[0]) {
+            return colors[0];
+          }
+
+          for (int i=0; i<4; ++i) {
+            if (v <= steps[i+1]) {
+              return mix(colors[i], colors[i+1], vec4(v - steps[i])/(steps[i+1]-steps[i]));
+            }
+          }
+
+          return colors[4];
+        }
+
+        // This method requires the uniforms from standardUniforms() to be available.
+        // It returns two values: The first is an alpha value which can be used for the window
+        // texture. This gradually dissolves the window from top to bottom. The second can be used
+        // to mask any effect, it will be most opaque where the window is currently fading and
+        // gradually dissolve to zero over time.
+        // hideTime:      A value in [0..1]. It determines the percentage of the animation which
+        //                is spent for hiding the window. 1-hideTime will be spent thereafter for
+        //                dissolving the effect mask.
+        // fadeWidth:     The relative size of the window-hiding gradient in [0..1].
+        // edgeFadeWidth: The pixel width of the effect fading range at the edges of the window.
+        vec2 effectMask(float hideTime, float fadeWidth, float edgeFadeWidth) {
+          float burnProgress      = clamp(uProgress/hideTime, 0, 1);
+          float afterBurnProgress = clamp((uProgress-hideTime)/(1-hideTime), 0, 1);
+
+          // Gradient from top to bottom.
+          float t = cogl_tex_coord_in[0].t * (1 - fadeWidth);
+
+          // Visible part of the window. Gradually dissolves towards the bottom.
+          float windowMask = 1 - clamp((burnProgress - t) / fadeWidth, 0, 1);
+
+          // Gradient from top burning window.
+          float effectMask = clamp(t*(1-windowMask)/burnProgress, 0, 1);
+
+          // Fade-out when the window burned down.
+          if (uProgress > hideTime) {
+            float fade = sqrt(1-afterBurnProgress*afterBurnProgress);
+            effectMask *= mix(1, 1-t, afterBurnProgress) * fade;
+          }
+
+          // Fade at window borders.
+          vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
+          effectMask *= smoothstep(0, 1, clamp(pos.x / edgeFadeWidth, 0, 1));
+          effectMask *= smoothstep(0, 1, clamp(pos.y / edgeFadeWidth, 0, 1));
+          effectMask *= smoothstep(0, 1, clamp((uSizeX - pos.x) / edgeFadeWidth, 0, 1));
+          effectMask *= smoothstep(0, 1, clamp((uSizeY - pos.y) / edgeFadeWidth, 0, 1));
+
+          return vec2(windowMask, effectMask);
+        }
+
+        void main() {
+
+          // Get a noise value which moves vertically in time.
+          vec2 uv = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY) / FIRE_SCALE;
+          uv.y += uTime * FIRE_SPEED;
+
+          #if ${settings.get_boolean('flame-3d-noise') ? 1 : 0}
+            float noise = noise3D(vec3(uv*7.5, uTime*FIRE_SPEED*3.0), 5);
+          #else
+            float noise = noise2D(uv * 7.5, 5);
+          #endif
+
+          // Modulate noise by effect mask.
+          vec2 effectMask = effectMask(HIDE_TIME, FADE_WIDTH, EDGE_FADE);
+          noise *= effectMask.y;
+
+          // Map noise value to color.
+          vec4 fire = getFireColor(noise);
+          fire.rgb *= fire.a;
+
+          // Get the window texture and fade it according to the effect mask.
+          cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st) * effectMask.x;
+
+          // Add the fire to the window.
+          cogl_color_out += fire;
+
+          // These are pretty useful for understanding how this works.
+          // cogl_color_out = vec4(vec3(noise), 1);
+          // cogl_color_out = vec4(vec3(effectMask.x), 1);
+          // cogl_color_out = vec4(vec3(effectMask.y), 1);
+        }
+      `);
+    };
+  });
+}

src/MatrixEffect.js

@@ -30,6 +30,61 @@ const utils          = Me.imports.src.utils;
 
 let MatrixShader = null;
 
+var MatrixEffect = class MatrixEffect {
+
+  // ---------------------------------------------------------------------- static methods
+
+  static getMinShellVersion() {
+    return [40, 0];
+  }
+
+  static getSettingsPrefix() {
+    return 'matrix';
+  }
+
+  static getLabel() {
+    return 'Matrix';
+  }
+
+  static initPreferences(dialog) {
+
+    dialog.getBuilder().add_from_resource('/ui/gtk4/matrixPage.ui');
+
+    // Bind all properties.
+    dialog.bindAdjustment('matrix-animation-time');
+    dialog.bindAdjustment('matrix-scale');
+    dialog.bindAdjustment('matrix-randomness');
+    dialog.bindColorButton('matrix-trail-color');
+    dialog.bindColorButton('matrix-tip-color');
+
+    const stack = dialog.getBuilder().get_object('main-stack');
+    stack.add_titled(dialog.getBuilder().get_object('matrix-prefs'), 'matrix', 'Matrix');
+  }
+
+  static createShader(settings) {
+    return new MatrixShader(settings);
+  }
+
+  // If there's a transition in progress, we re-target these transitions so that the
+  // window is neither scaled nor faded.
+  static tweakTransitions(actor, settings) {
+    const animationTime = settings.get_int('matrix-animation-time');
+
+    const tweakTransition = (property, value) => {
+      const transition = actor.get_transition(property);
+      if (transition) {
+        transition.set_to(value);
+        transition.set_duration(animationTime);
+      }
+    };
+
+    tweakTransition('opacity', 255);
+    tweakTransition('scale-x', 1);
+    tweakTransition('scale-y', 1);
+  }
+}
+
+
 if (utils.isInShellProcess()) {
 
   const {Clutter, GdkPixbuf, Cogl} = imports.gi;
@@ -100,8 +155,10 @@ float delay = fract(sin(coords.x)*78.233) * mix(0.0, 1.0, RANDOMNESS);
           float speed = fract(cos(coords.x)*12.989) * mix(0.0, 0.3, RANDOMNESS) + 1.5;
 
           float distToDrop  = (uProgress*2-delay)*speed - fragCoord.y;
+          
           float rainAlpha   = distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0;
           float windowAlpha = 1 - clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
+
           return vec2(rainAlpha, windowAlpha);
         }
 
@@ -155,57 +212,3 @@ cogl_color_out.rgb += mix(trailColor, tipColor, min(1, pow(rainAlpha+0.1, 4))) *
     }
   });
 }
-
-var MatrixEffect = class MatrixEffect {
-
-  // ---------------------------------------------------------------------- static methods
-
-  static getMinShellVersion() {
-    return [40, 0];
-  }
-
-  static getSettingsPrefix() {
-    return 'matrix';
-  }
-
-  static getLabel() {
-    return 'Matrix';
-  }
-
-  static initPreferences(dialog) {
-
-    dialog.getBuilder().add_from_resource('/ui/gtk4/matrixPage.ui');
-
-    // Bind all properties.
-    dialog.bindAdjustment('matrix-animation-time');
-    dialog.bindAdjustment('matrix-scale');
-    dialog.bindAdjustment('matrix-randomness');
-    dialog.bindColorButton('matrix-trail-color');
-    dialog.bindColorButton('matrix-tip-color');
-
-    const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(dialog.getBuilder().get_object('matrix-prefs'), 'matrix', 'Matrix');
-  }
-
-  static createShader(settings) {
-    return new MatrixShader(settings);
-  }
-
-  // If there's a transition in progress, we re-target these transitions so that the
-  // window is neither scaled nor faded.
-  static tweakTransitions(actor, settings) {
-    const animationTime = settings.get_int('matrix-animation-time');
-
-    const tweakTransition = (property, value) => {
-      const transition = actor.get_transition(property);
-      if (transition) {
-        transition.set_to(value);
-        transition.set_duration(animationTime);
-      }
-    };
-
-    tweakTransition('opacity', 255);
-    tweakTransition('scale-x', 1);
-    tweakTransition('scale-y', 1);
-  }
-}

src/TRexEffect.js

@@ -27,6 +27,64 @@ const utils          = Me.imports.src.utils;
 
 let TRexShader = null;
 
+var TRexEffect = class TRexEffect {
+
+  // ---------------------------------------------------------------------- static methods
+
+  static getMinShellVersion() {
+    return [40, 0];
+  }
+
+  static getSettingsPrefix() {
+    return 'trex';
+  }
+
+  static getLabel() {
+    return 'T-Rex Attack';
+  }
+
+  static initPreferences(dialog) {
+
+    dialog.getBuilder().add_from_resource('/ui/gtk4/trexPage.ui');
+
+    // Bind all properties.
+    dialog.bindAdjustment('trex-animation-time');
+    dialog.bindColorButton('claw-scratch-color');
+    dialog.bindAdjustment('claw-scratch-scale');
+    dialog.bindAdjustment('claw-scratch-count');
+    dialog.bindAdjustment('claw-scratch-warp');
+
+    const stack = dialog.getBuilder().get_object('main-stack');
+    stack.add_titled(
+        dialog.getBuilder().get_object('trex-prefs'), 'trex', 'T-Rex Attack');
+  }
+
+  static createShader(settings) {
+    return new TRexShader(settings);
+  }
+
+  // If there's a transition in progress, we re-target these transitions so that the
+  // window is neither scaled nor faded.
+  static tweakTransitions(actor, settings) {
+    const animationTime = settings.get_int('trex-animation-time');
+
+    const tweakTransition = (property, value) => {
+      const transition = actor.get_transition(property);
+      if (transition) {
+        transition.set_to(value);
+        transition.set_duration(animationTime);
+      }
+    };
+
+    const warp = 0.5 * settings.get_double('claw-scratch-warp');
+
+    tweakTransition('opacity', 255);
+    tweakTransition('scale-x', 1.0 + warp);
+    tweakTransition('scale-y', 1.0 + warp);
+  }
+}
+
+
 if (utils.isInShellProcess()) {
 
   const {Clutter, GdkPixbuf, Cogl} = imports.gi;
@@ -165,60 +223,3 @@ cogl_color_out *= fade;
     }
   });
 }
-
-var TRexEffect = class TRexEffect {
-
-  // ---------------------------------------------------------------------- static methods
-
-  static getMinShellVersion() {
-    return [40, 0];
-  }
-
-  static getSettingsPrefix() {
-    return 'trex';
-  }
-
-  static getLabel() {
-    return 'T-Rex Attack';
-  }
-
-  static initPreferences(dialog) {
-
-    dialog.getBuilder().add_from_resource('/ui/gtk4/trexPage.ui');
-
-    // Bind all properties.
-    dialog.bindAdjustment('trex-animation-time');
-    dialog.bindColorButton('claw-scratch-color');
-    dialog.bindAdjustment('claw-scratch-scale');
-    dialog.bindAdjustment('claw-scratch-count');
-    dialog.bindAdjustment('claw-scratch-warp');
-
-    const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(
-        dialog.getBuilder().get_object('trex-prefs'), 'trex', 'T-Rex Attack');
-  }
-
-  static createShader(settings) {
-    return new TRexShader(settings);
-  }
-
-  // If there's a transition in progress, we re-target these transitions so that the
-  // window is neither scaled nor faded.
-  static tweakTransitions(actor, settings) {
-    const animationTime = settings.get_int('trex-animation-time');
-
-    const tweakTransition = (property, value) => {
-      const transition = actor.get_transition(property);
-      if (transition) {
-        transition.set_to(value);
-        transition.set_duration(animationTime);
-      }
-    };
-
-    const warp = 0.5 * settings.get_double('claw-scratch-warp');
-
-    tweakTransition('opacity', 255);
-    tweakTransition('scale-x', 1.0 + warp);
-    tweakTransition('scale-y', 1.0 + warp);
-  }
-}

src/TVEffect.js

@@ -20,26 +20,79 @@ const Me             = imports.misc.extensionUtils.getCurrentExtension();
 const utils          = Me.imports.src.utils;
 
 //////////////////////////////////////////////////////////////////////////////////////////
-// The TVEffectShader hides the actor by making it first transparent from top and       //
+// The TVShader hides the actor by making it first transparent from top and             //
 // bottom towards the middle and then hiding the resulting line from left and right     //
 // towards the center.                                                                  //
 //////////////////////////////////////////////////////////////////////////////////////////
 
 
-let TVEffectShader = null;
+let TVShader = null;
+
+
+var TVEffect = class TVEffect {
+
+  // ---------------------------------------------------------------------- static methods
+
+  static getMinShellVersion() {
+    return [3, 36];
+  }
+
+  static getSettingsPrefix() {
+    return 'tv';
+  }
+
+  static getLabel() {
+    return 'TV Effect';
+  }
+
+  static initPreferences(dialog) {
+
+    dialog.getBuilder().add_from_resource(
+        `/ui/${utils.isGTK4() ? 'gtk4' : 'gtk3'}/tvPage.ui`);
+
+    // Bind all properties.
+    dialog.bindAdjustment('tv-animation-time');
+    dialog.bindColorButton('tv-effect-color');
+
+    const stack = dialog.getBuilder().get_object('main-stack');
+    stack.add_titled(dialog.getBuilder().get_object('tv-prefs'), 'tv', 'TV Effect');
+  }
+
+  static createShader(settings) {
+    return new TVShader(settings);
+  }
+
+  // If there's a transition in progress, we re-target these transitions so that the
+  // window is neither scaled nor faded.
+  static tweakTransitions(actor, settings) {
+    const animationTime = settings.get_int('tv-animation-time');
+
+    const tweakTransition = (property, value) => {
+      const transition = actor.get_transition(property);
+      if (transition) {
+        transition.set_to(value);
+        transition.set_duration(animationTime);
+      }
+    };
+
+    tweakTransition('opacity', 255);
+    tweakTransition('scale-x', 1);
+    tweakTransition('scale-y', 0.5);
+  }
+}
+
 
 if (utils.isInShellProcess()) {
 
   const Clutter        = imports.gi.Clutter;
   const shaderSnippets = Me.imports.src.shaderSnippets;
 
-  TVEffectShader = GObject.registerClass(
+  TVShader = GObject.registerClass({Properties: {}, Signals: {}},
-      {Properties: {}, Signals: {}}, class TVEffectShader extends Clutter.ShaderEffect {
+                                   class TVShader extends Clutter.ShaderEffect {
     _init(settings) {
       super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
 
-          const color =
+      const color = Clutter.Color.from_string(settings.get_string('tv-effect-color'))[1];
-              Clutter.Color.from_string(settings.get_string('tv-effect-color'))[1];
 
       this.set_shader_source(`
 
@@ -97,55 +150,3 @@ if (utils.isInShellProcess()) {
     };
   });
 }
-
-var TVEffect = class TVEffect {
-
-  // ---------------------------------------------------------------------- static methods
-
-  static getMinShellVersion() {
-    return [3, 36];
-  }
-
-  static getSettingsPrefix() {
-    return 'tv';
-  }
-
-  static getLabel() {
-    return 'TV Effect';
-  }
-
-  static initPreferences(dialog) {
-
-    dialog.getBuilder().add_from_resource(
-        `/ui/${utils.isGTK4() ? 'gtk4' : 'gtk3'}/tvPage.ui`);
-
-    // Bind all properties.
-    dialog.bindAdjustment('tv-animation-time');
-    dialog.bindColorButton('tv-effect-color');
-
-    const stack = dialog.getBuilder().get_object('main-stack');
-    stack.add_titled(dialog.getBuilder().get_object('tv-prefs'), 'tv', 'TV Effect');
-  }
-
-  static createShader(settings) {
-    return new TVEffectShader(settings);
-  }
-
-  // If there's a transition in progress, we re-target these transitions so that the
-  // window is neither scaled nor faded.
-  static tweakTransitions(actor, settings) {
-    const animationTime = settings.get_int('tv-animation-time');
-
-    const tweakTransition = (property, value) => {
-      const transition = actor.get_transition(property);
-      if (transition) {
-        transition.set_to(value);
-        transition.set_duration(animationTime);
-      }
-    };
-
-    tweakTransition('opacity', 255);
-    tweakTransition('scale-x', 1);
-    tweakTransition('scale-y', 0.5);
-  }
-}