@lightningjs/renderer 3.0.2 → 3.0.3

package/dist/src/core/text-rendering/CoreFont.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreFont.js","sourceRoot":"","sources":["../../../../src/core/text-rendering/CoreFont.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,+CAAO,CAAA;IACP,+CAAO,CAAA;IACP,6CAAM,CAAA;IACN,6CAAM,CAAA;AACR,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAOD;;GAEG;AACH,MAAM,OAAgB,QAAS,SAAQ,YAAY;IACvC,YAAY,GAAkC,MAAM,CAAC,MAAM,CACnE,IAAI,CAC2B,CAAC;IACxB,iBAAiB,GACzB,MAAM,CAAC,MAAM,CAAC,IAAI,CAA0C,CAAC;IAExD,YAAY,CAAe;IAC3B,KAAK,CAAY;IACjB,MAAM,CAAS;IACf,OAAO,CAAe;IAE7B,YAAY,YAA0B,EAAE,KAAoB;QAC1D,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAES,QAAQ;QAChB,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACvC,KAAK,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;YAC7B,YAAY,CAAC,GAAG,CAAE,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YACnD,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC;QAC3B,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,MAAM,CAAC;IAChC,CAAC;IAEM,OAAO,CAAC,IAAkB;QAC/B,IAAI,CAAC,YAAa,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACrC,CAAC;IAEM,WAAW,CAAC,IAAkB;QACnC,IAAI,IAAI,CAAC,YAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YAChC,OAAO,IAAI,CAAC,YAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,YAAY,CAAC;QACzB,OAAO,IAAI,CAAC,iBAAiB,CAAC;QAC9B,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;CAMF"}

package/dist/src/core/text-rendering/FontManager.d.ts

@@ -0,0 +1,11 @@
+import type { Stage } from '../Stage.js';
+import type { CoreFont } from './CoreFont.js';
+import type { FontLoadOptions, TextRenderer, TextRenderers } from './TextRenderer.js';
+export declare class CoreFontManager {
+    private fonts;
+    private renderers;
+    constructor(stage: Stage, textRenderers: TextRenderer[]);
+    loadFont(type: TextRenderers, options: FontLoadOptions): void;
+    unloadFont(fontFamily: string): void;
+    getFont(fontFamily: string): CoreFont | undefined;
+}

package/dist/src/core/text-rendering/FontManager.js

@@ -0,0 +1,41 @@
+export class CoreFontManager {
+    fonts = Object.create(null);
+    renderers = Object.create(null);
+    constructor(stage, textRenderers) {
+        for (let i = 0; i < textRenderers.length; i++) {
+            const renderer = textRenderers[i];
+            this.renderers[renderer.type] = renderer;
+            renderer.init(stage, this);
+        }
+    }
+    loadFont(type, options) {
+        const targetRenderer = this.renderers[type];
+        if (targetRenderer === undefined) {
+            console.error('renderer type for this font does not exist');
+            return;
+        }
+        const font = targetRenderer.createFont(options);
+        if (font === undefined) {
+            return;
+        }
+        font.load();
+        this.fonts[options.fontFamily] = font;
+    }
+    unloadFont(fontFamily) {
+        const targetFont = this.fonts[fontFamily];
+        if (targetFont === undefined) {
+            return;
+        }
+        targetFont.destroy();
+        delete this.fonts[fontFamily];
+    }
+    getFont(fontFamily) {
+        const font = this.fonts[fontFamily];
+        if (font === undefined) {
+            console.warn('fontFamily not registered');
+            return;
+        }
+        return font;
+    }
+}
+//# sourceMappingURL=FontManager.js.map

