@lightningjs/renderer 3.0.2 → 3.0.4

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

@@ -18,7 +18,6 @@
  */
 
 import { CoreRenderer, type BufferInfo } from '../CoreRenderer.js';
-import type { SdfRenderOp } from './SdfRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
   createIndexBuffer,
@@ -47,15 +46,15 @@ import type { WebGlShaderType } from './WebGlShaderNode.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
-import type { Platform } from '../../platforms/Platform.js';
 import type { Stage } from '../../Stage.js';
+import type { CoreTextNode } from '../../CoreTextNode.js';
 
 interface CoreWebGlSystem {
   parameters: CoreWebGlParameters;
   extensions: CoreWebGlExtensions;
 }
 
-export type WebGlRenderOp = CoreNode | SdfRenderOp;
+export type WebGlRenderOp = CoreNode | CoreTextNode;
 
 export class WebGlRenderer extends CoreRenderer {
   //// WebGL Native Context and Data
@@ -474,28 +473,27 @@ export class WebGlRenderer extends CoreRenderer {
   private insertRTTNodeInOrder(node: CoreNode) {
     let insertIndex = this.rttNodes.length; // Default to the end of the array
 
+    // Build a one-shot index map so all lookups below are O(1) instead of O(n).
+    const rttNodes = this.rttNodes;
+    const indexMap = new Map<number, number>();
+    for (let i = 0; i < rttNodes.length; i++) {
+      indexMap.set(rttNodes[i]!.id, i);
+    }
+
     // 1. Traverse upwards to ensure the node is placed before its RTT parent (if any).
     let currentNode: CoreNode = node;
-    while (currentNode) {
-      if (!currentNode.parent) {
-        break;
-      }
-
-      const parentIndex = this.rttNodes.indexOf(currentNode.parent);
-      if (parentIndex !== -1) {
-        // Found an RTT parent in the list; set insertIndex to place node before the parent
+    while (currentNode.parent !== null) {
+      const parentIndex = indexMap.get(currentNode.parent.id);
+      if (parentIndex !== undefined) {
         insertIndex = parentIndex;
         break;
       }
-
       currentNode = currentNode.parent;
     }
 
     // 2. Traverse downwards to ensure the node is placed after any RTT children.
-    // Look through each child recursively to see if any are already in rttNodes.
-    const maxChildIndex = this.findMaxChildRTTIndex(node);
+    const maxChildIndex = this.findMaxChildRTTIndex(node, indexMap);
     if (maxChildIndex !== -1) {
-      // Adjust insertIndex to be after the last child RTT node
       insertIndex = Math.max(insertIndex, maxChildIndex + 1);
     }
 
@@ -503,25 +501,25 @@ export class WebGlRenderer extends CoreRenderer {
     this.rttNodes.splice(insertIndex, 0, node);
   }
 
-  // Helper function to find the highest index of any RTT children of a node within rttNodes
-  private findMaxChildRTTIndex(node: CoreNode): number {
+  // Iterative DFS to find the highest rttNodes index among all RTT descendants of node.
+  private findMaxChildRTTIndex(
+    node: CoreNode,
+    indexMap: Map<number, number>,
+  ): number {
     let maxIndex = -1;
-
-    const traverseChildren = (currentNode: CoreNode) => {
-      const currentIndex = this.rttNodes.indexOf(currentNode);
-      if (currentIndex !== -1) {
-        maxIndex = Math.max(maxIndex, currentIndex);
+    // Explicit stack avoids recursive arrow function allocation and call-stack growth.
+    const stack: CoreNode[] = [node];
+    while (stack.length !== 0) {
+      const current = stack.pop()!;
+      const idx = indexMap.get(current.id);
+      if (idx !== undefined && idx > maxIndex) {
+        maxIndex = idx;
       }
-
-      // Recursively check all children of the current node
-      for (const child of currentNode.children) {
-        traverseChildren(child);
+      const children = current.children;
+      for (let i = 0; i < children.length; i++) {
+        stack.push(children[i]!);
       }
-    };
-
-    // Start traversal directly with the provided node
-    traverseChildren(node);
-
+    }
     return maxIndex;
   }
 
@@ -724,4 +722,15 @@ export class WebGlRenderer extends CoreRenderer {
       normalized: normalizedColor,
     };
   }
+
+  override destroy(): void {
+    const loseCtx = this.glw.getExtension(
+      'WEBGL_lose_context',
+    ) as WEBGL_lose_context | null;
+    loseCtx?.loseContext();
+  }
+
+  override deleteBuffer(buffer: WebGLBuffer): void {
+    this.glw.deleteBuffer(buffer);
+  }
 }

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,11 +248,11 @@ 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;
     }

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,15 +19,21 @@
 
 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 { hasZeroWidthSpace } from './Utils.js';
+import { getLayoutCacheKey, hasZeroWidthSpace } from './Utils.js';
 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,16 +49,7 @@ let measureContext:
   | null = null;
 
 // Cache for text layout calculations
-const layoutCache = new Map<
-  string,
-  {
-    lines: string[];
-    lineWidths: number[];
-    maxLineWidth: number;
-    remainingText: string;
-    moreTextLines: boolean;
-  }
->();
+const renderInfoCache = new Map<string, CanvasRenderInfo>();
 
 // Initialize the Text Renderer
 const init = (stage: Stage): void => {
@@ -96,6 +93,12 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   assertTruthy(canvas, 'Canvas is not initialized');
   assertTruthy(context, 'Canvas context is not available');
   assertTruthy(measureContext, 'Canvas measureContext is not available');
+  const cacheKey = getLayoutCacheKey(props);
+
+  let layout = renderInfoCache.get(cacheKey);
+  if (layout !== undefined) {
+    return layout;
+  }
   // Extract already normalized properties
   const {
     text,
@@ -189,46 +192,23 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   if (canvas.width > 0 && canvas.height > 0) {
     imageData = context.getImageData(0, 0, canvasW, canvasH);
   }
-  return {
+  const renderInfo = {
+    type,
     imageData,
     width: effectiveWidth,
     height: effectiveHeight,
     remainingLines,
     hasRemainingText,
-  };
+  } as CanvasRenderInfo;
+  renderInfoCache.set(cacheKey, renderInfo);
+  return renderInfo;
 };
 
-/**
- * Generate a cache key for text layout calculations
- */
-function generateLayoutCacheKey(
-  text: string,
-  fontFamily: string,
-  fontSize: number,
-  fontStyle: string,
-  wordWrap: boolean,
-  wordWrapWidth: number,
-  letterSpacing: number,
-  maxLines: number,
-  overflowSuffix: string,
-): string {
-  return `${text}-${fontFamily}-${fontSize}-${fontStyle}-${wordWrap}-${wordWrapWidth}-${letterSpacing}-${maxLines}-${overflowSuffix}`;
-}
-
 /**
  * Clear layout cache for memory management
  */
-const clearLayoutCache = (): void => {
-  layoutCache.clear();
-};
-
-/**
- * Add quads for rendering (Canvas doesn't use quads)
- */
-const addQuads = (): Float32Array | null => {
-  // Canvas renderer doesn't use quad-based rendering
-  // Return null for interface compatibility
-  return null;
+const clearCache = (): void => {
+  renderInfoCache.clear();
 };
 
 /**
@@ -244,12 +224,11 @@ const renderQuads = (): void => {
  */
 const CanvasTextRenderer = {
   type,
-  font: CanvasFontHandler,
+  font,
   renderText,
-  addQuads,
   renderQuads,
   init,
-  clearLayoutCache,
+  clearCache,
 };
 
 export default CanvasTextRenderer;