@lightningjs/renderer 3.0.0-beta14 → 3.0.0-beta15

package/dist/src/core/renderers/webgl/shaders/effects/BorderTopEffect.js

@@ -0,0 +1,71 @@
+/*
+ * 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 { updateShaderEffectColor } from './EffectUtils.js';
+import { ShaderEffect, } from './ShaderEffect.js';
+/**
+ * The BorderBottomEffect renders a border on the top side of an element
+ */
+export class BorderTopEffect extends ShaderEffect {
+    static z$__type__Props;
+    name = 'borderTop';
+    static getEffectKey() {
+        return `borderTop`;
+    }
+    static resolveDefaults(props) {
+        return {
+            width: props.width ?? 10,
+            color: props.color ?? 0xffffffff,
+        };
+    }
+    static uniforms = {
+        width: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        color: {
+            value: 0xffffffff,
+            updateProgramValue: updateShaderEffectColor,
+            method: 'uniform4fv',
+            type: 'vec4',
+        },
+    };
+    static methods = {
+        fillMask: `
+      float function(float dist) {
+        return clamp(-dist, 0.0, 1.0);
+      }
+    `,
+        rectDist: `
+      float function(vec2 p, vec2 size) {
+        vec2 d = abs(p) - size;
+        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
+      }
+    `,
+    };
+    static onEffectMask = `
+  vec2 pos = vec2(0.0, width * 0.5);
+  float mask = $rectDist(v_textureCoordinate.xy * u_dimensions - pos, vec2(u_dimensions.x, width*0.5));
+  return mix(shaderColor, maskColor, $fillMask(mask));
+  `;
+    static onColorize = `
+    return color;
+  `;
+}
+//# sourceMappingURL=BorderTopEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/BorderTopEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BorderTopEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/BorderTopEffect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAoB3B;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,YAAY;IAC/C,MAAM,CAAC,eAAe,CAAuB;IAC3B,IAAI,GAAG,WAAW,CAAC;IAErC,MAAM,CAAU,YAAY;QAC1B,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM,CAAU,eAAe,CAC7B,KAA2B;QAE3B,OAAO;YACL,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE;YACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,UAAU;SACjC,CAAC;IACJ,CAAC;IAED,MAAM,CAAU,QAAQ,GAAyB;QAC/C,KAAK,EAAE;YACL,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,KAAK,EAAE;YACL,KAAK,EAAE,UAAU;YACjB,kBAAkB,EAAE,uBAAuB;YAC3C,MAAM,EAAE,YAAY;YACpB,IAAI,EAAE,MAAM;SACb;KACF,CAAC;IAEF,MAAM,CAAU,OAAO,GAA2B;QAChD,QAAQ,EAAE;;;;KAIT;QACD,QAAQ,EAAE;;;;;KAKT;KACF,CAAC;IAEF,MAAM,CAAU,YAAY,GAAG;;;;GAI9B,CAAC;IAEF,MAAM,CAAU,UAAU,GAAG;;GAE5B,CAAC"}

package/dist/src/core/renderers/webgl/shaders/effects/EffectUtils.d.ts

@@ -0,0 +1,9 @@
+import type { DynamicShaderProps } from '../DynamicShader.js';
+import type { ShaderEffectValueMap } from './ShaderEffect.js';
+export declare const colorToFloat32Array: (argb: number) => number[];
+export declare const updateShaderEffectColor: (values: ShaderEffectValueMap) => void;
+export declare const updateFloat32ArrayLength2: (values: ShaderEffectValueMap) => void;
+export declare const updateFloat32ArrayLength4: (values: ShaderEffectValueMap) => void;
+export declare const updateFloat32ArrayLengthN: (values: ShaderEffectValueMap) => void;
+export declare const validateArrayLength4: (value: number | number[]) => number[];
+export declare const updateWebSafeRadius: (values: ShaderEffectValueMap, shaderProps?: DynamicShaderProps) => void;

package/dist/src/core/renderers/webgl/shaders/effects/EffectUtils.js

