@lightningjs/renderer 2.16.0 → 3.0.0-beta10

package/src/core/renderers/webgl/shaders/RoundedRectangle.ts

@@ -1,167 +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 { WebGlCoreRenderer } from '../WebGlCoreRenderer.js';
-import {
-  WebGlCoreShader,
-  type DimensionsShaderProp,
-} from '../WebGlCoreShader.js';
-import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
-import type { ShaderProgramSources } from '../internal/ShaderUtils.js';
-
-/**
- * Properties of the {@link RoundedRectangle} shader
- */
-export interface RoundedRectangleProps extends DimensionsShaderProp {
-  /**
-   * Corner radius, in pixels, to cut out of the corners
-   *
-   * @defaultValue 10
-   */
-  radius?: number;
-}
-
-/**
- * Similar to the {@link DefaultShader} but cuts out 4 rounded rectangle corners
- * as defined by the specified corner {@link RoundedRectangleProps.radius}
- */
-export class RoundedRectangle extends WebGlCoreShader {
-  constructor(renderer: WebGlCoreRenderer) {
-    super({
-      renderer,
-      attributes: ['a_position', 'a_textureCoordinate', 'a_color'],
-      uniforms: [
-        { name: 'u_resolution', uniform: 'uniform2fv' },
-        { name: 'u_pixelRatio', uniform: 'uniform1f' },
-        { name: 'u_texture', uniform: 'uniform2f' },
-        { name: 'u_dimensions', uniform: 'uniform2fv' },
-        { name: 'u_radius', uniform: 'uniform1f' },
-      ],
-    });
-  }
-
-  static z$__type__Props: RoundedRectangleProps;
-
-  static override resolveDefaults(
-    props: RoundedRectangleProps,
-  ): Required<RoundedRectangleProps> {
-    return {
-      radius: props.radius || 10,
-      $dimensions: {
-        width: 0,
-        height: 0,
-      },
-    };
-  }
-
-  override bindTextures(textures: WebGlCoreCtxTexture[]) {
-    const { glw } = this;
-    glw.activeTexture(0);
-    glw.bindTexture(textures[0]!.ctxTexture);
-  }
-
-  protected override bindProps(props: Required<RoundedRectangleProps>): void {
-    const radiusFactor =
-      Math.min(props.$dimensions.width, props.$dimensions.height) /
-      (2.0 * props.radius);
-    this.glw.uniform1f(
-      this.getUniformLocation('u_radius'),
-      props.radius * Math.min(radiusFactor, 1),
-    );
-  }
-
-  override canBatchShaderProps(
-    propsA: Required<RoundedRectangleProps>,
-    propsB: Required<RoundedRectangleProps>,
-  ): boolean {
-    return (
-      propsA.radius === propsB.radius &&
-      propsA.$dimensions.width === propsB.$dimensions.width &&
-      propsA.$dimensions.height === propsB.$dimensions.height
-    );
-  }
-
-  static override shaderSources: ShaderProgramSources = {
-    vertex: `
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-
-      attribute vec2 a_position;
-      attribute vec2 a_textureCoordinate;
-      attribute vec4 a_color;
-      attribute float a_textureIndex;
-      attribute float a_depth;
-
-      uniform vec2 u_resolution;
-      uniform float u_pixelRatio;
-
-      varying vec4 v_color;
-      varying vec2 v_textureCoordinate;
-
-      void main() {
-        vec2 normalized = a_position * u_pixelRatio / u_resolution;
-        vec2 zero_two = normalized * 2.0;
-        vec2 clip_space = zero_two - 1.0;
-
-        // pass to fragment
-        v_color = a_color;
-        v_textureCoordinate = a_textureCoordinate;
-
-        // flip y
-        gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
-      }
-    `,
-    fragment: `
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-
-      uniform vec2 u_resolution;
-      uniform vec2 u_dimensions;
-      uniform float u_radius;
-      uniform sampler2D u_texture;
-
-      varying vec4 v_color;
-      varying vec2 v_textureCoordinate;
-
-      float boxDist(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;
-      }
-
-      float fillMask(float dist) {
-        return clamp(-dist, 0.0, 1.0);
-      }
-
-      void main() {
-        vec4 color = texture2D(u_texture, v_textureCoordinate) * v_color;
-        vec2 halfDimensions = u_dimensions * 0.5;
-
-        float d = boxDist(v_textureCoordinate.xy * u_dimensions - halfDimensions, halfDimensions + 0.5, u_radius);
-        gl_FragColor = mix(vec4(0.0), color, fillMask(d));
-      }
-    `,
-  };
-}

