@lightningjs/renderer 0.3.0 → 0.3.2

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

@@ -0,0 +1,168 @@
+/*
+ * 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',
+        'a_textureIndex',
+      ],
+      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 { gl } = this;
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, textures[0]!.ctxTexture);
+  }
+
+  protected override bindProps(props: Required<RoundedRectangleProps>): void {
+    this.setUniform('u_radius', props.radius);
+  }
+
+  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_PRESICISON_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;
+      varying float v_textureIndex;
+
+      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;
+        v_textureIndex = a_textureIndex;
+
+        // flip y
+        gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0, 1);
+      }
+    `,
+    fragment: `
+      # ifdef GL_FRAGMENT_PRESICISON_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

@@ -0,0 +1,165 @@
+/*
+ * 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';
+
+declare module '../../../CoreShaderManager.js' {
+  interface ShaderMap {
+    SdfShader: typeof SdfShader;
+  }
+}
+
+/**
+ * Properties of the {@link SdfShader}
+ */
+export interface SdfShaderProps {
+  offset?: [number, 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_pixelRatio', uniform: 'uniform1f' },
+        { name: 'u_texture', uniform: 'uniform2f' },
+        { name: 'u_offset', uniform: 'uniform2fv' },
+        { name: 'u_color', uniform: 'uniform4fv' },
+        { name: 'u_size', uniform: 'uniform1f' },
+        { name: 'u_distanceRange', uniform: 'uniform1f' },
+        { name: 'u_debug', uniform: 'uniform1i' },
+      ],
+    });
+  }
+
+  override bindTextures(textures: WebGlCoreCtxTexture[]) {
+    const { gl } = this;
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, textures[0]!.ctxTexture);
+  }
+
+  protected override bindProps(props: SdfShaderProps): void {
+    const resolvedProps = SdfShader.resolveDefaults(props);
+    for (const key in resolvedProps) {
+      if (key === 'offset') {
+        this.setUniform('u_offset', resolvedProps[key]);
+      } else if (key === 'color') {
+        const components = getNormalizedRgbaComponents(resolvedProps.color);
+        this.setUniform('u_color', components);
+      } else if (key === 'size') {
+        this.setUniform('u_size', resolvedProps[key]);
+      } else if (key === 'distanceRange') {
+        this.setUniform('u_distanceRange', resolvedProps[key]);
+      } else if (key === 'debug') {
+        this.setUniform('u_debug', resolvedProps[key] ? 1.0 : 0.0);
+      }
+    }
+  }
+
+  static override resolveDefaults(
+    props: SdfShaderProps = {},
+  ): Required<SdfShaderProps> {
+    return {
+      offset: props.offset ?? [0.0, 0.0],
+      color: props.color ?? 0xffffffff,
+      size: props.size ?? 16,
+      distanceRange: props.distanceRange ?? 1.0,
+      debug: props.debug ?? false,
+    };
+  }
+
+  static override shaderSources: ShaderProgramSources = {
+    vertex: `
+      // 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_offset;
+      uniform vec2 u_resolution;
+      uniform float u_pixelRatio;
+      uniform float u_size;
+
+      varying vec2 v_texcoord;
+
+      void main() {
+        gl_Position = vec4(((a_position * u_size + u_offset) * u_pixelRatio / u_resolution * 2.0 - 1.0) * vec2(1, -1), 0, 1);
+        v_texcoord = a_textureCoordinate;
+      }
+    `,
+    fragment: `
+      precision highp float;
+
+      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

@@ -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 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,
+      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, 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

@@ -0,0 +1,86 @@
+/*
+ * 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 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,
+      validator: (rgba): number[] => getNormalizedRgbaComponents(rgba),
+      method: 'uniform4fv',
+      type: 'vec4',
+    },
+  };
+
+  static override onEffectMask = `
+  float mask = clamp(shaderMask + width, 0.0, 1.0) - clamp(shaderMask, 0.0, 1.0);
+  return mix(shaderColor, maskColor, mask);
+  `;
+
+  static override onColorize = `
+    return color;
+  `;
+}

package/src/core/renderers/webgl/shaders/effects/BorderLeftEffect.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 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,
+      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(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;
+  `;
+}