@lightningjs/renderer 3.0.2 → 3.0.4

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 { hasZeroWidthSpace } from './Utils.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, GlyphLayout } from './TextRenderer.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,9 +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 renderInfoCache = new Map<string, SdfRenderInfo>();
 
 /**
  * SDF text renderer using MSDF/SDF fonts with WebGL
@@ -66,204 +65,41 @@ const font: FontHandler = SdfFontHandler;
  * @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);
 
-  // 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
-  const layout = generateTextLayout(props, fontData);
-
-  // For SDF renderer, ImageData is null since we render via WebGL
-  return {
-    remainingLines: 0,
-    hasRemainingText: false,
+  const layout = generateTextLayout(
+    props,
+    SdfFontHandler.getFontData(props.fontFamily)!,
+  );
+  renderInfo = {
+    type,
+    layout,
     width: layout.width,
     height: layout.height,
-    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;
+    remainingLines: layout.remainingLines,
+    hasRemainingText: layout.hasRemainingText,
+    atlasTexture: SdfFontHandler.getAtlas(props.fontFamily)!
+      .ctxTexture as WebGlCtxTexture,
+  } as SdfRenderInfo;
+  renderInfoCache.set(cacheKey, renderInfo);
 
-  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;
+  // 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,
-  vertexBuffer: Float32Array,
-  renderProps: TextRenderProps,
-): void => {
-  const fontFamily = renderProps.fontFamily;
-  const color = renderProps.color;
-  const worldAlpha = renderProps.worldAlpha;
-  const globalTransform = renderProps.globalTransform;
-
-  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;
-  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,
-        },
-      },
-    },
-  ]);
-
-  const buffer = webGlBuffers.getBuffer('a_position');
-  if (buffer !== undefined) {
-    glw.arrayBufferData(buffer, vertexBuffer, glw.STATIC_DRAW as number);
-  }
-
-  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;
-
-  (renderer as WebGlRenderer).addRenderOp(renderOp);
+const renderQuads = (textNode: CoreTextNode): void => {
+  textNode.props.shader = sdfShader;
+  renderer!.addRenderOp(textNode);
 };
 
 /**
@@ -315,8 +151,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 +206,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 +262,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 => {
+  renderInfoCache.clear();
+};
+
 /**
  * SDF Text Renderer - implements TextRenderer interface
  */
@@ -395,9 +286,9 @@ const SdfTextRenderer = {
   type,
   font,
   renderText,
-  addQuads,
   renderQuads,
   init,
+  clearCache,
 };
 
 export default SdfTextRenderer;

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