package/dist/src/core/text-rendering/FontManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontManager.js","sourceRoot":"","sources":["../../../../src/core/text-rendering/FontManager.ts"],"names":[],"mappings":"AAQA,MAAM,OAAO,eAAe;IAClB,KAAK,GAA6B,MAAM,CAAC,MAAM,CAAC,IAAI,CAG3D,CAAC;IACM,SAAS,GAAiC,MAAM,CAAC,MAAM,CAC7D,IAAI,CAC2B,CAAC;IAElC,YAAY,KAAY,EAAE,aAA6B;QACrD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC9C,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC,CAAE,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC;YACzC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,IAAmB,EAAE,OAAwB;QACpD,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAC5C,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;YACjC,OAAO,CAAC,KAAK,CAAC,4CAA4C,CAAC,CAAC;YAC5D,OAAO;QACT,CAAC;QACD,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAChD,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,EAAE,CAAC;QACZ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;IACxC,CAAC;IAED,UAAU,CAAC,UAAkB;QAC3B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC1C,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QACD,UAAU,CAAC,OAAO,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC;IAED,OAAO,CAAC,UAAkB;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACpC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;YAC1C,OAAO;QACT,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

package/dist/src/core/text-rendering/SdfFont.d.ts

@@ -0,0 +1,29 @@
+import type { Stage } from '../Stage.js';
+import type { ImageTexture } from '../textures/ImageTexture.js';
+import { CoreFont, type CoreFontProps } from './CoreFont.js';
+import { type SdfFontData } from './SdfFontHandler.js';
+import type { NormalizedFontMetrics, TextRenderer } from './TextRenderer.js';
+export type SdfFontProps = CoreFontProps & {
+    atlasUrl: string;
+    atlasDataUrl: string;
+};
+export declare class SdfFont extends CoreFont {
+    private stage;
+    type: string;
+    atlasUrl: string;
+    atlasDataUrl: string;
+    atlasTexture?: ImageTexture;
+    private glyphMap?;
+    private kerningTable?;
+    private data?;
+    constructor(textRenderer: TextRenderer, props: SdfFontProps, stage: Stage);
+    load(): void;
+    private hardFail;
+    private processFontData;
+    measureText(text: string, letterSpacing: number): number;
+    getMetrics(fontSize: number): NormalizedFontMetrics;
+    getGlyph(codepoint: number): import("./SdfFontHandler.js").SdfGlyph | null;
+    getKerning(firstGlyph: number, secondGlyph: number): number;
+    getAtlas(): ImageTexture;
+    getData(): SdfFontData;
+}

package/dist/src/core/text-rendering/SdfFont.js