package/src/core/renderers/webgl/shaders/SdfShader.ts

@@ -1,204 +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 type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
-import type { WebGlCoreRenderer } from '../WebGlCoreRenderer.js';
-import { WebGlCoreShader } from '../WebGlCoreShader.js';
-import type { ShaderProgramSources } from '../internal/ShaderUtils.js';
-
-const IDENTITY_MATRIX_3x3 = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
-
-declare module '../../../CoreShaderManager.js' {
-  interface ShaderMap {
-    SdfShader: typeof SdfShader;
-  }
-}
-
-/**
- * Properties of the {@link SdfShader}
- */
-export interface SdfShaderProps {
-  transform?: Float32Array;
-  scrollY?: number;
-  /**
-   * Color in RGBA format
-   *
-   * @remarks
-   * Color channels must NOT be premultiplied by alpha for best blending results.
-   */
-  color?: number;
-  size?: number;
-  distanceRange?: number;
-  debug?: boolean;
-}
-/**
- * SdfShader supports multi-channel and single-channel signed distance field textures.
- *
- * @remarks
- * This Shader is used by the {@link SdfTextRenderer}. Do not use thie Shader
- * directly. Instead create a Text Node and assign a SDF font family to it.
- *
- * @internalRemarks
- * The only thing this shader does to support multi-channel SDFs is to
- * add a median function to the fragment shader. If this one function call
- * ends up being a performance bottleneck we can always look at ways to
- * remove it.
- */
-export class SdfShader extends WebGlCoreShader {
-  constructor(renderer: WebGlCoreRenderer) {
-    super({
-      renderer,
-      attributes: ['a_position', 'a_textureCoordinate'],
-      uniforms: [
-        { name: 'u_resolution', uniform: 'uniform2fv' },
-        { name: 'u_transform', uniform: 'uniformMatrix3fv' },
-        { name: 'u_scrollY', uniform: 'uniform1f' },
-        { name: 'u_pixelRatio', uniform: 'uniform1f' },
-        { name: 'u_texture', uniform: 'uniform2f' },
-        { name: 'u_color', uniform: 'uniform4fv' },
-        { name: 'u_size', uniform: 'uniform1f' },
-        { name: 'u_distanceRange', uniform: 'uniform1f' },
-        { name: 'u_debug', uniform: 'uniform1i' },
-      ],
-    });
-  }
-
-  static z$__type__Props: SdfShaderProps;
-
-  override bindTextures(textures: WebGlCoreCtxTexture[]) {
-    const { glw } = this;
-    glw.activeTexture(0);
-    glw.bindTexture(textures[0]!.ctxTexture);
-  }
-
-  protected override bindProps(props: SdfShaderProps): void {
-    const resolvedProps = SdfShader.resolveDefaults(props);
-    for (const key in resolvedProps) {
-      if (key === 'transform') {
-        this.glw.uniformMatrix3fv(
-          this.getUniformLocation('u_transform'),
-          resolvedProps[key],
-        );
-      } else if (key === 'scrollY') {
-        this.glw.uniform1f(
-          this.getUniformLocation('u_scrollY'),
-          resolvedProps[key],
-        );
-      } else if (key === 'color') {
-        const components = getNormalizedRgbaComponents(resolvedProps.color);
-        this.glw.uniform4fv(this.getUniformLocation('u_color'), components);
-      } else if (key === 'size') {
-        this.glw.uniform1f(
-          this.getUniformLocation('u_size'),
-          resolvedProps[key],
-        );
-      } else if (key === 'distanceRange') {
-        this.glw.uniform1f(
-          this.getUniformLocation('u_distanceRange'),
-          resolvedProps[key],
-        );
-      } else if (key === 'debug') {
-        this.glw.uniform1i(
-          this.getUniformLocation('u_debug'),
-          resolvedProps[key] ? 1 : 0,
-        );
-      }
-    }
-  }
-
-  static override resolveDefaults(
-    props: SdfShaderProps = {},
-  ): Required<SdfShaderProps> {
-    return {
-      transform: props.transform ?? IDENTITY_MATRIX_3x3,
-      scrollY: props.scrollY ?? 0,
-      color: props.color ?? 0xffffffff,
-      size: props.size ?? 16,
-      distanceRange: props.distanceRange ?? 1.0,
-      debug: props.debug ?? false,
-    };
-  }
-
-  static override shaderSources: ShaderProgramSources = {
-    vertex: `
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-      // an attribute is an input (in) to a vertex shader.
-      // It will receive data from a buffer
-      attribute vec2 a_position;
-      attribute vec2 a_textureCoordinate;
-
-      uniform vec2 u_resolution;
-      uniform mat3 u_transform;
-      uniform float u_scrollY;
-      uniform float u_pixelRatio;
-      uniform float u_size;
-
-      varying vec2 v_texcoord;
-
-      void main() {
-        vec2 scrolledPosition = a_position * u_size - vec2(0, u_scrollY);
-        vec2 transformedPosition = (u_transform * vec3(scrolledPosition, 1)).xy;
-
-        // Calculate screen space with pixel ratio
-        vec2 screenSpace = (transformedPosition * u_pixelRatio / u_resolution * 2.0 - 1.0) * vec2(1, -1);
-
-        gl_Position = vec4(screenSpace, 0.0, 1.0);
-        v_texcoord = a_textureCoordinate;
-
-      }
-    `,
-    fragment: `
-      # ifdef GL_FRAGMENT_PRECISION_HIGH
-      precision highp float;
-      # else
-      precision mediump float;
-      # endif
-      uniform vec4 u_color;
-      uniform sampler2D u_texture;
-      uniform float u_distanceRange;
-      uniform float u_pixelRatio;
-      uniform int u_debug;
-
-      varying vec2 v_texcoord;
-
-      float median(float r, float g, float b) {
-          return max(min(r, g), min(max(r, g), b));
-      }
-
-      void main() {
-          vec3 sample = texture2D(u_texture, v_texcoord).rgb;
-          if (u_debug == 1) {
-            gl_FragColor = vec4(sample.r, sample.g, sample.b, 1.0);
-            return;
-          }
-          float scaledDistRange = u_distanceRange * u_pixelRatio;
-          float sigDist = scaledDistRange * (median(sample.r, sample.g, sample.b) - 0.5);
-          float opacity = clamp(sigDist + 0.5, 0.0, 1.0) * u_color.a;
-
-          // Build the final color.
-          // IMPORTANT: We must premultiply the color by the alpha value before returning it.
-          gl_FragColor = vec4(u_color.r * opacity, u_color.g * opacity, u_color.b * opacity, opacity);
-      }
-    `,
-  };
-}

