@lightningjs/renderer 3.0.2 → 3.0.3

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

@@ -474,28 +474,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 +502,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 +723,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/text-rendering/CanvasTextRenderer.ts

@@ -22,7 +22,7 @@ import type { Stage } from '../Stage.js';
 import type { 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;
@@ -43,16 +43,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 layoutCache = new Map<string, TextRenderInfo>();
 
 // Initialize the Text Renderer
 const init = (stage: Stage): void => {
@@ -96,6 +87,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 = layoutCache.get(cacheKey);
+  if (layout !== undefined) {
+    return layout;
+  }
   // Extract already normalized properties
   const {
     text,
@@ -189,48 +186,24 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   if (canvas.width > 0 && canvas.height > 0) {
     imageData = context.getImageData(0, 0, canvasW, canvasH);
   }
-  return {
+  const renderInfo = {
     imageData,
     width: effectiveWidth,
     height: effectiveHeight,
     remainingLines,
     hasRemainingText,
   };
+  layoutCache.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 => {
+const clearCache = (): 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;
-};
-
 /**
  * Render quads for Canvas renderer (Canvas doesn't use quad-based rendering)
  */
@@ -246,10 +219,9 @@ const CanvasTextRenderer = {
   type,
   font: CanvasFontHandler,
   renderText,
-  addQuads,
   renderQuads,
   init,
-  clearLayoutCache,
+  clearCache,
 };
 
 export default CanvasTextRenderer;

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

@@ -25,7 +25,7 @@ import type {
   TextRenderProps,
 } from './TextRenderer.js';
 import type { CoreTextNodeProps } from '../CoreTextNode.js';
-import { hasZeroWidthSpace } from './Utils.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';
@@ -35,7 +35,7 @@ import { BufferCollection } from '../renderers/webgl/internal/BufferCollection.j
 import type { WebGlCtxTexture } from '../renderers/webgl/WebGlCtxTexture.js';
 import type { WebGlShaderNode } from '../renderers/webgl/WebGlShaderNode.js';
 import { mergeColorAlpha } from '../../utils.js';
-import type { TextLayout, GlyphLayout } from './TextRenderer.js';
+import type { TextLayout } from './TextRenderer.js';
 import { mapTextLayout } from './TextLayoutEngine.js';
 
 // Each glyph requires 6 vertices (2 triangles) with 4 floats each (x, y, u, v)
@@ -57,6 +57,7 @@ const init = (stage: Stage): void => {
 };
 
 const font: FontHandler = SdfFontHandler;
+const layoutCache = new Map<string, TextLayout>();
 
 /**
  * SDF text renderer using MSDF/SDF fonts with WebGL
@@ -74,6 +75,19 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
     };
   }
 
+  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) {
@@ -85,99 +99,19 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   }
 
   // Calculate text layout and generate glyph data for caching
-  const layout = generateTextLayout(props, fontData);
+  layout = generateTextLayout(props, fontData);
+  layoutCache.set(cacheKey, layout);
 
   // For SDF renderer, ImageData is null since we render via WebGL
   return {
-    remainingLines: 0,
-    hasRemainingText: false,
     width: layout.width,
     height: layout.height,
+    remainingLines: layout.remainingLines,
+    hasRemainingText: layout.hasRemainingText,
     layout, // Cache layout for addQuads
   };
 };
 
-/**
- * Add quads for rendering using cached layout data
- */
-const addQuads = (layout?: TextLayout): Float32Array | null => {
-  if (layout === undefined) {
-    return null; // No layout data available
-  }
-
-  const glyphs = layout.glyphs;
-  const glyphsLength = glyphs.length;
-
-  if (glyphsLength === 0) {
-    return null;
-  }
-
-  const vertexBuffer = new Float32Array(
-    glyphsLength * VERTICES_PER_GLYPH * FLOATS_PER_VERTEX,
-  );
-
-  let bufferIndex = 0;
-  let glyphIndex = 0;
-
-  while (glyphIndex < glyphsLength) {
-    const glyph = glyphs[glyphIndex];
-    glyphIndex++;
-    if (glyph === undefined) {
-      continue;
-    }
-
-    const x1 = glyph.x;
-    const y1 = glyph.y;
-    const x2 = x1 + glyph.width;
-    const y2 = y1 + glyph.height;
-
-    const u1 = glyph.atlasX;
-    const v1 = glyph.atlasY;
-    const u2 = u1 + glyph.atlasWidth;
-    const v2 = v1 + glyph.atlasHeight;
-
-    // Triangle 1: Top-left, top-right, bottom-left
-    // Vertex 1: Top-left
-    vertexBuffer[bufferIndex++] = x1;
-    vertexBuffer[bufferIndex++] = y1;
-    vertexBuffer[bufferIndex++] = u1;
-    vertexBuffer[bufferIndex++] = v1;
-
-    // Vertex 2: Top-right
-    vertexBuffer[bufferIndex++] = x2;
-    vertexBuffer[bufferIndex++] = y1;
-    vertexBuffer[bufferIndex++] = u2;
-    vertexBuffer[bufferIndex++] = v1;
-
-    // Vertex 3: Bottom-left
-    vertexBuffer[bufferIndex++] = x1;
-    vertexBuffer[bufferIndex++] = y2;
-    vertexBuffer[bufferIndex++] = u1;
-    vertexBuffer[bufferIndex++] = v2;
-
-    // Triangle 2: Top-right, bottom-right, bottom-left
-    // Vertex 4: Top-right (duplicate)
-    vertexBuffer[bufferIndex++] = x2;
-    vertexBuffer[bufferIndex++] = y1;
-    vertexBuffer[bufferIndex++] = u2;
-    vertexBuffer[bufferIndex++] = v1;
-
-    // Vertex 5: Bottom-right
-    vertexBuffer[bufferIndex++] = x2;
-    vertexBuffer[bufferIndex++] = y2;
-    vertexBuffer[bufferIndex++] = u2;
-    vertexBuffer[bufferIndex++] = v2;
-
-    // Vertex 6: Bottom-left (duplicate)
-    vertexBuffer[bufferIndex++] = x1;
-    vertexBuffer[bufferIndex++] = y2;
-    vertexBuffer[bufferIndex++] = u1;
-    vertexBuffer[bufferIndex++] = v2;
-  }
-
-  return vertexBuffer;
-};
-
 /**
  * Create and submit WebGL render operations for SDF text
  * This is called from CoreTextNode during rendering to add SDF text to the render pipeline
@@ -185,13 +119,13 @@ const addQuads = (layout?: TextLayout): Float32Array | null => {
 const renderQuads = (
   renderer: CoreRenderer,
   layout: TextLayout,
-  vertexBuffer: Float32Array,
   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) {
@@ -202,68 +136,82 @@ const renderQuads = (
   // 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;
-  const webGlBuffer = glw.createBuffer();
-
-  if (!webGlBuffer) {
-    console.warn('Failed to create WebGL buffer for SDF text');
-    return;
-  }
 
-  const webGlBuffers = new BufferCollection([
-    {
-      buffer: webGlBuffer,
-      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,
+  /**
+   * 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);
+  };
 
-  const buffer = webGlBuffers.getBuffer('a_position');
-  if (buffer !== undefined) {
-    glw.arrayBufferData(buffer, vertexBuffer, glw.STATIC_DRAW as number);
-  }
+  // 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;
 
-  const renderOp = new SdfRenderOp(
-    renderer as WebGlRenderer,
-    sdfShader!, // Ensure sdfShader is not null
-    {
-      transform: globalTransform,
-      color: mergeColorAlpha(color, worldAlpha),
-      size: layout.fontScale, // Use proper font scaling in shader
-      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,
-  );
-
-  // Add atlas texture and set quad count
-  renderOp.addTexture(atlasTexture.ctxTexture as WebGlCtxTexture);
-  renderOp.numQuads = layout.glyphs.length;
+  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;
+  }
 
-  (renderer as WebGlRenderer).addRenderOp(renderOp);
+  // Cache hit (or freshly allocated): build the render op and submit.
+  buildAndSubmitRenderOp(glBufferRefBox.current);
 };
 
 /**
@@ -315,8 +263,27 @@ const generateTextLayout = (
   );
 
   const lineAmount = lines.length;
+  let bufferIndex = 0;
+  let glyphCount = 0;
+  // Count total glyphs (excluding spaces) for buffer allocation
+  for (let i = 0; i < lineAmount; i++) {
+    const textLine = (lines[i] as TextLineStruct)[0];
+    for (const char of textLine) {
+      if (hasZeroWidthSpace(char) === true) {
+        continue;
+      }
+      const codepoint = char.codePointAt(0);
+      if (codepoint === undefined) {
+        continue;
+      }
+      glyphCount++;
+    }
+  }
+
+  const vertexBuffer = new Float32Array(
+    glyphCount * VERTICES_PER_GLYPH * FLOATS_PER_VERTEX,
+  );
 
-  const glyphs: GlyphLayout[] = [];
   let currentX = 0;
   let currentY = 0;
   for (let i = 0; i < lineAmount; i++) {
@@ -351,23 +318,52 @@ const generateTextLayout = (
       // Apply pair kerning before placing this glyph.
       currentX += kerning;
 
-      // Calculate glyph position and atlas coordinates (in design units)
-      const glyphLayout: GlyphLayout = {
-        codepoint,
-        glyphId: glyph.id,
-        x: currentX + glyph.xoffset,
-        y: currentY + glyph.yoffset,
-        width: glyph.width,
-        height: glyph.height,
-        xOffset: glyph.xoffset,
-        yOffset: glyph.yoffset,
-        atlasX: glyph.x / atlasWidth,
-        atlasY: glyph.y / atlasHeight,
-        atlasWidth: glyph.width / atlasWidth,
-        atlasHeight: glyph.height / atlasHeight,
-      };
-
-      glyphs.push(glyphLayout);
+      const x1 = currentX + glyph.xoffset;
+      const y1 = currentY + glyph.yoffset;
+      const x2 = x1 + glyph.width;
+      const y2 = y1 + glyph.height;
+      const u1 = glyph.x / atlasWidth;
+      const v1 = glyph.y / atlasHeight;
+      const u2 = u1 + glyph.width / atlasWidth;
+      const v2 = v1 + glyph.height / atlasHeight;
+
+      // Triangle 1: Top-left, top-right, bottom-left
+      // Vertex 1: Top-left
+      vertexBuffer[bufferIndex++] = x1;
+      vertexBuffer[bufferIndex++] = y1;
+      vertexBuffer[bufferIndex++] = u1;
+      vertexBuffer[bufferIndex++] = v1;
+
+      // Vertex 2: Top-right
+      vertexBuffer[bufferIndex++] = x2;
+      vertexBuffer[bufferIndex++] = y1;
+      vertexBuffer[bufferIndex++] = u2;
+      vertexBuffer[bufferIndex++] = v1;
+
+      // Vertex 3: Bottom-left
+      vertexBuffer[bufferIndex++] = x1;
+      vertexBuffer[bufferIndex++] = y2;
+      vertexBuffer[bufferIndex++] = u1;
+      vertexBuffer[bufferIndex++] = v2;
+
+      // Triangle 2: Top-right, bottom-right, bottom-left
+      // Vertex 4: Top-right (duplicate)
+      vertexBuffer[bufferIndex++] = x2;
+      vertexBuffer[bufferIndex++] = y1;
+      vertexBuffer[bufferIndex++] = u2;
+      vertexBuffer[bufferIndex++] = v1;
+
+      // Vertex 5: Bottom-right
+      vertexBuffer[bufferIndex++] = x2;
+      vertexBuffer[bufferIndex++] = y2;
+      vertexBuffer[bufferIndex++] = u2;
+      vertexBuffer[bufferIndex++] = v2;
+
+      // Vertex 6: Bottom-left (duplicate)
+      vertexBuffer[bufferIndex++] = x1;
+      vertexBuffer[bufferIndex++] = y2;
+      vertexBuffer[bufferIndex++] = u1;
+      vertexBuffer[bufferIndex++] = v2;
 
       // Advance position with letter spacing (in design units)
       currentX += glyph.xadvance + letterSpacing;
@@ -378,16 +374,23 @@ const generateTextLayout = (
 
   // Convert final dimensions to pixel space for the layout
   return {
-    glyphs,
+    vertexBuffer,
+    glyphCount,
     distanceRange: fontScale * fontData.distanceField.distanceRange,
     width: effectiveWidth * fontScale,
     height: effectiveHeight,
     fontScale: fontScale,
     lineHeight: lineHeightPx,
     fontFamily,
+    remainingLines,
+    hasRemainingText,
   };
 };
 
+const clearCache = (): void => {
+  layoutCache.clear();
+};
+
 /**
  * SDF Text Renderer - implements TextRenderer interface
  */
@@ -395,9 +398,9 @@ const SdfTextRenderer = {
   type,
   font,
   renderText,
-  addQuads,
   renderQuads,
   init,
+  clearCache,
 };
 
 export default SdfTextRenderer;