@@ -227,7 +227,9 @@ export const wrapText = (
         : [[['', 0, false, 0, 0]], remainingLines, i < lines.length - 1];
 
     remainingLines--;
-    wrappedLines.push(...wrappedLine);
+    for (let j = 0; j < wrappedLine.length; j++) {
+      wrappedLines.push(wrappedLine[j]!);
+    }
 
     if (hasMaxLines === true && remainingLines <= 0) {
       const lastLine = wrappedLines[wrappedLines.length - 1]!;
@@ -278,44 +280,75 @@ export const wrapLine = (
   let hasRemainingText = true;
 
   const wrapFn = getWrapStrategy(wordBreak);
-  while (words.length > 0 && remainingLines > 0) {
-    let word = words.shift()!;
-    let wordWidth = measureText(word, fontFamily, letterSpacing);
+  let wordIdx = 0;
+  let spaceIdx = 0;
+  let pendingWord = '';
+
+  while (
+    (pendingWord.length > 0 || wordIdx < words.length) &&
+    remainingLines > 0
+  ) {
+    let word: string;
+    let wordWidth: number;
     let remainingWord = '';
 
+    if (pendingWord.length > 0) {
+      word = pendingWord;
+      pendingWord = '';
+    } else {
+      word = words[wordIdx++]!;
+    }
+    wordWidth = measureText(word, fontFamily, letterSpacing);
+
     //handle first word of new line separately to avoid empty line issues
     if (currentLineWidth === 0) {
       // Word doesn't fit on current line
       //if first word doesn't fit on empty line
       if (wordWidth > maxWidth) {
         remainingLines--;
+        const isLastLine = remainingLines === 0;
+        let lineTruncated = isLastLine;
         //truncate word to fit
-        [word, remainingWord, wordWidth] =
-          remainingLines === 0
-            ? truncateWord(
-                measureText,
-                word,
-                wordWidth,
-                maxWidth,
-                fontFamily,
-                letterSpacing,
-                overflowSuffix,
-                overflowWidth,
-              )
-            : splitWord(
-                measureText,
-                word,
-                wordWidth,
-                maxWidth,
-                fontFamily,
-                letterSpacing,
-              );
+        [word, remainingWord, wordWidth] = isLastLine
+          ? truncateWord(
+              measureText,
+              word,
+              wordWidth,
+              maxWidth,
+              fontFamily,
+              letterSpacing,
+              overflowSuffix,
+              overflowWidth,
+            )
+          : splitWord(
+              measureText,
+              word,
+              wordWidth,
+              maxWidth,
+              fontFamily,
+              letterSpacing,
+            );
 
         if (remainingWord.length > 0) {
-          words.unshift(remainingWord);
+          if (word.length === 0) {
+            if (overflowSuffix.length > 0) {
+              word = overflowSuffix;
+              wordWidth = overflowWidth;
+            } else {
+              word = remainingWord.charAt(0);
+              if (word.length === 0) {
+                break;
+              }
+              wordWidth = measureText(word, fontFamily, letterSpacing);
+            }
+            remainingWord = '';
+            remainingLines = 0;
+            lineTruncated = true;
+          }
+          pendingWord = remainingWord;
         }
         // first word doesn't fit on an empty line
-        wrappedLines.push([word, wordWidth, false, 0, 0]);
+        wrappedLines.push([word, wordWidth, lineTruncated, 0, 0]);
       } else if (wordWidth + spaceWidth >= maxWidth) {
         remainingLines--;
         // word with space doesn't fit, but word itself fits - put on new line
@@ -326,7 +359,7 @@ export const wrapLine = (
       }
       continue;
     }
-    const space = spaces.shift() || '';
+    const space = spaces[spaceIdx++] || '';
     // For width calculation, treat ZWSP as having 0 width but regular space functionality
     const effectiveSpaceWidth = space === '\u200B' ? 0 : spaceWidth;
     const totalWidth = currentLineWidth + effectiveSpaceWidth + wordWidth;
@@ -367,7 +400,7 @@ export const wrapLine = (
     );
 
     if (remainingWord.length > 0) {
-      words.unshift(remainingWord);
+      pendingWord = remainingWord;
     }
   }
 

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

@@ -17,8 +17,8 @@
  * limitations under the License.
  */
 
-import type { CoreTextNodeProps } from '../CoreTextNode.js';
-import type { CoreRenderer } from '../renderers/CoreRenderer.js';
+import type { CoreTextNode, CoreTextNodeProps } from '../CoreTextNode.js';
+import type { WebGlCtxTexture } from '../renderers/webgl/WebGlCtxTexture.js';
 import type { Stage } from '../Stage.js';
 
 // Text baseline and vertical align types
@@ -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
+   */
+  vertexBuffer: Float32Array;
+  /**
+   * glyph count in layout
    */
-  glyphs: GlyphLayout[];
+  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,30 +375,43 @@ 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 {
+export interface RenderInfo {
   width: number;
   height: number;
-  hasRemainingText?: boolean;
-  remainingLines?: number;
-  imageData?: ImageData | null; // Image data for Canvas Text Renderer
-  layout?: TextLayout; // Layout data for SDF renderer caching
+  hasRemainingText: boolean;
+  remainingLines: number;
 }
 
+export type SdfRenderInfo = RenderInfo & {
+  type: 'sdf';
+  layout: TextLayout;
+  atlasTexture: WebGlCtxTexture;
+};
+
+export type CanvasRenderInfo = RenderInfo & {
+  type: 'canvas';
+  imageData: ImageData;
+};
+
+export type TextRenderInfo = SdfRenderInfo | CanvasRenderInfo;
+
 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;
+  renderQuads: (textNode: CoreTextNode) => 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}`;
+}