package/src/core/renderers/webgl/shaders/effects/BorderBottomEffect.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 BorderBottomEffect} effect
- */
-export interface BorderBottomEffectProps 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 bottom side of an element
- */
-export class BorderBottomEffect extends ShaderEffect {
-  static z$__type__Props: BorderBottomEffectProps;
-  override readonly name = 'borderBottom';
-
-  static override getEffectKey(): string {
-    return `borderBottom`;
-  }
-
-  static override resolveDefaults(
-    props: BorderBottomEffectProps,
-  ): Required<BorderBottomEffectProps> {
-    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, u_dimensions.y - 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/BorderEffect.ts

@@ -1,87 +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 BorderEffect} effect
- */
-export interface BorderEffectProps extends DefaultEffectProps {
-  /**
-   * Width of the border in pixels
-   *
-   * @default 10
-   */
-  width?: number;
-  /**
-   * Color of the border in 0xRRGGBBAA
-   *
-   * @default 0xffffffff
-   */
-  color?: number;
-}
-
-/**
- * The BorderEffect renders a border along all edges of an element
- */
-export class BorderEffect extends ShaderEffect {
-  static z$__type__Props: BorderEffectProps;
-  override readonly name = 'border';
-
-  static override getEffectKey(): string {
-    return `border`;
-  }
-
-  static override resolveDefaults(
-    props: BorderEffectProps,
-  ): Required<BorderEffectProps> {
-    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 onEffectMask = `
-  float intR = shaderMask + 1.0;
-  float mask = clamp(intR + width, 0.0, 1.0) - clamp(intR, 0.0, 1.0);
-  return mix(shaderColor, mix(shaderColor, maskColor, maskColor.a), mask);
-  `;
-
-  static override onColorize = `
-    return color;
-  `;
-}

package/src/core/renderers/webgl/shaders/effects/BorderLeftEffect.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 BorderLeftEffect} effect
- */
-export interface BorderLeftEffectProps 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 left of an element
- */
-export class BorderLeftEffect extends ShaderEffect {
-  static z$__type__Props: BorderLeftEffectProps;
-  override readonly name = 'borderLeft';
-
-  static override getEffectKey(): string {
-    return `borderLeft`;
-  }
-
-  static override resolveDefaults(
-    props: BorderLeftEffectProps,
-  ): Required<BorderLeftEffectProps> {
-    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(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;
-  `;
-}