@lightningjs/renderer 2.16.0 → 3.0.0-beta10

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

@@ -0,0 +1,134 @@
+/*
+ * 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 { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+
+const IDENTITY_MATRIX_3x3 = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+/**
+ * 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 const Sdf: WebGlShaderType<SdfShaderProps> = {
+  props: {
+    transform: IDENTITY_MATRIX_3x3,
+    scrollY: 0,
+    color: 0xffffffff,
+    size: 16,
+    distanceRange: 1.0,
+    debug: false,
+  },
+  onSdfBind(props) {
+    this.uniformMatrix3fv('u_transform', props.transform);
+    this.uniform1f('u_scrollY', props.scrollY);
+    this.uniform4fa('u_color', getNormalizedRgbaComponents(props.color));
+    this.uniform1f('u_size', props.size);
+    this.uniform1f('u_distanceRange', props.distanceRange);
+    this.uniform1i('u_debug', props.debug ? 1 : 0);
+  },
+  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_textureCoords;
+
+    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_textureCoords;
+
+    }
+  `,
+  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/shaders/webgl/Shadow.ts

@@ -0,0 +1,115 @@
+/*
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import {
+  ShadowTemplate,
+  type ShadowProps,
+} from '../templates/ShadowTemplate.js';
+
+export const Shadow: WebGlShaderType<ShadowProps> = {
+  props: ShadowTemplate.props,
+  update() {
+    this.uniformRGBA('u_color', this.props!.color);
+    this.uniform4fa('u_shadow', this.props!.projection);
+  },
+  vertex: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    attribute vec2 a_position;
+    attribute vec2 a_textureCoords;
+    attribute vec4 a_color;
+    attribute vec2 a_nodeCoords;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform float u_rtt;
+    uniform vec2 u_dimensions;
+
+    uniform vec4 u_shadow;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    void main() {
+      vec2 screenSpace = vec2(2.0 / u_resolution.x,  -2.0 / u_resolution.y);
+      vec2 outerEdge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
+
+      vec2 shadowEdge = outerEdge * ((u_shadow.w * 2.0)+ u_shadow.z) + u_shadow.xy;
+      vec2 normVertexPos = a_position * u_pixelRatio;
+
+      vec2 vertexPos = (a_position + outerEdge + shadowEdge) * u_pixelRatio;
+      gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
+
+      v_color = a_color;
+      v_nodeCoords = a_nodeCoords + (screenSpace + shadowEdge) / (u_dimensions);
+      v_textureCoords = a_textureCoords + (screenSpace + shadowEdge) / (u_dimensions);
+    }
+  `,
+  fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform float u_alpha;
+    uniform vec2 u_dimensions;
+    uniform sampler2D u_texture;
+
+    uniform vec4 u_color;
+    uniform vec4 u_shadow;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    float box(vec2 p, vec2 s) {
+      vec2 q = abs(p) - s;
+      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) + 2.0;
+    }
+
+    float shadowBox(vec2 p, vec2 s, float r) {
+      vec2 q = abs(p) - s + r;
+      float dist = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
+      return 1.0 - smoothstep(-u_shadow.w, u_shadow.w + u_shadow.z, dist);
+    }
+
+    void main() {
+      vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
+      vec2 halfDimensions = (u_dimensions * 0.5);
+
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
+      float boxDist = box(boxUv, halfDimensions);
+
+      float boxAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
+      float shadowDist = shadowBox(boxUv - u_shadow.xy, halfDimensions + u_shadow.w, u_shadow.z);
+
+      vec4 resColor = vec4(0.0);
+      resColor = mix(resColor, u_color, shadowDist);
+      resColor = mix(resColor, color, min(color.a, boxAlpha));
+      gl_FragColor = resColor * u_alpha;
+    }
+  `,
+};

package/src/core/text-rendering/CanvasFontHandler.ts

@@ -0,0 +1,176 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2025 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 {
+  FontFamilyMap,
+  FontLoadOptions,
+  FontMetrics,
+  NormalizedFontMetrics,
+} from './TextRenderer.js';
+import type { Stage } from '../Stage.js';
+import { calculateFontMetrics } from './Utils.js';
+
+/**
+ * Global font set regardless of if run in the main thread or a web worker
+ */
+// const globalFontSet: FontFaceSet = (resolvedGlobal.document?.fonts ||
+//   (resolvedGlobal as unknown as { fonts: FontFaceSet }).fonts) as FontFaceSet;
+
+// Global state variables for fontHandler
+const fontFamilies: Record<string, FontFace> = {};
+const loadedFonts = new Set<string>();
+const fontLoadPromises = new Map<string, Promise<void>>();
+const normalizedMetrics = new Map<string, NormalizedFontMetrics>();
+let initialized = false;
+let context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+
+/**
+ * Normalize font metrics to be in the range of 0 to 1
+ */
+function normalizeMetrics(metrics: FontMetrics): NormalizedFontMetrics {
+  return {
+    ascender: metrics.ascender / metrics.unitsPerEm,
+    descender: metrics.descender / metrics.unitsPerEm,
+    lineGap: metrics.lineGap / metrics.unitsPerEm,
+  };
+}
+
+/**
+ * make fontface add not show errors
+ */
+interface FontFaceSetWithAdd extends FontFaceSet {
+  add(font: FontFace): void;
+}
+
+/**
+ * Check if a font can be rendered
+ */
+export const canRenderFont = (): boolean => {
+  // Canvas can always render any font family (assuming the browser supports it)
+  return true;
+};
+
+/**
+ * Load a font by providing fontFamily, fontUrl, and optional metrics
+ */
+export const loadFont = async (
+  stage: Stage,
+  options: FontLoadOptions,
+): Promise<void> => {
+  const { fontFamily, fontUrl, metrics } = options;
+
+  // If already loaded, return immediately
+  if (loadedFonts.has(fontFamily) === true) {
+    return;
+  }
+
+  const existingPromise = fontLoadPromises.get(fontFamily);
+  // If already loading, return the existing promise
+  if (existingPromise !== undefined) {
+    return existingPromise;
+  }
+  // Create and store the loading promise
+  const loadPromise = new FontFace(fontFamily, `url(${fontUrl})`)
+    .load()
+    .then((loadedFont) => {
+      (document.fonts as FontFaceSetWithAdd).add(loadedFont);
+      loadedFonts.add(fontFamily);
+      fontLoadPromises.delete(fontFamily);
+      // Store normalized metrics if provided
+      if (metrics) {
+        setFontMetrics(fontFamily, normalizeMetrics(metrics));
+      }
+    })
+    .catch((error) => {
+      fontLoadPromises.delete(fontFamily);
+      console.error(`Failed to load font: ${fontFamily}`, error);
+      throw error;
+    });
+
+  fontLoadPromises.set(fontFamily, loadPromise);
+  return loadPromise;
+};
+
+/**
+ * Get the font families map for resolving fonts
+ */
+export const getFontFamilies = (): FontFamilyMap => {
+  return fontFamilies;
+};
+
+/**
+ * Initialize the global font handler
+ */
+export const init = (
+  c?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+): void => {
+  if (initialized === true) {
+    return;
+  }
+
+  if (c === undefined) {
+    throw new Error(
+      'Canvas context is not provided for font handler initialization',
+    );
+  }
+
+  context = c;
+
+  // Register the default 'sans-serif' font face
+  const defaultMetrics: NormalizedFontMetrics = {
+    ascender: 0.8,
+    descender: -0.2,
+    lineGap: 0.2,
+  };
+
+  setFontMetrics('sans-serif', defaultMetrics);
+  loadedFonts.add('sans-serif');
+  initialized = true;
+};
+
+export const type = 'canvas';
+
+/**
+ * Check if a font is already loaded by font family
+ */
+export const isFontLoaded = (fontFamily: string): boolean => {
+  return loadedFonts.has(fontFamily) || fontFamily === 'sans-serif';
+};
+
+export const getFontMetrics = (
+  fontFamily: string,
+  fontSize: number,
+): NormalizedFontMetrics => {
+  let out =
+    normalizedMetrics.get(fontFamily) ||
+    normalizedMetrics.get(fontFamily + fontSize);
+  if (out !== undefined) {
+    return out;
+  }
+  out = calculateFontMetrics(context, fontFamily, fontSize);
+  normalizedMetrics.set(fontFamily + fontSize, out);
+  return out;
+};
+
+export const setFontMetrics = (
+  fontFamily: string,
+  metrics: NormalizedFontMetrics,
+): void => {
+  normalizedMetrics.set(fontFamily, metrics);
+};