@@ -0,0 +1,136 @@
+/*
+ * 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.
+ */
+export const colorToFloat32Array = (argb) => {
+    const col = getRgbaComponentsNormalized(argb);
+    /* eslint-disable @typescript-eslint/no-non-null-assertion -- getRgbaComponentsNormalized has a constant array size */
+    col[0] *= col[3];
+    col[1] *= col[3];
+    col[2] *= col[3];
+    /* eslint-enable */
+    return col;
+};
+const getRgbaComponentsNormalized = (argb) => {
+    const r = ((argb / 65536) | 0) % 256;
+    const g = ((argb / 256) | 0) % 256;
+    const b = argb % 256;
+    const a = (argb / 16777216) | 0;
+    return [r / 255, g / 255, b / 255, a / 255];
+};
+export const updateShaderEffectColor = (values) => {
+    if (values.programValue === undefined) {
+        values.programValue = new Float32Array(4);
+    }
+    const rgba = values.value;
+    const floatArray = values.programValue;
+    floatArray[0] = (rgba >>> 24) / 255;
+    floatArray[1] = ((rgba >>> 16) & 0xff) / 255;
+    floatArray[2] = ((rgba >>> 8) & 0xff) / 255;
+    floatArray[3] = (rgba & 0xff) / 255;
+};
+export const updateFloat32ArrayLength2 = (values) => {
+    const validatedValue = (values.validatedValue || values.value);
+    if (values.programValue instanceof Float32Array) {
+        const floatArray = values.programValue;
+        floatArray[0] = validatedValue[0];
+        floatArray[1] = validatedValue[1];
+    }
+    else {
+        values.programValue = new Float32Array(validatedValue);
+    }
+};
+export const updateFloat32ArrayLength4 = (values) => {
+    const validatedValue = (values.validatedValue || values.value);
+    if (values.programValue instanceof Float32Array) {
+        const floatArray = values.programValue;
+        floatArray[0] = validatedValue[0];
+        floatArray[1] = validatedValue[1];
+        floatArray[2] = validatedValue[2];
+        floatArray[3] = validatedValue[3];
+    }
+    else {
+        values.programValue = new Float32Array(validatedValue);
+    }
+};
+export const updateFloat32ArrayLengthN = (values) => {
+    const validatedValue = (values.validatedValue || values.value);
+    if (values.programValue instanceof Float32Array) {
+        const len = validatedValue.length;
+        const programValue = values.programValue;
+        for (let i = 0; i < len; i++) {
+            programValue[i] = validatedValue[i];
+        }
+    }
+    else {
+        values.programValue = new Float32Array(validatedValue);
+    }
+};
+export const validateArrayLength4 = (value) => {
+    const isArray = Array.isArray(value);
+    if (!isArray) {
+        return [value, value, value, value];
+    }
+    else if (isArray && value.length === 4) {
+        return value;
+    }
+    else if (isArray && value.length === 2) {
+        return [value[0], value[1], value[0], value[1]];
+    }
+    else if (isArray && value.length === 3) {
+        return [value[0], value[1], value[2], value[0]];
+    }
+    return [value[0], value[0], value[0], value[0]];
+};
+export const updateWebSafeRadius = (values, shaderProps) => {
+    if (values.programValue === undefined) {
+        values.programValue = new Float32Array(4);
+    }
+    const programValue = values.programValue;
+    const validatedValue = (values.validatedValue || values.value);
+    if (shaderProps === undefined && values.$dimensions === undefined) {
+        programValue[0] = validatedValue[0];
+        programValue[1] = validatedValue[1];
+        programValue[2] = validatedValue[2];
+        programValue[3] = validatedValue[3];
+        return;
+    }
+    let storedDimensions = values.$dimensions;
+    if (shaderProps !== undefined) {
+        const { $dimensions } = shaderProps;
+        if (storedDimensions !== undefined &&
+            (storedDimensions.width === $dimensions.width ||
+                storedDimensions.height === $dimensions.height)) {
+            return;
+        }
+        if (storedDimensions === undefined) {
+            storedDimensions = {
+                width: $dimensions?.width,
+                height: $dimensions?.height,
+            };
+            values.$dimensions = storedDimensions;
+        }
+    }
+    const { width, height } = storedDimensions;
+    const [r0, r1, r2, r3] = validatedValue;
+    const factor = Math.min(Math.min(Math.min(width / Math.max(width, r0 + r1), width / Math.max(width, r2 + r3)), Math.min(height / Math.max(height, r0 + r2), height / Math.max(height, r1 + r3))), 1);
+    programValue[0] = r0 * factor;
+    programValue[1] = r1 * factor;
+    programValue[2] = r2 * factor;
+    programValue[3] = r3 * factor;
+};
+//# sourceMappingURL=EffectUtils.js.map

