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