♻️ Move edge mask to snippets

src/FireEffect.js

@@ -245,6 +245,7 @@ if (utils.isInShellProcess()) {
         // Inject some common shader snippets.
         ${shaderSnippets.standardUniforms()}
         ${shaderSnippets.noise()}
+        ${shaderSnippets.edgeMask()}
 
         // These may be configurable in the future.
         const float EDGE_FADE  = 90;
@@ -307,11 +308,7 @@ if (utils.isInShellProcess()) {
           }
 
           // Fade at window borders.
-          vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
+          effectMask *= getAbsoluteEdgeMask(edgeFadeWidth);
-          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);
         }

src/MatrixEffect.js

@@ -145,6 +145,7 @@ if (utils.isInShellProcess()) {
         // Inject some common shader snippets.
         ${shaderSnippets.standardUniforms()}
         ${shaderSnippets.noise()}
+        ${shaderSnippets.edgeMask()}
 
         uniform sampler2D uFontTexture;
 
@@ -204,11 +205,7 @@ if (utils.isInShellProcess()) {
           float rainAlpha = finalFade * rain.x;
 
           // Fade at window borders.
-          vec2 pos = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
+          rainAlpha *= getAbsoluteEdgeMask(EDGE_FADE);
-          rainAlpha *= clamp(pos.x / EDGE_FADE, 0, 1);
-          rainAlpha *= clamp(pos.y / EDGE_FADE, 0, 1);
-          rainAlpha *= clamp((uSizeX - pos.x) / EDGE_FADE, 0, 1);
-          rainAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1);
 
           // Add the matrix effect to the window.
           vec3 trailColor = vec3(${trailColor.red / 255}, 

src/WispsEffect.js

@@ -125,6 +125,7 @@ if (utils.isInShellProcess()) {
       // Inject some common shader snippets.
       ${shaderSnippets.standardUniforms()}
       ${shaderSnippets.noise()}
+      ${shaderSnippets.edgeMask()}
 
       const vec2  SEED            = vec2(${Math.random()}, ${Math.random()});
       const float WISPS_RADIUS    = 20.0;
@@ -188,12 +189,7 @@ if (utils.isInShellProcess()) {
         }
 
         // Compute shrinking edge mask.
-        float edgeFadeWidth = mix(0.01, 0.5, uProgress);
+        float mask = getRelativeEdgeMask(mix(0.01, 0.5, uProgress));
-        float mask          = 1.0;
-        mask *= smoothstep(0.0, 1.0,        cogl_tex_coord_in[0].x  / edgeFadeWidth);
-        mask *= smoothstep(0.0, 1.0,        cogl_tex_coord_in[0].y  / edgeFadeWidth);
-        mask *= smoothstep(0.0, 1.0, (1.0 - cogl_tex_coord_in[0].x) / edgeFadeWidth);
-        mask *= smoothstep(0.0, 1.0, (1.0 - cogl_tex_coord_in[0].y) / edgeFadeWidth);
 
         // Compute three different progress values.
         float wispsIn   = smoothstep(0, 1, clamp(uProgress/WISPS_IN_TIME, 0, 1));

src/shaderSnippets.js

@@ -33,6 +33,33 @@ function standardUniforms() {
   `;
 }
 
+// This method returns a mask which smoothly transitions towards zero when approaching
+// the window's borders. There is a variant which takes the transition area width in
+// pixels and one which takes this as a percentage.
+function edgeMask() {
+  return `
+  float getEdgeMask(vec2 uv, vec2 maxUV, float fadeWidth) {
+    float mask = 1.0;
+    mask *= smoothstep(0, 1, clamp(uv.x / fadeWidth, 0, 1));
+    mask *= smoothstep(0, 1, clamp(uv.y / fadeWidth, 0, 1));
+    mask *= smoothstep(0, 1, clamp((maxUV.x - uv.x) / fadeWidth, 0, 1));
+    mask *= smoothstep(0, 1, clamp((maxUV.y - uv.y) / fadeWidth, 0, 1));
+
+    return mask;
+  }
+
+  float getAbsoluteEdgeMask(float fadePixels) {
+    vec2 uv = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
+    return getEdgeMask(uv, vec2(uSizeX, uSizeY), fadePixels);
+  }
+  
+  float getRelativeEdgeMask(float fadeAmount) {
+    vec2 uv = cogl_tex_coord_in[0].st;
+    return getEdgeMask(uv, vec2(1.0), fadeAmount);
+  }
+  `;
+}
+
 // These noise algorithms are based on implementations by various authors from
 // shadertoy.com, which are all available under the MIT License. See the respective links
 // in the comments below.