@lightningjs/renderer 3.0.3 → 3.0.5

package/src/core/renderers/webgl/WebGlShaderProgram.test.ts

@@ -0,0 +1,274 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2026 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 { describe, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
+import { CoreTextNode, type CoreTextNodeProps } from '../../CoreTextNode.js';
+import type { Stage } from '../../Stage.js';
+import type { TextRenderer } from '../../text-rendering/TextRenderer.js';
+import { createBound } from '../../lib/utils.js';
+import type { CoreRenderer } from '../CoreRenderer.js';
+import { WebGlRenderer } from './WebGlRenderer.js';
+import { WebGlShaderProgram } from './WebGlShaderProgram.js';
+
+const makeStage = (): Stage =>
+  mock<Stage>({
+    strictBound: createBound(0, 0, 1920, 1080),
+    preloadBound: createBound(0, 0, 1920, 1080),
+    defaultTexture: {
+      state: 'loaded',
+    },
+    pixelRatio: 2,
+    renderer: mock<CoreRenderer>() as CoreRenderer,
+  });
+
+const makeTextProps = (): CoreTextNodeProps => ({
+  alpha: 1,
+  autosize: false,
+  boundsMargin: null,
+  clipping: false,
+  color: 0xffffffff,
+  colorBl: 0xffffffff,
+  colorBottom: 0xffffffff,
+  colorBr: 0xffffffff,
+  colorLeft: 0xffffffff,
+  colorRight: 0xffffffff,
+  colorTl: 0xffffffff,
+  colorTop: 0xffffffff,
+  colorTr: 0xffffffff,
+  h: 20,
+  mount: 0,
+  mountX: 0,
+  mountY: 0,
+  parent: null,
+  pivot: 0,
+  pivotX: 0,
+  pivotY: 0,
+  rotation: 0,
+  rtt: false,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  shader: null,
+  src: '',
+  texture: null,
+  textureOptions: {},
+  w: 100,
+  x: 0,
+  y: 0,
+  zIndex: 0,
+  text: 'Test',
+  textAlign: 'left',
+  contain: 'none',
+  fontFamily: 'Arial',
+  fontStyle: 'normal',
+  fontSize: 16,
+  letterSpacing: 0,
+  lineHeight: 1,
+  maxHeight: 0,
+  maxLines: 0,
+  maxWidth: 0,
+  offsetY: 0,
+  overflowSuffix: '...',
+  verticalAlign: 'top',
+  wordBreak: 'break-word',
+  textRendererOverride: null,
+  forceLoad: false,
+});
+
+const makeSdfTextRenderer = (): TextRenderer =>
+  ({
+    clearCache: vi.fn(),
+    type: 'sdf',
+    font: {
+      isFontLoaded: vi.fn().mockReturnValue(true),
+      loadFont: vi.fn(),
+      waitingForFont: vi.fn(),
+      stopWaitingForFont: vi.fn(),
+    },
+    init: vi.fn(),
+    renderText: vi.fn().mockReturnValue({
+      width: 100,
+      height: 20,
+      layout: { glyphs: [], width: 100, height: 20 },
+    }),
+    addQuads: vi.fn().mockReturnValue(new Float32Array(0)),
+    renderQuads: vi.fn(),
+  } as unknown as TextRenderer);
+
+const makeSdfTextNode = () => {
+  const node = new CoreTextNode(
+    makeStage(),
+    makeTextProps(),
+    makeSdfTextRenderer(),
+  );
+  node.parentHasRenderTexture = true;
+  node.framebufferDimensions = { w: 320, h: 180 };
+  node.rttParent = { framebufferDimensions: { w: 640, h: 360 } } as any;
+  return node;
+};
+
+describe('WebGlShaderProgram.bindRenderOp', () => {
+  function createProgram() {
+    const program = Object.create(
+      WebGlShaderProgram.prototype,
+    ) as WebGlShaderProgram;
+    const bindTextures = vi.fn();
+    const bindBufferCollection = vi.fn();
+    const uniform1f = vi.fn();
+    const uniform2f = vi.fn();
+    const glw = {
+      canvas: { width: 1920, height: 1080 },
+      uniform1f,
+      uniform2f,
+    };
+
+    (program as any).bindTextures = bindTextures;
+    (program as any).bindBufferCollection = bindBufferCollection;
+    (program as any).glw = glw;
+    (program as any).useTimeValue = false;
+    (program as any).useSystemAlpha = false;
+    (program as any).useSystemDimensions = false;
+
+    return {
+      program,
+      bindTextures,
+      bindBufferCollection,
+      uniform1f,
+      uniform2f,
+    };
+  }
+
+  it('binds SDF shader props while using the main framebuffer resolution', () => {
+    const {
+      program,
+      bindTextures,
+      bindBufferCollection,
+      uniform1f,
+      uniform2f,
+    } = createProgram();
+    const onSdfBind = vi.fn();
+    const renderOp = {
+      isCoreNode: false,
+      isSdfRenderOp: true,
+      shader: { shaderType: { onSdfBind } },
+      sdfShaderProps: { size: 16, distanceRange: 4 },
+      renderOpTextures: [],
+      quadBufferCollection: {},
+      parentHasRenderTexture: false,
+      framebufferDimensions: null,
+      rtt: false,
+      stage: { pixelRatio: 1.5 },
+      time: 0,
+      worldAlpha: 1,
+      w: 100,
+      h: 20,
+    };
+
+    program.bindRenderOp(renderOp as any);
+
+    expect(bindTextures).toHaveBeenCalledWith(renderOp.renderOpTextures);
+    expect(bindBufferCollection).toHaveBeenCalledWith(
+      renderOp.quadBufferCollection,
+    );
+    expect(uniform1f).toHaveBeenCalledWith('u_pixelRatio', 1.5);
+    expect(uniform2f).toHaveBeenCalledWith('u_resolution', 1920, 1080);
+    expect(onSdfBind).toHaveBeenCalledWith(renderOp.sdfShaderProps);
+  });
+
+  it('keeps SDF binding active when rendering into a parent framebuffer', () => {
+    const { program, uniform1f, uniform2f } = createProgram();
+    const onSdfBind = vi.fn();
+    const renderOp = {
+      isCoreNode: false,
+      isSdfRenderOp: true,
+      shader: { shaderType: { onSdfBind } },
+      sdfShaderProps: { size: 18, distanceRange: 6 },
+      renderOpTextures: [],
+      quadBufferCollection: {},
+      parentHasRenderTexture: true,
+      framebufferDimensions: { w: 320, h: 180 },
+      rtt: false,
+      stage: { pixelRatio: 2 },
+      time: 0,
+      worldAlpha: 1,
+      w: 100,
+      h: 20,
+    };
+
+    program.bindRenderOp(renderOp as any);
+
+    expect(uniform1f).toHaveBeenCalledWith('u_pixelRatio', 1);
+    expect(uniform2f).toHaveBeenCalledWith('u_resolution', 320, 180);
+    expect(onSdfBind).toHaveBeenCalledWith(renderOp.sdfShaderProps);
+  });
+
+  it('uses parent RTT dimensions for SDF text render ops', () => {
+    const { program, uniform1f, uniform2f } = createProgram();
+    const onSdfBind = vi.fn();
+    const sdfShaderProps = {
+      color: 0xffffffff,
+      distanceRange: 1,
+      size: 16,
+      transform: new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]),
+    };
+    const renderOp = {
+      framebufferDimensions: { w: 320, h: 180 },
+      isCoreNode: true,
+      isSdfRenderOp: true,
+      parentFramebufferDimensions: { w: 640, h: 360 },
+      parentHasRenderTexture: true,
+      quadBufferCollection: {},
+      renderOpTextures: [],
+      rtt: false,
+      sdfShaderProps,
+      shader: {
+        shaderType: {
+          onSdfBind,
+        },
+      },
+      stage: { pixelRatio: 2 },
+      time: 0,
+      worldAlpha: 1,
+      w: 100,
+      h: 20,
+    } as any;
+
+    program.bindRenderOp(renderOp);
+
+    expect(uniform1f).toHaveBeenCalledWith('u_pixelRatio', 1.0);
+    expect(uniform2f).toHaveBeenCalledWith('u_resolution', 640, 360);
+    expect(onSdfBind).toHaveBeenCalledWith(sdfShaderProps);
+  });
+});
+
+describe('WebGlRenderer.canReuseRenderOp', () => {
+  it('reuses SDF text render ops with matching parent RTT dimensions', () => {
+    const renderer = Object.create(WebGlRenderer.prototype) as WebGlRenderer;
+    const node = makeSdfTextNode();
+
+    node.props.shader = {
+      shaderKey: 'default',
+    } as any;
+
+    renderer.curRenderOp = node;
+
+    expect(renderer.reuseRenderOp(node)).toBe(true);
+  });
+});