@@ -0,0 +1,142 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2025 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 { CoreFont, FontState } from './CoreFont.js';
+import { buildGlyphMap, buildKerningTable, } from './SdfFontHandler.js';
+import { normalizeFontMetrics } from './TextLayoutEngine.js';
+import { hasZeroWidthSpace } from './Utils.js';
+export class SdfFont extends CoreFont {
+    stage;
+    type = 'sdf';
+    atlasUrl;
+    atlasDataUrl;
+    atlasTexture;
+    glyphMap;
+    kerningTable;
+    data;
+    constructor(textRenderer, props, stage) {
+        super(textRenderer, props);
+        this.stage = stage;
+        this.atlasUrl = props.atlasUrl;
+        this.atlasDataUrl = props.atlasDataUrl;
+    }
+    load() {
+        new Promise(async () => {
+            const atlasData = await fetch(this.atlasDataUrl);
+            if (atlasData.ok === false) {
+                this.hardFail(`Failed to load font data: ${atlasData.statusText}`);
+            }
+            const fontData = (await atlasData.json());
+            if (fontData.chars === undefined) {
+                this.hardFail('Invalid SDF font data format');
+            }
+            const atlasTexture = this.stage.txManager.createTexture('ImageTexture', {
+                src: this.atlasUrl,
+                premultiplyAlpha: false,
+            });
+            atlasTexture.setRenderableOwner(this.family, true);
+            atlasTexture.preventCleanup = true;
+            atlasTexture.on('loaded', () => {
+                this.onLoaded();
+            });
+            atlasTexture.on('failed', (error) => {
+                console.error(`Failed to load SDF font: ${this.family}`, error);
+                this.emit('failed');
+            });
+            this.atlasTexture = atlasTexture;
+            this.processFontData(fontData);
+        });
+    }
+    hardFail(message) {
+        this.state = FontState.Failed;
+        throw new Error(message);
+    }
+    processFontData(fontData) {
+        this.glyphMap = buildGlyphMap(fontData.chars);
+        this.kerningTable = buildKerningTable(fontData.kernings);
+        this.metrics = this.metrics ||
+            fontData.lightningMetrics || {
+            ascender: 800,
+            descender: -200,
+            lineGap: 200,
+            unitsPerEm: 1000,
+        };
+        this.data = fontData;
+    }
+    measureText(text, letterSpacing) {
+        if (text.length === 1) {
+            const char = text.charAt(0);
+            const codepoint = text.codePointAt(0);
+            if (codepoint === undefined)
+                return 0;
+            if (hasZeroWidthSpace(char) === true)
+                return 0;
+            const glyph = this.getGlyph(codepoint);
+            if (glyph === null)
+                return 0;
+            return glyph.xadvance + letterSpacing;
+        }
+        let width = 0;
+        let prevCodepoint = 0;
+        for (let i = 0; i < text.length; i++) {
+            const char = text.charAt(i);
+            const codepoint = text.codePointAt(i);
+            if (codepoint === undefined)
+                continue;
+            // Skip zero-width spaces in width calculations
+            if (hasZeroWidthSpace(char)) {
+                continue;
+            }
+            const glyph = this.getGlyph(codepoint);
+            if (glyph === null)
+                continue;
+            let advance = glyph.xadvance;
+            // Add kerning if there's a previous character
+            if (prevCodepoint !== 0) {
+                const kerning = this.getKerning(prevCodepoint, codepoint);
+                advance += kerning;
+            }
+            width += advance + letterSpacing;
+            prevCodepoint = codepoint;
+        }
+        return width;
+    }
+    getMetrics(fontSize) {
+        let m = this.normalizedMetrics[fontSize];
+        if (m !== undefined) {
+            return m;
+        }
+        m = this.normalizedMetrics[fontSize] = normalizeFontMetrics(this.metrics, fontSize);
+        return m;
+    }
+    getGlyph(codepoint) {
+        const gm = this.glyphMap;
+        return gm[codepoint] || gm[63] || null;
+    }
+    getKerning(firstGlyph, secondGlyph) {
+        const seconds = this.kerningTable[secondGlyph];
+        return (seconds !== undefined && seconds[firstGlyph]) || 0;
+    }
+    getAtlas() {
+        return this.atlasTexture;
+    }
+    getData() {
+        return this.data;
+    }
+}
+//# sourceMappingURL=SdfFont.js.map

package/dist/src/core/text-rendering/SdfFont.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SdfFont.js","sourceRoot":"","sources":["../../../../src/core/text-rendering/SdfFont.ts"],"names":[],"mappings":"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"}

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

@@ -10,8 +10,8 @@ declare const SdfTextRenderer: {
     type: "sdf";
     font: FontHandler;
     renderText: (props: CoreTextNodeProps) => TextRenderInfo;
-    addQuads: (layout?: TextLayout) => Float32Array | null;
-    renderQuads: (renderer: CoreRenderer, layout: TextLayout, vertexBuffer: Float32Array, renderProps: TextRenderProps) => void;
+    renderQuads: (renderer: CoreRenderer, layout: TextLayout, renderProps: TextRenderProps) => void;
     init: (stage: Stage) => void;
+    clearCache: () => void;
 };
 export default SdfTextRenderer;

package/dist/src/core/text-rendering/SdfTextRenderer.js

@@ -16,7 +16,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { hasZeroWidthSpace } from './Utils.js';
+import { getLayoutCacheKey, hasZeroWidthSpace } from './Utils.js';
 import * as SdfFontHandler from './SdfFontHandler.js';
 import { WebGlRenderer } from '../renderers/webgl/WebGlRenderer.js';
 import { SdfRenderOp } from '../renderers/webgl/SdfRenderOp.js';
@@ -38,6 +38,7 @@ const init = (stage) => {
     sdfShader = stage.shManager.createShader('Sdf');
 };
 const font = SdfFontHandler;
+const layoutCache = new Map();
 /**
  * SDF text renderer using MSDF/SDF fonts with WebGL
  *
@@ -53,6 +54,17 @@ const renderText = (props) => {
             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) {
@@ -63,89 +75,27 @@ const renderText = (props) => {
         };
     }
     // 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) => {
-    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
  */
