@lightningjs/renderer 2.16.0 → 3.0.0-beta10

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

@@ -1,157 +0,0 @@
-/*
- * 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 type { DynamicShaderProps } from '../DynamicShader.js';
-import { updateWebSafeRadius, validateArrayLength4 } from './EffectUtils.js';
-import {
-  ShaderEffect,
-  type DefaultEffectProps,
-  type ShaderEffectUniforms,
-  type ShaderEffectValueMap,
-} 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 class HolePunchEffect extends ShaderEffect {
-  static z$__type__Props: HolePunchEffectProps;
-  override readonly name = 'holePunch';
-
-  static override getEffectKey(): string {
-    return `holePunch`;
-  }
-
-  static override uniforms: ShaderEffectUniforms = {
-    x: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    y: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    width: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    height: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    radius: {
-      value: 0,
-      method: 'uniform4fv',
-      type: 'vec4',
-      updateOnBind: true,
-      validator: validateArrayLength4,
-      updateProgramValue: updateWebSafeRadius,
-    },
-  };
-
-  static override resolveDefaults(
-    props: HolePunchEffectProps,
-  ): Required<HolePunchEffectProps> {
-    return {
-      x: props.x || 0,
-      y: props.y || 0,
-      width: props.width || 50,
-      height: props.height || 50,
-      radius: props.radius ?? 0,
-    };
-  }
-
-  static override methods: Record<string, string> = {
-    fillMask: `
-      float function(float dist) {
-        return clamp(-dist, 0.0, 1.0);
-      }
-    `,
-    boxDist: `
-      float function(vec2 p, vec2 size, float radius) {
-        size -= vec2(radius);
-        vec2 d = abs(p) - size;
-        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius;
-      }
-    `,
-  };
-
-  static override onShaderMask = `
-  vec2 halfDimensions = u_dimensions * 0.5;
-  vec2 size = vec2(width, height) * 0.5;
-  vec2 basePos = v_textureCoordinate.xy * u_dimensions.xy - vec2(x, y);
-  vec2 pos = basePos - size;
-  float r = radius[0] * step(pos.x, 0.5) * step(pos.y, 0.5);
-  r = r + radius[1] * step(0.5, pos.x) * step(pos.y, 0.5);
-  r = r + radius[2] * step(0.5, pos.x) * step(0.5, pos.y);
-  r = r + radius[3] * step(pos.x, 0.5) * step(0.5, pos.y);
-  return $boxDist(pos, size, r);
-  `;
-
-  static override onEffectMask = `
-  return mix(maskColor, vec4(0.0), $fillMask(shaderMask));
-  `;
-}

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

@@ -1,171 +0,0 @@
-/*
- * 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 { updateFloat32ArrayLengthN } from './EffectUtils.js';
-import {
-  type DefaultEffectProps,
-  ShaderEffect,
-  type ShaderEffectUniforms,
-  type ShaderEffectValueMap,
-} from './ShaderEffect.js';
-
-/**
- * Properties of the {@link LinearGradientEffect} effect
- */
-export interface LinearGradientEffectProps extends DefaultEffectProps {
-  /**
-   * Array of colors to be used in the LinearGradientEffect
-   *
-   * @default [0xff000000, 0xffffffff]
-   */
-  colors?: number[];
-  /**
-   * Angle of the LinearGradientEffect, Angle in Radians
-   *
-   * @default 0
-   */
-  angle?: number;
-  /**
-   * Array of color stops
-   */
-  stops?: number[];
-}
-
-/**
- * Linear Gradient effect over a effect mask
- */
-export class LinearGradientEffect extends ShaderEffect {
-  static z$__type__Props: LinearGradientEffectProps;
-  override readonly name = 'linearGradient';
-
-  static override getEffectKey(props: LinearGradientEffectProps): string {
-    if ((props.colors as unknown as ShaderEffectValueMap).value as number[]) {
-      return `linearGradient${
-        ((props.colors as unknown as ShaderEffectValueMap).value as number[])
-          .length
-      }`;
-    }
-    return `linearGradient${props.colors!.length}`;
-  }
-
-  static override resolveDefaults(
-    props: LinearGradientEffectProps,
-  ): Required<LinearGradientEffectProps> {
-    const colors = props.colors ?? [0xff000000, 0xffffffff];
-
-    let stops = props.stops || [];
-    if (stops.length === 0 || stops.length !== colors.length) {
-      const colorsL = colors.length;
-      let i = 0;
-      const tmp = stops;
-      for (; i < colorsL; 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 {
-      colors,
-      stops,
-      angle: props.angle ?? 0,
-    };
-  }
-
-  static override uniforms: ShaderEffectUniforms = {
-    angle: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    colors: {
-      value: 0xffffffff,
-      validator: (rgbas: number[]): number[] => {
-        return rgbas.reduce(
-          (acc, val) => acc.concat(getNormalizedRgbaComponents(val)),
-          [] as number[],
-        );
-      },
-      updateProgramValue: updateFloat32ArrayLengthN,
-      size: (props: LinearGradientEffectProps) => props.colors!.length,
-      method: 'uniform4fv',
-      type: 'vec4',
-    },
-    stops: {
-      value: [],
-      size: (props: LinearGradientEffectProps) => props.colors!.length,
-      method: 'uniform1fv',
-      type: 'float',
-    },
-  };
-
-  static override methods: Record<string, string> = {
-    fromLinear: `
-      vec4 function(vec4 linearRGB) {
-        vec4 higher = vec4(1.055)*pow(linearRGB, vec4(1.0/2.4)) - vec4(0.055);
-        vec4 lower = linearRGB * vec4(12.92);
-        return mix(higher, lower, 1.0);
-      }
-    `,
-    toLinear: `
-      vec4 function(vec4 sRGB) {
-        vec4 higher = pow((sRGB + vec4(0.055))/vec4(1.055), vec4(2.4));
-        vec4 lower = sRGB/vec4(12.92);
-        return mix(higher, lower, 1.0);
-      }
-    `,
-    calcPoint: `
-      vec2 function(float d, float angle) {
-        return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
-      }
-    `,
-  };
-
-  static ColorLoop = (amount: number): string => {
-    let loop = '';
-    for (let i = 2; i < amount; i++) {
-      loop += `colorOut = mix(colorOut, colors[${i}], clamp((dist - stops[${
-        i - 1
-      }]) / (stops[${i}] - stops[${i - 1}]), 0.0, 1.0));`;
-    }
-    return loop;
-  };
-
-  static override onColorize = (props: LinearGradientEffectProps) => {
-    const colors = props.colors!.length || 1;
-    return `
-      float a = angle - (PI / 180.0 * 90.0);
-      float lineDist = abs(u_dimensions.x * cos(a)) + abs(u_dimensions.y * sin(a));
-      vec2 f = $calcPoint(lineDist * 0.5, a);
-      vec2 t = $calcPoint(lineDist * 0.5, a + PI);
-      vec2 gradVec = t - f;
-      float dist = dot(v_textureCoordinate.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
-
-      float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
-      vec4 colorOut = $fromLinear(mix($toLinear(colors[0]), $toLinear(colors[1]), stopCalc));
-      ${this.ColorLoop(colors)}
-      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
-    `;
-  };
-}

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

@@ -1,168 +0,0 @@
-/*
- * 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 {
-  updateFloat32ArrayLength2,
-  updateFloat32ArrayLengthN,
-} from './EffectUtils.js';
-import {
-  type DefaultEffectProps,
-  ShaderEffect,
-  type ShaderEffectUniforms,
-  type ShaderEffectValueMap,
-} 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 {
-    if ((props.colors as unknown as ShaderEffectValueMap).value as number[]) {
-      return `radialGradient${
-        ((props.colors as unknown as ShaderEffectValueMap).value as number[])
-          .length
-      }`;
-    }
-    return `radialGradient${props.colors!.length}`;
-  }
-
-  static override resolveDefaults(
-    props: RadialGradientEffectProps,
-  ): Required<RadialGradientEffectProps> {
-    const colors = props.colors ?? [0xff000000, 0xffffffff];
-
-    let stops = props.stops || [];
-    if (stops.length === 0 || stops.length !== colors.length) {
-      const colorsL = colors.length;
-      let i = 0;
-      const tmp = stops;
-      for (; i < colorsL; 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 {
-      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],
-      updateProgramValue: updateFloat32ArrayLength2,
-      method: 'uniform2fv',
-      type: 'vec2',
-    },
-    colors: {
-      value: 0xffffffff,
-      validator: (rgbas: number[]): number[] => {
-        return rgbas.reduce(
-          (acc, val) => acc.concat(getNormalizedRgbaComponents(val)),
-          [] as number[],
-        );
-      },
-      updateProgramValue: updateFloat32ArrayLengthN,
-      size: (props: RadialGradientEffectProps) => props.colors!.length,
-      method: 'uniform4fv',
-      type: 'vec4',
-    },
-    stops: {
-      value: [],
-      size: (props: RadialGradientEffectProps) => props.colors!.length,
-      method: 'uniform1fv',
-      type: 'float',
-    },
-  };
-
-  static ColorLoop = (amount: number): string => {
-    let loop = '';
-    for (let i = 2; i < amount; i++) {
-      loop += `colorOut = mix(colorOut, colors[${i}], clamp((dist - stops[${
-        i - 1
-      }]) / (stops[${i}] - stops[${i - 1}]), 0.0, 1.0));`;
-    }
-    return loop;
-  };
-
-  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);
-      ${this.ColorLoop(colors)}
-      return mix(maskColor, colorOut, clamp(colorOut.a, 0.0, 1.0));
-    `;
-  };
-}

package/src/core/renderers/webgl/shaders/effects/RadialProgressEffect.ts

@@ -1,187 +0,0 @@
-/*
- * 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 { updateShaderEffectColor } from './EffectUtils.js';
-import {
-  ShaderEffect,
-  type DefaultEffectProps,
-  type ShaderEffectUniforms,
-} from './ShaderEffect.js';
-
-/**
- * Properties of the {@link RadialProgressEffect} effect
- */
-export interface RadialProgressEffectProps extends DefaultEffectProps {
-  /**
-   * Width of the border in pixels
-   *
-   * @default 10
-   */
-  width?: number;
-  /**
-   * progress from 0 to 1 in floats
-   *
-   * @default 0.5;
-   */
-  progress?: number;
-  /**
-   * offset where the radial progress starts drawing.
-   *
-   * @default 0;
-   */
-  offset?: number;
-  /**
-   * maximum range of the radial progress in radians
-   *
-   * @default Math.PI * 2
-   */
-  range?: number;
-  /**
-   * rounded ends of the progress bar;
-   *
-   * @default false
-   */
-  rounded?: boolean;
-  /**
-   * radius from center to outer edge from 0 to 1 in floats;
-   *
-   * @default 1
-   */
-  radius?: number;
-  /**
-   * Color of the border in 0xRRGGBBAA
-   *
-   * @default 0xffffffff
-   */
-  color?: number;
-}
-
-/**
- * The RadialProgressEffect renders a border along all edges of an element
- */
-export class RadialProgressEffect extends ShaderEffect {
-  static z$__type__Props: RadialProgressEffectProps;
-  override readonly name = 'radialProgress';
-
-  static override getEffectKey(): string {
-    return `radialProgress`;
-  }
-
-  static override resolveDefaults(
-    props: RadialProgressEffectProps,
-  ): Required<RadialProgressEffectProps> {
-    return {
-      width: props.width ?? 10,
-      progress: props.progress ?? 0.5,
-      offset: props.offset ?? 0,
-      range: props.range ?? Math.PI * 2,
-      rounded: props.rounded ?? false,
-      radius: props.radius ?? 1,
-      color: props.color ?? 0xffffffff,
-    };
-  }
-
-  static override uniforms: ShaderEffectUniforms = {
-    width: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    progress: {
-      value: 0.5,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    offset: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    range: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    rounded: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-      validator: (value: boolean): number => {
-        return value ? 1 : 0;
-      },
-    },
-    radius: {
-      value: 1,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    color: {
-      value: 0xffffffff,
-      updateProgramValue: updateShaderEffectColor,
-      method: 'uniform4fv',
-      type: 'vec4',
-    },
-  };
-
-  static override methods: Record<string, string> = {
-    rotateUV: `
-    vec2 function(vec2 uv, float d) {
-      float s = sin(d);
-      float c = cos(d);
-      mat2 rotMatrix = mat2(c, -s, s, c);
-      return uv * rotMatrix;
-    }
-    `,
-    drawDot: `
-    float function(vec2 uv, vec2 p, float r) {
-      uv += p;
-      float circle = length(uv) - r;
-      return clamp(-circle, 0.0, 1.0);
-    }
-    `,
-  };
-
-  static override onEffectMask = `
-    float outerRadius = radius * u_dimensions.y * 0.5;
-
-    float endAngle = range * progress - 0.0005;
-
-    vec2 uv = v_textureCoordinate.xy * u_dimensions.xy - u_dimensions * 0.5;
-
-    uv = $rotateUV(uv, -(offset));
-    float linewidth = width * u_pixelRatio;
-    float circle = length(uv) - (outerRadius - linewidth) ;
-    circle = abs(circle) - linewidth;
-    circle = clamp(-circle, 0.0, 1.0);
-
-    float angle = (atan(uv.x, -uv.y) / 3.14159265359 * 0.5);
-    float p = endAngle / (PI * 2.);
-
-    circle *= step(fract(angle), fract(p));
-
-    circle = rounded < 1. ? circle : max(circle, $drawDot(uv, vec2(0, outerRadius - linewidth), linewidth));
-    circle = rounded < 1. ? circle : max(circle, $drawDot($rotateUV(uv, -(endAngle)), vec2(0, outerRadius - linewidth), linewidth));
-
-    return mix(shaderColor, maskColor, circle);
-  `;
-
-  static override onColorize = `
-    return color;
-  `;
-}