From 5287ac2614ae9311811a07ff88b27783ba312d15 Mon Sep 17 00:00:00 2001
From: Simon Schneegans <code@simonschneegans.de>
Date: Sun, 16 Jan 2022 05:31:00 +0100
Subject: [PATCH] :recycle: Move edge mask to snippets

---
 src/FireEffect.js     |  7 ++-----
 src/MatrixEffect.js   |  7 ++-----
 src/WispsEffect.js    |  8 ++------
 src/shaderSnippets.js | 27 +++++++++++++++++++++++++++
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/FireEffect.js b/src/FireEffect.js
index 3493692..94bf2bc 100644
--- a/src/FireEffect.js
+++ b/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 *= 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));
+          effectMask *= getAbsoluteEdgeMask(edgeFadeWidth);
 
           return vec2(windowMask, effectMask);
         }
diff --git a/src/MatrixEffect.js b/src/MatrixEffect.js
index ae47a0f..b35ce83 100644
--- a/src/MatrixEffect.js
+++ b/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 *= 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);
+          rainAlpha *= getAbsoluteEdgeMask(EDGE_FADE);
 
           // Add the matrix effect to the window.
           vec3 trailColor = vec3(${trailColor.red / 255}, 
diff --git a/src/WispsEffect.js b/src/WispsEffect.js
index 95139c4..d8a7b07 100644
--- a/src/WispsEffect.js
+++ b/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          = 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);
+        float mask = getRelativeEdgeMask(mix(0.01, 0.5, uProgress));
 
         // Compute three different progress values.
         float wispsIn   = smoothstep(0, 1, clamp(uProgress/WISPS_IN_TIME, 0, 1));
diff --git a/src/shaderSnippets.js b/src/shaderSnippets.js
index 5fe74ea..65fcf24 100644
--- a/src/shaderSnippets.js
+++ b/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.