@lightningjs/renderer 3.0.1 → 3.0.3

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/SdfFontHandler.ts

@@ -302,11 +302,14 @@ export const loadFont = async (
   const nwff: CoreTextNode[] = (nodesWaitingForFont[fontFamily] = []);
   // Create loading promise
   const loadPromise = (async (): Promise<void> => {
-    // Load font JSON data via the platform's fetch abstraction so behaviour
-    // can be overridden per platform (XHR, Fetch API, custom loaders, etc.).
-    const blob = (await stage.platform.fetch(atlasDataUrl)) as Blob;
-    const fontData = JSON.parse(await blob.text()) as SdfFontData;
-    if (fontData === null || fontData.chars === undefined) {
+    // Load font JSON data
+    const response = await fetch(atlasDataUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to load font data: ${response.statusText}`);
+    }
+
+    const fontData = (await response.json()) as SdfFontData;
+    if (!fontData || !fontData.chars) {
       throw new Error('Invalid SDF font data format');
     }
 

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;

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

@@ -254,14 +254,6 @@ export interface TrProps extends TrFontProps {
  * Glyph layout information for WebGL rendering
  */
 export interface GlyphLayout {
-  /**
-   * Unicode codepoint
-   */
-  codepoint: number;
-  /**
-   * Glyph ID in the font atlas
-   */
-  glyphId: number;
   /**
    * X position relative to text origin
    */
@@ -278,14 +270,6 @@ export interface GlyphLayout {
    * Height of glyph in font units
    */
   height: number;
-  /**
-   * X offset for glyph positioning
-   */
-  xOffset: number;
-  /**
-   * Y offset for glyph positioning
-   */
-  yOffset: number;
   /**
    * Atlas texture coordinates (normalized 0-1)
    */
@@ -300,9 +284,13 @@ export interface GlyphLayout {
  */
 export interface TextLayout {
   /**
-   * Individual glyph layouts
+   * vertices for rendering quads in WebGL
    */
-  glyphs: GlyphLayout[];
+  vertexBuffer: Float32Array;
+  /**
+   * glyph count in layout
+   */
+  glyphCount: number;
   /**
    * Total text width
    */
@@ -327,6 +315,14 @@ export interface TextLayout {
    * distanceRange used
    */
   distanceRange: number;
+  /**
+   * number of lines that exceeded maxHeight and were truncated
+   */
+  remainingLines: number;
+  /**
+   * Whether there is remaining text that exceeded maxHeight and was truncated
+   */
+  hasRemainingText: boolean;
 }
 
 export interface FontLoadOptions {
@@ -379,6 +375,14 @@ export interface TextRenderProps {
   parentHasRenderTexture: boolean;
   framebufferDimensions: unknown;
   stage: Stage;
+  /**
+   * Mutable wrapper ref used by the SDF renderer to cache the underlying
+   * WebGLBuffer across frames. The SDF renderer reads and writes the
+   * `.current` property so the node's ref box is updated in-place.
+   * CoreTextNode owns the ref and is responsible for calling
+   * deleteBuffer when the buffer is no longer needed.
+   */
+  glBufferRef: { current: WebGLBuffer | null };
 }
 
 export interface TextRenderInfo {
@@ -394,15 +398,13 @@ export interface TextRenderer {
   type: 'canvas' | 'sdf';
   font: FontHandler;
   renderText: (props: CoreTextNodeProps) => TextRenderInfo;
-  // Updated to accept layout data and return vertex buffer for performance
-  addQuads: (layout?: TextLayout) => Float32Array | null;
   renderQuads: (
     renderer: CoreRenderer,
     layout: TextLayout,
-    vertexBuffer: Float32Array,
     renderProps: TextRenderProps,
   ) => void;
   init: (stage: Stage) => void;
+  clearCache: () => void;
 }
 
 /**

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

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import type { NormalizedFontMetrics } from './TextRenderer.js';
+import type { CoreTextNodeProps } from '../CoreTextNode.js';
 
 const invisibleChars = /[\u200B\u200C\u200D\uFEFF\u00AD\u2060]/g;
 
@@ -97,3 +97,7 @@ export function tokenizeString(tokenRegex: RegExp, text: string): string[] {
   final.pop();
   return final.filter((word) => word != '');
 }
+
+export function getLayoutCacheKey(props: CoreTextNodeProps): string {
+  return `${props.text}-${props.fontFamily}-${props.fontSize}-${props.letterSpacing}-${props.lineHeight}-${props.maxHeight}-${props.maxWidth}-${props.textAlign}-${props.wordBreak}-${props.maxLines}-${props.overflowSuffix}`;
+}