Feat/radial gradient effect (#25)

- Added Radial Gradient.
- Gradients now properly overlay the mask color instead of completely
replacing it.

Author: frank-weindel

examples/tests/dynamic-shader.ts

@@ -40,7 +40,7 @@ export default async function ({ renderer }: ExampleSettings) {
             angle: 220,
             colors: [
               0xff0000ff, 0x00ff00ff, 0xff0000ff, 0x0000ffff, 0xffff00ff,
-              0xff0000ff,
+              0xff000000,
             ],
           },
         },
@@ -200,6 +200,28 @@ export default async function ({ renderer }: ExampleSettings) {
     parent: renderer.root,
   });
 
+  const t7 = renderer.createNode({
+    x: 1000,
+    y: 700,
+    width: 750,
+    height: 250,
+    shader: renderer.makeShader('DynamicShader', {
+      effects: [
+        {
+          type: 'radialGradient',
+          props: {
+            colors: [0xff0000ff, 0x00ff00ff, 0x00000000],
+            stops: [0.1, 0.4, 1.0],
+            height: 200,
+            width: 1000,
+            pivot: [0, 0.5],
+          },
+        },
+      ],
+    }),
+    parent: renderer.root,
+  });
+
   /*
    * End: Sprite Map Demo
    */

src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -36,6 +36,7 @@ import { BorderBottomEffect } from './effects/BorderBottomEffect.js';
 import { BorderLeftEffect } from './effects/BorderLeftEffect.js';
 import { GlitchEffect } from './effects/GlitchEffect.js';
 import { FadeOutEffect } from './effects/FadeOutEffect.js';
+import { RadialGradientEffect } from './effects/RadialGradientEffect.js';
 
 export interface DynamicShaderProps
   extends DimensionsShaderProp,
@@ -52,6 +53,7 @@ export interface EffectMap {
   borderTop: typeof BorderTopEffect;
   fadeOut: typeof FadeOutEffect;
   linearGradient: typeof LinearGradientEffect;
+  radialGradient: typeof RadialGradientEffect;
   grayscale: typeof GrayscaleEffect;
   glitch: typeof GlitchEffect;
 }
@@ -65,6 +67,7 @@ const Effects = {
   borderTop: BorderTopEffect,
   fadeOut: FadeOutEffect,
   linearGradient: LinearGradientEffect,
+  radialGradient: RadialGradientEffect,
   grayscale: GrayscaleEffect,
   glitch: GlitchEffect,
 };

src/core/renderers/webgl/shaders/effects/LinearGradientEffect.ts

@@ -176,7 +176,7 @@ export class LinearGradientEffect extends ShaderEffect {
         stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
         colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
       }
-      return colorOut;
+      return mix(maskColor, colorOut, colorOut.a);
     `;
   };
 }

src/core/renderers/webgl/shaders/effects/RadialGradientEffect.ts

@@ -0,0 +1,159 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { getNormalizedRgbaComponents } from '../../../../lib/utils.js';
+import {
+  type DefaultEffectProps,
+  ShaderEffect,
+  type ShaderEffectUniforms,
+} from './ShaderEffect.js';
+
+/**
+ * Properties of the {@link RadialGradientEffect} effect
+ */
+export interface RadialGradientEffectProps extends DefaultEffectProps {
+  /**
+   * Array of colors to be used in the RadialGradientEffect
+   *
+   * @default [0xff000000, 0xffffffff]
+   */
+  colors?: number[];
+  /**
+   * Array of color stops
+   */
+  stops?: number[];
+  /**
+   * Width of the RadialGradientEffect
+   */
+  width?: number;
+  /**
+   * height of the RadialGradientEffect
+   *
+   * @remarks if not defined uses the width value
+   */
+  height?: number;
+  /**
+   * center point of where the RadialGradientEffect is drawn
+   */
+  pivot?: number[];
+}
+
+export class RadialGradientEffect extends ShaderEffect {
+  static z$__type__Props: RadialGradientEffectProps;
+  override readonly name = 'radialGradient';
+
+  static override getEffectKey(props: RadialGradientEffectProps): string {
+    return `radialGradient${props.colors!.length}`;
+  }
+
+  static override resolveDefaults(
+    props: RadialGradientEffectProps,
+  ): Required<RadialGradientEffectProps> {
+    const colors = props.colors ?? [0xff000000, 0xffffffff];
+
+    let stops = props.stops;
+    if (!stops) {
+      stops = [];
+      const calc = colors.length - 1;
+      for (let i = 0; i < colors.length; i++) {
+        stops.push(i * (1 / calc));
+      }
+    }
+    return {
+      colors,
+      stops,
+      width: props.width ?? 0,
+      height: props.height ?? props.width ?? 0,
+      pivot: props.pivot ?? [0.5, 0.5],
+    };
+  }
+
+  static override uniforms: ShaderEffectUniforms = {
+    width: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    height: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    pivot: {
+      value: [0.5, 0.5],
+      method: 'uniform2fv',
+      type: 'vec2',
+    },
+    colors: {
+      value: 0xffffffff,
+      validator: (rgbas: number[]): number[] => {
+        const cols = rgbas.map((rgbas) => getNormalizedRgbaComponents(rgbas));
+        return cols.reduce((acc, val) => acc.concat(val), [] as number[]);
+      },
+      size: (props: RadialGradientEffectProps) => props.colors!.length,
+      method: 'uniform4fv',
+      type: 'vec4',
+    },
+    stops: {
+      value: [],
+      validator: (
+        value: number[],
+        props: RadialGradientEffectProps,
+      ): number[] => {
+        const colors = props.colors ?? [];
+        let stops = value;
+        const tmp: number[] = value;
+        if (stops.length === 0 || (stops && stops.length !== colors.length)) {
+          for (let i = 0; i < colors.length; i++) {
+            if (stops[i]) {
+              tmp[i] = stops[i]!;
+              if (stops[i - 1] === undefined && tmp[i - 2] !== undefined) {
+                tmp[i - 1] = tmp[i - 2]! + (stops[i]! - tmp[i - 2]!) / 2;
+              }
+            } else {
+              tmp[i] = i * (1 / (colors.length - 1));
+            }
+          }
+          stops = tmp;
+        }
+        return tmp;
+      },
+      size: (props: RadialGradientEffectProps) => props.colors!.length,
+      method: 'uniform1fv',
+      type: 'float',
+    },
+  };
+
+  static override onColorize = (props: RadialGradientEffectProps) => {
+    const colors = props.colors!.length || 1;
+    return `
+      vec2 point = v_textureCoordinate.xy * u_dimensions;
+      vec2 projection = vec2(pivot.x * u_dimensions.x, pivot.y * u_dimensions.y);
+
+      float dist = length((point - projection) / vec2(width, height));
+
+      float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
+      vec4 colorOut = mix(colors[0], colors[1], stopCalc);
+      for(int i = 1; i < ${colors}-1; i++) {
+        stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
+        colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
+      }
+      return mix(maskColor, colorOut, colorOut.a);
+    `;
+  };
+}