@lightningjs/renderer 2.9.2 → 2.11.0

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

@@ -1,127 +1,127 @@
-/*
- * 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;
-  `;
-}
+/*
+ * 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 +1,148 @@
-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);
-  `;
-}
+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 +1,67 @@
-/*
- * 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);
-  `;
-}
+/*
+ * 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);
+  `;
+}