package/dist/src/core/renderers/webgl/shaders/effects/EffectUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EffectUtils.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/EffectUtils.ts"],"names":[],"mappings":"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"}

package/dist/src/core/renderers/webgl/shaders/effects/FadeOutEffect.d.ts

@@ -0,0 +1,36 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+/**
+ * Properties of the {@link FadeOutEffect}
+ *
+ */
+export interface FadeOutEffectProps extends DefaultEffectProps {
+    /**
+     * Fade around the edges of the node
+     *
+     * @remarks
+     * You can input an array with a length of up to four or a number.
+     *
+     * array length 4:
+     * [top, right, bottom, left]
+     *
+     * array length 2:
+     * [20, 40] -> [20(top), 40(right), 20(bottom), 40(left)]
+     *
+     * array length 3:
+     * [20, 40, 60] -> [20(top), 40(right), 60(bottom), 20(left)]
+     *
+     * number:
+     * 30 -> [30, 30, 30, 30]
+     *
+     * @default 10
+     */
+    fade?: number | number[];
+}
+export declare class FadeOutEffect extends ShaderEffect {
+    static z$__type__Props: FadeOutEffectProps;
+    readonly name = "fadeOut";
+    static getEffectKey(): string;
+    static uniforms: ShaderEffectUniforms;
+    static resolveDefaults(props: FadeOutEffectProps): Required<FadeOutEffectProps>;
+    static onColorize: string;
+}

package/dist/src/core/renderers/webgl/shaders/effects/FadeOutEffect.js

