@lightningjs/renderer 0.3.0 → 0.3.2

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

@@ -0,0 +1,101 @@
+/*
+ * 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 {
+  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,
+      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
+      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

@@ -0,0 +1,101 @@
+/*
+ * 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 {
+  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,
+      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
+      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

@@ -0,0 +1,33 @@
+/*
+ * 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);
+  col[0] *= col[3]!;
+  col[1] *= col[3]!;
+  col[2] *= col[3]!;
+  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];
+};

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

@@ -0,0 +1,111 @@
+/*
+ * 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';
+
+export interface FadeOutEffectProps extends DefaultEffectProps {
+  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: (value: number | number[]) => {
+        let r = value;
+        if (Array.isArray(r)) {
+          if (r.length === 2) {
+            r = [r[0], r[1], r[0], r[1]] as number[];
+          } else if (r.length === 3) {
+            r = [r[0], r[1], r[2], r[0]] as number[];
+          } else if (r.length !== 4) {
+            r = [r[0], r[0], r[0], r[0]] as number[];
+          }
+        } else if (typeof r === 'number') {
+          r = [r, r, r, r];
+        }
+        return r;
+      },
+    },
+  };
+
+  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

@@ -0,0 +1,145 @@
+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',
+      validator: (value: number) => {
+        return (Date.now() - value) % 1000;
+      },
+      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

@@ -0,0 +1,37 @@
+/*
+ * 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 {
+  override readonly name = 'grayscale';
+
+  static override getEffectKey(): string {
+    return `grayscale`;
+  }
+
+  static override onColorize = `
+    vec3 color = pow(maskColor.rgb, vec3(2.0));
+    float gray = dot(color, vec3(0.2126, 0.7152, 0.0722));
+    float gammaGray = sqrt(gray);
+    return vec4(gammaGray, gammaGray, gammaGray, 1.0);
+  `;
+}

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

@@ -0,0 +1,182 @@
+/*
+ * 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 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
+   *
+   * @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 {
+    return `linearGradient${props.colors!.length}`;
+  }
+
+  static override resolveDefaults(
+    props: LinearGradientEffectProps,
+  ): Required<LinearGradientEffectProps> {
+    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,
+      angle: props.angle ?? 0,
+    };
+  }
+
+  static override uniforms: ShaderEffectUniforms = {
+    angle: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    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: LinearGradientEffectProps) => props.colors!.length,
+      method: 'uniform4fv',
+      type: 'vec4',
+    },
+    stops: {
+      value: [],
+      validator: (
+        value: number[],
+        props: LinearGradientEffectProps,
+      ): 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: 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);
+      }
+    `,
+    degToRad: `
+      float function(float d) {
+        return d * (PI / 180.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 d = angle - 90.0;
+      float a = $degToRad(d);
+      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, $degToRad(d + 180.0));
+      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 = 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);
+    `;
+  };
+}