Feature: Allow color-gradient to replace original colors

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 };

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;
+    }
 }

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);
         },
     });