From 847cbe42b1bb6d6e0ed0ced10a68d03d9664515d Mon Sep 17 00:00:00 2001
From: Colin Sullivan <colin@colin-sullivan.net>
Date: Wed, 12 Jul 2023 12:25:51 -0700
Subject: [PATCH] Feature: Allow color-gradient to replace original colors
 (#390)

---
 .../color-gradient/src/ColorGradientFilter.ts   | 17 +++++++++++++++++
 filters/color-gradient/src/colorGradient.frag   | 10 ++++++++--
 tools/demo/src/filters/color-gradient.js        |  1 +
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/filters/color-gradient/src/ColorGradientFilter.ts b/filters/color-gradient/src/ColorGradientFilter.ts
index cc3bf779f..9026ac53f 100644
--- a/filters/color-gradient/src/ColorGradientFilter.ts
+++ b/filters/color-gradient/src/ColorGradientFilter.ts
@@ -18,6 +18,7 @@ export type DefaultOptions = {
     angle?: number;
     alpha?: number;
     maxColors?: number;
+    replace?: boolean;
 };
 
 export type CssOptions = {
@@ -59,6 +60,7 @@ class ColorGradientFilter extends Filter
         alpha: 1.0,
         angle: 90.0,
         maxColors: 0,
+        replace: false,
     };
 
     private _stops: ColorStop[] = [];
@@ -182,6 +184,21 @@ class ColorGradientFilter extends Filter
     {
         return this.uniforms.uMaxColors;
     }
+
+    /**
+     * If true, the gradient will replace the existing color, otherwise it
+     * will be multiplied with it
+     * @default false
+     */
+    set replace(value: boolean)
+    {
+        this.uniforms.uReplace = value;
+    }
+
+    get replace(): boolean
+    {
+        return this.uniforms.uReplace;
+    }
 }
 
 export { ColorGradientFilter };
diff --git a/filters/color-gradient/src/colorGradient.frag b/filters/color-gradient/src/colorGradient.frag
index e0b79d8b4..3db3b739e 100644
--- a/filters/color-gradient/src/colorGradient.frag
+++ b/filters/color-gradient/src/colorGradient.frag
@@ -18,6 +18,7 @@ uniform int uType;
 uniform float uAngle;
 uniform float uAlpha;
 uniform int uMaxColors;
+uniform bool uReplace;
 
 struct ColorStop {
     float offset;
@@ -122,6 +123,11 @@ void main(void) {
     float gradientAlpha = uAlpha * currentColor.a;
     vec4 gradientColor = mix(colorFrom, colorTo, relativePercent) * gradientAlpha;
 
-    // mix resulting color with current color
-    gl_FragColor = gradientColor + currentColor*(1.-gradientColor.a);
+    if (uReplace == false) {
+        // mix resulting color with current color
+        gl_FragColor = gradientColor + currentColor*(1.-gradientColor.a);
+    } else {
+        // replace with gradient color
+        gl_FragColor = gradientColor;
+    }
 }
diff --git a/tools/demo/src/filters/color-gradient.js b/tools/demo/src/filters/color-gradient.js
index e147784e6..420b1d47a 100644
--- a/tools/demo/src/filters/color-gradient.js
+++ b/tools/demo/src/filters/color-gradient.js
@@ -156,6 +156,7 @@ export default function ()
             folder.add(this, 'alpha', 0, 1);
             folder.add(this, 'angle', 0, 360, 1);
             folder.add(this, 'maxColors', 0, 24, 1);
+            folder.add(this, 'replace', false);
             applyDefaultOptions(stops);
         },
     });