@@ -0,0 +1,85 @@
+/*
+ * 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 { updateFloat32ArrayLength4, validateArrayLength4, } from './EffectUtils.js';
+import { ShaderEffect, } from './ShaderEffect.js';
+export class FadeOutEffect extends ShaderEffect {
+    static z$__type__Props;
+    name = 'fadeOut';
+    static getEffectKey() {
+        return `fadeOut`;
+    }
+    static uniforms = {
+        fade: {
+            value: 0,
+            method: 'uniform4fv',
+            type: 'vec4',
+            validator: validateArrayLength4,
+            updateProgramValue: updateFloat32ArrayLength4,
+        },
+    };
+    static resolveDefaults(props) {
+        return {
+            fade: props.fade ?? 10,
+        };
+    }
+    static onColorize = `
+  vec2 point = v_textureCoordinate.xy * u_dimensions.xy;
+  vec2 pos1;
+  vec2 pos2;
+  vec2 d;
+  float c;
+  vec4 result = maskColor;
+
+
+  if(fade[0] > 0.0) {
+    pos1 = vec2(point.x, point.y);
+    pos2 = vec2(point.x, point.y + fade[0]);
+    d = pos2 - pos1;
+    c = dot(pos1, d) / dot(d, d);
+    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
+  }
+
+  if(fade[1] > 0.0) {
+    pos1 = vec2(point.x - u_dimensions.x - fade[1], v_textureCoordinate.y);
+    pos2 = vec2(point.x - u_dimensions.x, v_textureCoordinate.y);
+    d = pos1 - pos2;
+    c = dot(pos2, d) / dot(d, d);
+    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
+  }
+
+  if(fade[2] > 0.0) {
+    pos1 = vec2(v_textureCoordinate.x, point.y - u_dimensions.y - fade[2]);
+    pos2 = vec2(v_textureCoordinate.x, point.y - u_dimensions.y);
+    d = pos1 - pos2;
+    c = dot(pos2, d) / dot(d, d);
+    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
+  }
+
+  if(fade[3] > 0.0) {
+    pos1 = vec2(point.x, point.y);
+    pos2 = vec2(point.x + fade[3], point.y);
+    d = pos2 - pos1;
+    c = dot(pos1, d) / dot(d, d);
+    result = mix(vec4(0.0), result, smoothstep(0.0, 1.0, clamp(c, 0.0, 1.0)));
+  }
+
+  return result;
+  `;
+}
+//# sourceMappingURL=FadeOutEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/FadeOutEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FadeOutEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/FadeOutEffect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EACL,yBAAyB,EACzB,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,YAAY,GAIb,MAAM,mBAAmB,CAAC;AA8B3B,MAAM,OAAO,aAAc,SAAQ,YAAY;IAC7C,MAAM,CAAC,eAAe,CAAqB;IACzB,IAAI,GAAG,SAAS,CAAC;IAEnC,MAAM,CAAU,YAAY;QAC1B,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,CAAU,QAAQ,GAAyB;QAC/C,IAAI,EAAE;YACJ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,YAAY;YACpB,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,oBAAoB;YAC/B,kBAAkB,EAAE,yBAAyB;SAC9C;KACF,CAAC;IAEF,MAAM,CAAU,eAAe,CAC7B,KAAyB;QAEzB,OAAO;YACL,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,EAAE;SACvB,CAAC;IACJ,CAAC;IAED,MAAM,CAAU,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0C5B,CAAC"}

package/dist/src/core/renderers/webgl/shaders/effects/GlitchEffect.d.ts

@@ -0,0 +1,45 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+export interface GlitchEffectProps extends DefaultEffectProps {
+    /**
+     * Amplitude determines the intensity of the horizontal shift that happens in the glitch effect.
+     *
+     * @default 0.2
+     */
+    amplitude?: number;
+    /**
+     * Narrowness of the horizontal shift
+     *
+     * @default 4.0
+     */
+    narrowness?: number;
+    /**
+     * Blockiness of the horizontal shift
+     *
+     * @default 2.0
+     */
+    blockiness?: number;
+    /**
+     * Minimzer of the horizontal shift
+     *
+     * @default 8.0
+     */
+    minimizer?: number;
+    /**
+     * Used for the time loop of the horizontal shift
+     *
+     * @default Date.now()
+     */
+    time?: number;
+}
+/**
+ * Renders a Glitch effect using the incoming texture
+ */
+export declare class GlitchEffect extends ShaderEffect {
+    static z$__type__Props: GlitchEffectProps;
+    readonly name = "glitch";
+    static getEffectKey(props: GlitchEffectProps): string;
+    static resolveDefaults(props: GlitchEffectProps): Required<GlitchEffectProps>;
+    static uniforms: ShaderEffectUniforms;
+    static methods: Record<string, string>;
+    static onColorize: string;
+}

package/dist/src/core/renderers/webgl/shaders/effects/GlitchEffect.js