-const renderQuads = (renderer, layout, vertexBuffer, renderProps) => {
+const renderQuads = (renderer, layout, renderProps) => {
     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}`);
@@ -154,53 +104,66 @@ const renderQuads = (renderer, layout, vertexBuffer, renderProps) => {
     // We can safely assume this is a WebGL renderer else this wouldn't be called
     const glw = renderer.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,
-                    normalized: false,
-                    stride,
-                    offset: 0,
-                },
-                a_textureCoords: {
-                    name: 'a_textureCoords',
-                    size: 2,
-                    type: glw.FLOAT,
-                    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) => {
+        const webGlBuffers = new BufferCollection([
+            {
+                buffer: gpuBuffer,
+                attributes: {
+                    a_position: {
+                        name: 'a_position',
+                        size: 2,
+                        type: glw.FLOAT,
+                        normalized: false,
+                        stride,
+                        offset: 0,
+                    },
+                    a_textureCoords: {
+                        name: 'a_textureCoords',
+                        size: 2,
+                        type: glw.FLOAT,
+                        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);
+        ]);
+        const renderOp = new SdfRenderOp(renderer, sdfShader, {
+            transform: globalTransform,
+            color: mergeColorAlpha(color, worldAlpha),
+            size: layout.fontScale,
+            distanceRange: layout.distanceRange,
+        }, webGlBuffers, worldAlpha, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        renderProps.clippingRect, layout.width, layout.height, false, renderProps.parentHasRenderTexture, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        renderProps.framebufferDimensions);
+        renderOp.addTexture(atlasTexture.ctxTexture);
+        renderOp.numQuads = layout.glyphCount;
+        renderer.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();
+        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);
+        // Write back into the ref box so the owning node can reuse it next frame.
+        glBufferRefBox.current = newBuffer;
     }
-    const renderOp = new SdfRenderOp(renderer, sdfShader, // Ensure sdfShader is not null
-    {
-        transform: globalTransform,
-        color: mergeColorAlpha(color, worldAlpha),
-        size: layout.fontScale, // Use proper font scaling in shader
-        distanceRange: layout.distanceRange,
-    }, webGlBuffers, worldAlpha, 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    renderProps.clippingRect, layout.width, layout.height, false, renderProps.parentHasRenderTexture, 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    renderProps.framebufferDimensions);
-    // Add atlas texture and set quad count
-    renderOp.addTexture(atlasTexture.ctxTexture);
-    renderOp.numQuads = layout.glyphs.length;
-    renderer.addRenderOp(renderOp);
+    // Cache hit (or freshly allocated): build the render op and submit.
+    buildAndSubmitRenderOp(glBufferRefBox.current);
 };
 /**
  * Generate complete text layout with glyph positioning for caching
@@ -222,7 +185,23 @@ const generateTextLayout = (props, fontCache) => {
     const maxHeight = props.maxHeight;
     const [lines, remainingLines, hasRemainingText, bareLineHeight, lineHeightPx, effectiveWidth, effectiveHeight,] = mapTextLayout(SdfFontHandler.measureText, metrics, props.text, props.textAlign, fontFamily, lineHeight, props.overflowSuffix, props.wordBreak, letterSpacing, props.maxLines, maxWidth, maxHeight);
     const lineAmount = lines.length;
-    const glyphs = [];
+    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][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);
     let currentX = 0;
     let currentY = 0;
     for (let i = 0; i < lineAmount; i++) {
@@ -253,22 +232,46 @@ const generateTextLayout = (props, fontCache) => {
             }
             // Apply pair kerning before placing this glyph.
             currentX += kerning;
-            // Calculate glyph position and atlas coordinates (in design units)
-            const 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;
             prevGlyphId = glyph.id;
@@ -277,15 +280,21 @@ const generateTextLayout = (props, fontCache) => {
     }
     // 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 = () => {
+    layoutCache.clear();
+};
 /**
  * SDF Text Renderer - implements TextRenderer interface
  */
@@ -293,9 +302,9 @@ const SdfTextRenderer = {
     type,
     font,
     renderText,
-    addQuads,
     renderQuads,
     init,
+    clearCache,
 };
 export default SdfTextRenderer;
 //# sourceMappingURL=SdfTextRenderer.js.map