@lightningjs/renderer 2.12.1 → 3.0.0-beta1

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

@@ -1,101 +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 { updateShaderEffectColor } from './EffectUtils.js';
-import {
-  ShaderEffect,
-  type DefaultEffectProps,
-  type ShaderEffectUniforms,
-} from './ShaderEffect.js';
-
-/**
- * Properties of the {@link BorderRightEffect} effect
- */
-export interface BorderRightEffectProps extends DefaultEffectProps {
-  /**
-   * Width of the border in pixels
-   *
-   * @default 10
-   */
-  width?: number;
-  /**
-   * Color of the border in 0xRRGGBBAA
-   *
-   * @default 0xffffffff
-   */
-  color?: number;
-}
-
-/**
- * The BorderBottomEffect renders a border on the right side of an element
- */
-export class BorderRightEffect extends ShaderEffect {
-  static z$__type__Props: BorderRightEffectProps;
-  override readonly name = 'borderRight';
-
-  static override getEffectKey(): string {
-    return `borderRight`;
-  }
-
-  static override resolveDefaults(
-    props: BorderRightEffectProps,
-  ): Required<BorderRightEffectProps> {
-    return {
-      width: props.width ?? 10,
-      color: props.color ?? 0xffffffff,
-    };
-  }
-
-  static override uniforms: ShaderEffectUniforms = {
-    width: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    color: {
-      value: 0xffffffff,
-      updateProgramValue: updateShaderEffectColor,
-      method: 'uniform4fv',
-      type: 'vec4',
-    },
-  };
-
-  static override methods: Record<string, string> = {
-    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 override onEffectMask = `
-  vec2 pos = vec2(u_dimensions.x - width * 0.5, 0.0);
-  float mask = $rectDist(v_textureCoordinate.xy * u_dimensions - pos, vec2(width*0.5, u_dimensions.y));
-  return mix(shaderColor, maskColor, $fillMask(mask));
-  `;
-
-  static override onColorize = `
-    return color;
-  `;
-}

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

@@ -1,101 +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 { updateShaderEffectColor } from './EffectUtils.js';
-import {
-  ShaderEffect,
-  type DefaultEffectProps,
-  type ShaderEffectUniforms,
-} from './ShaderEffect.js';
-
-/**
- * Properties of the {@link BorderTopEffect} effect
- */
-export interface BorderTopEffectProps extends DefaultEffectProps {
-  /**
-   * Width of the border in pixels
-   *
-   * @default 10
-   */
-  width?: number;
-  /**
-   * Color of the border in 0xRRGGBBAA
-   *
-   * @default 0xffffffff
-   */
-  color?: number;
-}
-
-/**
- * The BorderBottomEffect renders a border on the top side of an element
- */
-export class BorderTopEffect extends ShaderEffect {
-  static z$__type__Props: BorderTopEffectProps;
-  override readonly name = 'borderTop';
-
-  static override getEffectKey(): string {
-    return `borderTop`;
-  }
-
-  static override resolveDefaults(
-    props: BorderTopEffectProps,
-  ): Required<BorderTopEffectProps> {
-    return {
-      width: props.width ?? 10,
-      color: props.color ?? 0xffffffff,
-    };
-  }
-
-  static override uniforms: ShaderEffectUniforms = {
-    width: {
-      value: 0,
-      method: 'uniform1f',
-      type: 'float',
-    },
-    color: {
-      value: 0xffffffff,
-      updateProgramValue: updateShaderEffectColor,
-      method: 'uniform4fv',
-      type: 'vec4',
-    },
-  };
-
-  static override methods: Record<string, string> = {
-    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 override 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 override onColorize = `
-    return color;
-  `;
-}

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

@@ -1,159 +0,0 @@
-import type { DynamicShaderProps } from '../DynamicShader.js';
-import type { ShaderEffectValueMap } from './ShaderEffect.js';
-
-/*
- * 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: number) => {
-  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: number): number[] => {
-  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: ShaderEffectValueMap) => {
-  if (values.programValue === undefined) {
-    values.programValue = new Float32Array(4);
-  }
-  const rgba = values.value as number;
-  const floatArray = values.programValue as Float32Array;
-  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: ShaderEffectValueMap) => {
-  const validatedValue = (values.validatedValue || values.value) as number[];
-  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: ShaderEffectValueMap) => {
-  const validatedValue = (values.validatedValue || values.value) as number[];
-  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: ShaderEffectValueMap) => {
-  const validatedValue = (values.validatedValue || values.value) as number[];
-  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: number | number[]): number[] => {
-  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: ShaderEffectValueMap,
-  shaderProps?: DynamicShaderProps,
-) => {
-  if (values.programValue === undefined) {
-    values.programValue = new Float32Array(4);
-  }
-  const programValue = values.programValue as Float32Array;
-  const validatedValue = (values.validatedValue || values.value) as number[];
-  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 as number,
-        height: $dimensions?.height as number,
-      };
-      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;
-};

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

@@ -1,127 +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 {
-  updateFloat32ArrayLength4,
-  validateArrayLength4,
-} from './EffectUtils.js';
-import {
-  ShaderEffect,
-  type DefaultEffectProps,
-  type ShaderEffectUniforms,
-  type ShaderEffectValueMap,
-} 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 class FadeOutEffect extends ShaderEffect {
-  static z$__type__Props: FadeOutEffectProps;
-  override readonly name = 'fadeOut';
-
-  static override getEffectKey(): string {
-    return `fadeOut`;
-  }
-
-  static override uniforms: ShaderEffectUniforms = {
-    fade: {
-      value: 0,
-      method: 'uniform4fv',
-      type: 'vec4',
-      validator: validateArrayLength4,
-      updateProgramValue: updateFloat32ArrayLength4,
-    },
-  };
-
-  static override resolveDefaults(
-    props: FadeOutEffectProps,
-  ): Required<FadeOutEffectProps> {
-    return {
-      fade: props.fade ?? 10,
-    };
-  }
-
-  static override 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;
-  `;
-}

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

@@ -1,148 +0,0 @@
-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 class GlitchEffect extends ShaderEffect {
-  static z$__type__Props: GlitchEffectProps;
-  override readonly name = 'glitch';
-
-  static override getEffectKey(props: GlitchEffectProps): string {
-    return `glitch`;
-  }
-
-  static override resolveDefaults(
-    props: GlitchEffectProps,
-  ): Required<GlitchEffectProps> {
-    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 override uniforms: ShaderEffectUniforms = {
-    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 as number)) % 1000);
-        values.programValue = value;
-      },
-      type: 'float',
-    },
-  };
-
-  static override methods: Record<string, string> = {
-    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 override 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);
-  `;
-}

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

@@ -1,67 +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 {
-  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 class GrayscaleEffect extends ShaderEffect {
-  override readonly name = 'grayscale';
-
-  static override getEffectKey(): string {
-    return `grayscale`;
-  }
-
-  static override resolveDefaults(
-    props: GrayscaleEffectProps,
-  ): Required<GrayscaleEffectProps> {
-    return {
-      amount: props.amount ?? 1,
-    };
-  }
-
-  static override uniforms: ShaderEffectUniforms = {
-    amount: {
-      value: 1,
-      method: 'uniform1f',
-      type: 'float',
-    },
-  };
-
-  static override 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);
-  `;
-}