@@ -0,0 +1,104 @@
+import { ShaderEffect, } from './ShaderEffect.js';
+/**
+ * Renders a Glitch effect using the incoming texture
+ */
+export class GlitchEffect extends ShaderEffect {
+    static z$__type__Props;
+    name = 'glitch';
+    static getEffectKey(props) {
+        return `glitch`;
+    }
+    static resolveDefaults(props) {
+        return {
+            amplitude: props.amplitude ?? 0.2,
+            narrowness: props.narrowness ?? 4.0,
+            blockiness: props.blockiness ?? 2.0,
+            minimizer: props.minimizer ?? 8.0,
+            time: props.time ?? Date.now(),
+        };
+    }
+    static uniforms = {
+        amplitude: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        narrowness: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        blockiness: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        minimizer: {
+            value: 0,
+            method: 'uniform1f',
+            type: 'float',
+        },
+        time: {
+            value: 0,
+            method: 'uniform1f',
+            updateOnBind: true,
+            updateProgramValue: (values) => {
+                const value = (values.value =
+                    (Date.now() - values.value) % 1000);
+                values.programValue = value;
+            },
+            type: 'float',
+        },
+    };
+    static methods = {
+        rand: `
+      float function(vec2 p, float time) {
+        float t = floor(time * 20.) / 10.;
+        return fract(sin(dot(p, vec2(t * 12.9898, t * 78.233))) * 43758.5453);
+      }
+    `,
+        noise: `
+      float function(vec2 uv, float blockiness, float time) {
+        vec2 lv = fract(uv);
+        vec2 id = floor(uv);
+
+        float n1 = rand(id, time);
+        float n2 = rand(id+vec2(1,0), time);
+        float n3 = rand(id+vec2(0,1), time);
+        float n4 = rand(id+vec2(1,1), time);
+        vec2 u = smoothstep(0.0, 1.0 + blockiness, lv);
+        return mix(mix(n1, n2, u.x), mix(n3, n4, u.x), u.y);
+      }
+    `,
+        fbm: `
+      float function(vec2 uv, int count, float blockiness, float complexity, float time) {
+        float val = 0.0;
+        float amp = 0.5;
+        const int MAX_ITERATIONS = 10;
+
+        for(int i = 0; i < MAX_ITERATIONS; i++) {
+          if(i >= count) {break;}
+          val += amp * noise(uv, blockiness, time);
+          amp *= 0.5;
+          uv *= complexity;
+        }
+        return val;
+      }
+    `,
+    };
+    static onColorize = `
+    vec2 uv = v_textureCoordinate.xy;
+    float aspect = u_dimensions.x / u_dimensions.y;
+    vec2 a = vec2(uv.x * aspect , uv.y);
+    vec2 uv2 = vec2(a.x / u_dimensions.x, exp(a.y));
+
+    float shift = amplitude * pow($fbm(uv2, 4, blockiness, narrowness, time), minimizer);
+    float colR = texture2D(u_texture, vec2(uv.x + shift, uv.y)).r * (1. - shift);
+    float colG = texture2D(u_texture, vec2(uv.x - shift, uv.y)).g * (1. - shift);
+    float colB = texture2D(u_texture, vec2(uv.x - shift, uv.y)).b * (1. - shift);
+
+    vec3 f = vec3(colR, colG, colB);
+    return vec4(f, texture2D(u_texture, vec2(uv.x - shift, uv.y)).a);
+  `;
+}
+//# sourceMappingURL=GlitchEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/GlitchEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlitchEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/GlitchEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAmC3B;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,YAAY;IAC5C,MAAM,CAAC,eAAe,CAAoB;IACxB,IAAI,GAAG,QAAQ,CAAC;IAElC,MAAM,CAAU,YAAY,CAAC,KAAwB;QACnD,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,MAAM,CAAU,eAAe,CAC7B,KAAwB;QAExB,OAAO;YACL,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,GAAG;YACjC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,GAAG;YACnC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,GAAG;YACnC,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,GAAG;YACjC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,EAAE;SAC/B,CAAC;IACJ,CAAC;IAED,MAAM,CAAU,QAAQ,GAAyB;QAC/C,SAAS,EAAE;YACT,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,UAAU,EAAE;YACV,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,UAAU,EAAE;YACV,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,SAAS,EAAE;YACT,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,YAAY,EAAE,IAAI;YAClB,kBAAkB,EAAE,CAAC,MAAM,EAAE,EAAE;gBAC7B,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,KAAK;oBACzB,CAAC,IAAI,CAAC,GAAG,EAAE,GAAI,MAAM,CAAC,KAAgB,CAAC,GAAG,IAAI,CAAC,CAAC;gBAClD,MAAM,CAAC,YAAY,GAAG,KAAK,CAAC;YAC9B,CAAC;YACD,IAAI,EAAE,OAAO;SACd;KACF,CAAC;IAEF,MAAM,CAAU,OAAO,GAA2B;QAChD,IAAI,EAAE;;;;;KAKL;QACD,KAAK,EAAE;;;;;;;;;;;;KAYN;QACD,GAAG,EAAE;;;;;;;;;;;;;;KAcJ;KACF,CAAC;IAEF,MAAM,CAAU,UAAU,GAAG;;;;;;;;;;;;;GAa5B,CAAC"}

package/dist/src/core/renderers/webgl/shaders/effects/GrayscaleEffect.d.ts

@@ -0,0 +1,22 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+/**
+ * Properties of the {@link GrayscaleEffect} effect
+ */
+export interface GrayscaleEffectProps extends DefaultEffectProps {
+    /**
+     * Grey scale amount between 0 - 1.
+     *
+     * @default 1
+     */
+    amount?: number;
+}
+/**
+ * Grayscale effect grayscales the color values of the current mask color
+ */
+export declare class GrayscaleEffect extends ShaderEffect {
+    readonly name = "grayscale";
+    static getEffectKey(): string;
+    static resolveDefaults(props: GrayscaleEffectProps): Required<GrayscaleEffectProps>;
+    static uniforms: ShaderEffectUniforms;
+    static onColorize: string;
+}