package/src/core/renderers/webgl/WebGlShaderProgram.ts

@@ -33,6 +33,8 @@ import {
   type UniformSet4Params,
 } from './internal/ShaderUtils.js';
 import { CoreNode } from '../../CoreNode.js';
+import type { CoreTextNode } from '../../CoreTextNode.js';
+import type { SdfShaderProps } from '../../shaders/webgl/SdfShader.js';
 
 export class WebGlShaderProgram implements CoreShaderProgram {
   protected program: WebGLProgram | null;
@@ -200,13 +202,11 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   bindRenderOp(renderOp: WebGlRenderOp) {
-    const isCoreNode = renderOp.isCoreNode;
-
     this.bindTextures(renderOp.renderOpTextures);
     this.bindBufferCollection(renderOp.quadBufferCollection);
 
     const parentHasRenderTexture = renderOp.parentHasRenderTexture;
-    const framebufferDimensions = isCoreNode
+    const framebufferDimensions = renderOp.isCoreNode
       ? renderOp.parentFramebufferDimensions
       : renderOp.framebufferDimensions;
 
@@ -248,22 +248,22 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     }
 
     /**temporary fix to make sdf texts work */
-    if (isCoreNode === false && renderOp.sdfShaderProps !== undefined) {
-      const opShader = renderOp.shader; // SdfRenderOp has .shader
-      (opShader.shaderType as WebGlShaderType).onSdfBind?.call(
+    if (renderOp.isSdfRenderOp === true) {
+      const opShader = renderOp.shader!; // SdfRenderOp has .shader
+      (opShader.shaderType as WebGlShaderType<SdfShaderProps>).onSdfBind?.call(
         this.glw,
-        renderOp.sdfShaderProps,
+        (renderOp as CoreTextNode).sdfShaderProps,
       );
       return;
     }
 
     const shader = renderOp.shader as WebGlShaderNode;
-    if (shader.props !== undefined) {
+    const uniforms = shader.uniforms;
+
+    if (uniforms.hasStoredUniforms === true) {
       /**
        * loop over all precalculated uniform types
        */
-      const uniforms = shader.uniforms;
-
       for (const key in uniforms.single) {
         const { method, value } = uniforms.single[key]!;
         this.glw[method as keyof UniformSet1Param](key, value as never);

package/src/core/renderers/webgl/internal/ShaderUtils.ts

@@ -42,6 +42,7 @@ export type Vec4 = [number, number, number, number];
 export type UniformValue = SingleValue | Vec2 | Vec3 | Vec4;
 
 export interface UniformCollection {
+  hasStoredUniforms: boolean;
   single: Record<string, Uniform<SingleValue>>;
   vec2: Record<string, Uniform<Vec2>>;
   vec3: Record<string, Uniform<Vec3>>;

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

@@ -136,7 +136,7 @@ export const getFontFamilies = (): FontFamilyMap => {
  */
 export const init = (
   c: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
-  mc: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  mc?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
 ): void => {
   if (initialized === true) {
     return;
@@ -149,7 +149,7 @@ export const init = (
   }
 
   context = c;
-  measureContext = mc;
+  measureContext = mc || c;
 
   // Register the default 'sans-serif' font face
   const defaultMetrics: FontMetrics = {

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

@@ -19,7 +19,12 @@
 
 import { assertTruthy } from '../../utils.js';
 import type { Stage } from '../Stage.js';
-import type { TextLineStruct, TextRenderInfo } from './TextRenderer.js';
+import type {
+  CanvasRenderInfo,
+  FontHandler,
+  TextLineStruct,
+  TextRenderInfo,
+} from './TextRenderer.js';
 import * as CanvasFontHandler from './CanvasFontHandler.js';
 import type { CoreTextNodeProps } from '../CoreTextNode.js';
 import { getLayoutCacheKey, hasZeroWidthSpace } from './Utils.js';
@@ -28,6 +33,7 @@ import { mapTextLayout } from './TextLayoutEngine.js';
 const MAX_TEXTURE_DIMENSION = 4096;
 
 const type = 'canvas' as const;
+const font: FontHandler = CanvasFontHandler;
 
 let canvas: HTMLCanvasElement | OffscreenCanvas | null = null;
 let context:
@@ -43,7 +49,7 @@ let measureContext:
   | null = null;
 
 // Cache for text layout calculations
-const layoutCache = new Map<string, TextRenderInfo>();
+const renderInfoCache = new Map<string, CanvasRenderInfo>();
 
 // Initialize the Text Renderer
 const init = (stage: Stage): void => {
@@ -89,7 +95,7 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   assertTruthy(measureContext, 'Canvas measureContext is not available');
   const cacheKey = getLayoutCacheKey(props);
 
-  let layout = layoutCache.get(cacheKey);
+  let layout = renderInfoCache.get(cacheKey);
   if (layout !== undefined) {
     return layout;
   }
@@ -187,13 +193,14 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     imageData = context.getImageData(0, 0, canvasW, canvasH);
   }
   const renderInfo = {
+    type,
     imageData,
     width: effectiveWidth,
     height: effectiveHeight,
     remainingLines,
     hasRemainingText,
-  };
-  layoutCache.set(cacheKey, renderInfo);
+  } as CanvasRenderInfo;
+  renderInfoCache.set(cacheKey, renderInfo);
   return renderInfo;
 };
 
@@ -201,7 +208,7 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
  * Clear layout cache for memory management
  */
 const clearCache = (): void => {
-  layoutCache.clear();
+  renderInfoCache.clear();
 };
 
 /**
@@ -217,7 +224,7 @@ const renderQuads = (): void => {
  */
 const CanvasTextRenderer = {
   type,
-  font: CanvasFontHandler,
+  font,
   renderText,
   renderQuads,
   init,

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

@@ -20,23 +20,19 @@
 import type { Stage } from '../Stage.js';
 import type {
   FontHandler,
+  SdfRenderInfo,
   TextLineStruct,
   TextRenderInfo,
-  TextRenderProps,
 } from './TextRenderer.js';
-import type { CoreTextNodeProps } from '../CoreTextNode.js';
+import type { CoreTextNode, CoreTextNodeProps } from '../CoreTextNode.js';
 import { getLayoutCacheKey, hasZeroWidthSpace } from './Utils.js';
 import * as SdfFontHandler from './SdfFontHandler.js';
-import type { CoreRenderer } from '../renderers/CoreRenderer.js';
 import { WebGlRenderer } from '../renderers/webgl/WebGlRenderer.js';
-import { SdfRenderOp } from '../renderers/webgl/SdfRenderOp.js';
-import { Sdf, type SdfShaderProps } from '../shaders/webgl/SdfShader.js';
-import { BufferCollection } from '../renderers/webgl/internal/BufferCollection.js';
-import type { WebGlCtxTexture } from '../renderers/webgl/WebGlCtxTexture.js';
+import { Sdf } from '../shaders/webgl/SdfShader.js';
 import type { WebGlShaderNode } from '../renderers/webgl/WebGlShaderNode.js';
-import { mergeColorAlpha } from '../../utils.js';
 import type { TextLayout } from './TextRenderer.js';
 import { mapTextLayout } from './TextLayoutEngine.js';
+import type { WebGlCtxTexture } from '../renderers/webgl/WebGlCtxTexture.js';
 
 // Each glyph requires 6 vertices (2 triangles) with 4 floats each (x, y, u, v)
 const FLOATS_PER_VERTEX = 4;
@@ -46,6 +42,7 @@ const VERTICES_PER_GLYPH = 6;
 const type = 'sdf' as const;
 
 let sdfShader: WebGlShaderNode | null = null;
+let renderer: WebGlRenderer | null = null;
 
 // Initialize the SDF text renderer
 const init = (stage: Stage): void => {
@@ -54,10 +51,11 @@ const init = (stage: Stage): void => {
   // Register SDF shader with the shader manager
   stage.shManager.registerShaderType('Sdf', Sdf);
   sdfShader = stage.shManager.createShader('Sdf') as WebGlShaderNode;
+  renderer = stage.renderer as WebGlRenderer;
 };
 
 const font: FontHandler = SdfFontHandler;
-const layoutCache = new Map<string, TextLayout>();
+const renderInfoCache = new Map<string, SdfRenderInfo>();
 
 /**
  * SDF text renderer using MSDF/SDF fonts with WebGL
@@ -67,151 +65,41 @@ const layoutCache = new Map<string, TextLayout>();
  * @returns Object containing ImageData and dimensions
  */
 const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
-  // Early return if no text
-  if (props.text.length === 0) {
-    return {
-      width: 0,
-      height: 0,
-    };
-  }
-
   const cacheKey = getLayoutCacheKey(props);
 
-  let layout = layoutCache.get(cacheKey);
-  if (layout !== undefined) {
-    return {
-      width: layout.width,
-      height: layout.height,
-      remainingLines: layout.remainingLines,
-      hasRemainingText: layout.hasRemainingText,
-      layout, // Cache layout for addQuads
-    };
-  }
-
-  // Get font cache for this font family
-  const fontData = SdfFontHandler.getFontData(props.fontFamily);
-  if (fontData === undefined) {
-    // Font not loaded, return empty result
-    return {
-      width: 0,
-      height: 0,
-    };
+  let renderInfo = renderInfoCache.get(cacheKey);
+  if (renderInfo !== undefined) {
+    return renderInfo;
   }
 
   // Calculate text layout and generate glyph data for caching
-  layout = generateTextLayout(props, fontData);
-  layoutCache.set(cacheKey, layout);
-
-  // For SDF renderer, ImageData is null since we render via WebGL
-  return {
+  const layout = generateTextLayout(
+    props,
+    SdfFontHandler.getFontData(props.fontFamily)!,
+  );
+  renderInfo = {
+    type,
+    layout,
     width: layout.width,
     height: layout.height,
     remainingLines: layout.remainingLines,
     hasRemainingText: layout.hasRemainingText,
-    layout, // Cache layout for addQuads
-  };
+    atlasTexture: SdfFontHandler.getAtlas(props.fontFamily)!
+      .ctxTexture as WebGlCtxTexture,
+  } as SdfRenderInfo;
+  renderInfoCache.set(cacheKey, renderInfo);
+
+  // For SDF renderer, ImageData is null since we render via WebGL
+  return renderInfo;
 };
 
 /**
  * Create and submit WebGL render operations for SDF text
  * This is called from CoreTextNode during rendering to add SDF text to the render pipeline
  */
-const renderQuads = (
-  renderer: CoreRenderer,
-  layout: TextLayout,
-  renderProps: TextRenderProps,
-): void => {
-  const fontFamily = renderProps.fontFamily;
-  const color = renderProps.color;
-  const worldAlpha = renderProps.worldAlpha;
-  const globalTransform = renderProps.globalTransform;
-  const vertexBuffer = layout.vertexBuffer;
-
-  const atlasTexture = SdfFontHandler.getAtlas(fontFamily);
-  if (atlasTexture === null) {
-    console.warn(`SDF atlas texture not found for font: ${fontFamily}`);
-    return;
-  }
-
-  // We can safely assume this is a WebGL renderer else this wouldn't be called
-  const glw = (renderer as WebGlRenderer).glw;
-  const stride = 4 * Float32Array.BYTES_PER_ELEMENT;
-
-  /**
-   * Wraps a WebGLBuffer in a BufferCollection with the standard SDF vertex
-   * layout, creates and submits an SdfRenderOp.  Called by both the cache-miss
-   * and cache-hit paths so attribute/op setup only exists in one place.
-   */
-  const buildAndSubmitRenderOp = (gpuBuffer: WebGLBuffer): void => {
-    const webGlBuffers = new BufferCollection([
-      {
-        buffer: gpuBuffer,
-        attributes: {
-          a_position: {
-            name: 'a_position',
-            size: 2,
-            type: glw.FLOAT as number,
-            normalized: false,
-            stride,
-            offset: 0,
-          },
-          a_textureCoords: {
-            name: 'a_textureCoords',
-            size: 2,
-            type: glw.FLOAT as number,
-            normalized: false,
-            stride,
-            offset: 2 * Float32Array.BYTES_PER_ELEMENT,
-          },
-        },
-      },
-    ]);
-
-    const renderOp = new SdfRenderOp(
-      renderer as WebGlRenderer,
-      sdfShader!,
-      {
-        transform: globalTransform,
-        color: mergeColorAlpha(color, worldAlpha),
-        size: layout.fontScale,
-        distanceRange: layout.distanceRange,
-      } satisfies SdfShaderProps,
-      webGlBuffers,
-      worldAlpha,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      renderProps.clippingRect as any,
-      layout.width,
-      layout.height,
-      false,
-      renderProps.parentHasRenderTexture,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      renderProps.framebufferDimensions as any,
-    );
-
-    renderOp.addTexture(atlasTexture.ctxTexture as WebGlCtxTexture);
-    renderOp.numQuads = layout.glyphCount;
-    (renderer as WebGlRenderer).addRenderOp(renderOp);
-  };
-
-  // Reuse the cached WebGLBuffer if one was provided — avoids a createBuffer
-  // call every frame on nodes whose text has not changed.
-  const glBufferRefBox = renderProps.glBufferRef;
-
-  if (glBufferRefBox.current === null) {
-    // Cache miss: allocate a new buffer, upload vertex data, then cache it.
-    const newBuffer = glw.createBuffer() as WebGLBuffer | null;
-    if (newBuffer === null) {
-      console.warn('Failed to create WebGL buffer for SDF text');
-      return;
-    }
-    // Upload vertex data directly into the new buffer.
-    glw.arrayBufferData(newBuffer, vertexBuffer, glw.STATIC_DRAW as number);
-    // Write back into the ref box so the owning node can reuse it next frame.
-    glBufferRefBox.current = newBuffer;
-  }
-
-  // Cache hit (or freshly allocated): build the render op and submit.
-  buildAndSubmitRenderOp(glBufferRefBox.current);
+const renderQuads = (textNode: CoreTextNode): void => {
+  textNode.props.shader = sdfShader;
+  renderer!.addRenderOp(textNode);
 };
 
 /**
@@ -388,7 +276,7 @@ const generateTextLayout = (
 };
 
 const clearCache = (): void => {
-  layoutCache.clear();
+  renderInfoCache.clear();
 };
 
 /**