package/dist/src/core/renderers/webgl/shaders/effects/GrayscaleEffect.js

@@ -0,0 +1,45 @@
+/*
+ * 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 { ShaderEffect, } from './ShaderEffect.js';
+/**
+ * Grayscale effect grayscales the color values of the current mask color
+ */
+export class GrayscaleEffect extends ShaderEffect {
+    name = 'grayscale';
+    static getEffectKey() {
+        return `grayscale`;
+    }
+    static resolveDefaults(props) {
+        return {
+            amount: props.amount ?? 1,
+        };
+    }
+    static uniforms = {
+        amount: {
+            value: 1,
+            method: 'uniform1f',
+            type: 'float',
+        },
+    };
+    static onColorize = `
+    float grayness = 0.2 * maskColor.r + 0.6 * maskColor.g + 0.2 * maskColor.b;
+    return vec4(amount * vec3(grayness) + (1.0 - amount) * maskColor.rgb, maskColor.a);
+  `;
+}
+//# sourceMappingURL=GrayscaleEffect.js.map

package/dist/src/core/renderers/webgl/shaders/effects/GrayscaleEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrayscaleEffect.js","sourceRoot":"","sources":["../../../../../../../src/core/renderers/webgl/shaders/effects/GrayscaleEffect.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAc3B;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,YAAY;IAC7B,IAAI,GAAG,WAAW,CAAC;IAErC,MAAM,CAAU,YAAY;QAC1B,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM,CAAU,eAAe,CAC7B,KAA2B;QAE3B,OAAO;YACL,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC;SAC1B,CAAC;IACJ,CAAC;IAED,MAAM,CAAU,QAAQ,GAAyB;QAC/C,MAAM,EAAE;YACN,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,OAAO;SACd;KACF,CAAC;IAEF,MAAM,CAAU,UAAU,GAAG;;;GAG5B,CAAC"}

package/dist/src/core/renderers/webgl/shaders/effects/HolePunchEffect.d.ts

@@ -0,0 +1,58 @@
+import { ShaderEffect, type DefaultEffectProps, type ShaderEffectUniforms } from './ShaderEffect.js';
+/**
+ * Properties of the {@link RadiusEffect} shader
+ */
+export interface HolePunchEffectProps extends DefaultEffectProps {
+    /**
+     * X position where the hole punch starts
+     */
+    x?: number;
+    /**
+     * Y position where the hole punch starts
+     */
+    y?: number;
+    /**
+     * Width of the hole punch
+     */
+    width?: number;
+    /**
+     * height of the hole punch
+     *
+     * @remarks if not defined uses the width value
+     */
+    height?: number;
+    /**
+     * Corner radius in pixels, to cut out of the corners of the hole punch
+     *
+     * @remarks
+     * You can input an array with a length of up to four or a number.
+     *
+     * array length 4:
+     * [topLeft, topRight, bottomRight, bottomLeft]
+     *
+     * array length 2:
+     * [20, 40] -> [20(topLeft), 40(topRight), 20(bottomRight), 40(bottomLeft)]
+     *
+     * array length 3:
+     * [20, 40, 60] -> [20(topLeft), 40(topRight), 60(bottomRight), 20(bottomLeft)]
+     *
+     * number:
+     * 30 -> [30, 30, 30, 30]
+     *
+     * @default 0
+     */
+    radius?: number | number[];
+}
+/**
+ * Masks the current maskcolor a holepunch effect with rounded corners similar to {@link RoundedRectangle}
+ */
+export declare class HolePunchEffect extends ShaderEffect {
+    static z$__type__Props: HolePunchEffectProps;
+    readonly name = "holePunch";
+    static getEffectKey(): string;
+    static uniforms: ShaderEffectUniforms;
+    static resolveDefaults(props: HolePunchEffectProps): Required<HolePunchEffectProps>;
+    static methods: Record<string, string>;
+    static onShaderMask: string;
+    static onEffectMask: string;
+}