@solidtv/renderer 1.3.2 → 1.4.1

package/src/core/lib/WebGlContextWrapper.ts

@@ -6,13 +6,12 @@ import type {
   Vec3,
   Vec4,
 } from '../renderers/webgl/internal/ShaderUtils.js';
-import { isWebGl2 } from '../renderers/webgl/internal/WebGlUtils.js';
 
 /**
  * Optimized WebGL Context Wrapper
  *
  * @remarks
- * This class contains the subset of the WebGLRenderingContext & WebGL2RenderingContext
+ * This class contains the subset of the WebGLRenderingContext
  * API that is used by the renderer. Select high volume WebGL methods include
  * caching optimizations to avoid making WebGL calls if the state is already set
  * to the desired value.
@@ -94,56 +93,40 @@ export class WebGlContextWrapper {
   public readonly INVALID_OPERATION: number;
   //#endregion WebGL Enums
 
-  constructor(private gl: WebGLRenderingContext | WebGL2RenderingContext) {
-    // The following code extracts the current state of the WebGL context
-    // to our local JavaScript cached version of it. This is so we can
-    // avoid making WebGL calls if we don't need to.
-    // We could assume that the WebGL context is in a default state, but
-    // in the future we may want to support restoring a broken WebGL context
-    // and this will help with that.
-    this.activeTextureUnit =
-      (gl.getParameter(gl.ACTIVE_TEXTURE) as number) - gl.TEXTURE0;
+  constructor(private gl: WebGLRenderingContext) {
+    // A freshly created WebGL context is in a fully specified default state.
+    // Rather than reading that state back with getParameter/isEnabled — each a
+    // synchronous CPU<->GPU round-trip, and previously ~one per texture unit
+    // (16-32) just to enumerate the bindings — we seed the cache with those
+    // known defaults. The engine never restores a lost context in place (it
+    // reloads the app on `contextLost`), so there is no live state to recover.
+    this.activeTextureUnit = 0;
     const maxTextureUnits = gl.getParameter(
       gl.MAX_TEXTURE_IMAGE_UNITS,
     ) as number;
-    // save current texture units
-    this.texture2dUnits = new Array<undefined>(maxTextureUnits)
-      .fill(undefined)
-      .map((_, i) => {
-        this.activeTexture(i);
-        return gl.getParameter(gl.TEXTURE_BINDING_2D) as WebGLTexture;
-      });
-    // restore active texture unit
-    this.activeTexture(this.activeTextureUnit);
-    this.scissorEnabled = gl.isEnabled(gl.SCISSOR_TEST);
-
-    const scissorBox = gl.getParameter(gl.SCISSOR_BOX) as [
-      number,
-      number,
-      number,
-      number,
-    ];
-    this.scissorX = scissorBox[0];
-    this.scissorY = scissorBox[1];
-    this.scissorWidth = scissorBox[2];
-    this.scissorHeight = scissorBox[3];
-
-    this.blendEnabled = gl.isEnabled(gl.BLEND);
-    this.blendSrcRgb = gl.getParameter(gl.BLEND_SRC_RGB) as number;
-    this.blendDstRgb = gl.getParameter(gl.BLEND_DST_RGB) as number;
-    this.blendSrcAlpha = gl.getParameter(gl.BLEND_SRC_ALPHA) as number;
-    this.blendDstAlpha = gl.getParameter(gl.BLEND_DST_ALPHA) as number;
-
-    this.boundArrayBuffer = gl.getParameter(
-      gl.ARRAY_BUFFER_BINDING,
-    ) as WebGLBuffer;
-    this.boundElementArrayBuffer = gl.getParameter(
-      gl.ELEMENT_ARRAY_BUFFER_BINDING,
-    ) as WebGLBuffer;
-
-    this.curProgram = gl.getParameter(
-      gl.CURRENT_PROGRAM,
-    ) as WebGLProgram | null;
+    // All texture units start unbound (TEXTURE_BINDING_2D === null).
+    this.texture2dUnits = new Array<WebGLTexture | null>(maxTextureUnits).fill(
+      null,
+    );
+
+    // SCISSOR_TEST disabled; SCISSOR_BOX defaults to the full drawing buffer.
+    this.scissorEnabled = false;
+    this.scissorX = 0;
+    this.scissorY = 0;
+    this.scissorWidth = gl.drawingBufferWidth;
+    this.scissorHeight = gl.drawingBufferHeight;
+
+    // BLEND disabled; blend func defaults to (ONE, ZERO) for both RGB and alpha.
+    this.blendEnabled = false;
+    this.blendSrcRgb = gl.ONE;
+    this.blendDstRgb = gl.ZERO;
+    this.blendSrcAlpha = gl.ONE;
+    this.blendDstAlpha = gl.ZERO;
+
+    // No buffers or program bound on a fresh context.
+    this.boundArrayBuffer = null;
+    this.boundElementArrayBuffer = null;
+    this.curProgram = null;
 
     this.canvas = gl.canvas;
 
@@ -175,9 +158,6 @@ export class WebGlContextWrapper {
     this.UNSIGNED_SHORT = gl.UNSIGNED_SHORT;
     this.ONE = gl.ONE;
     this.ONE_MINUS_SRC_ALPHA = gl.ONE_MINUS_SRC_ALPHA;
-    this.MAX_VERTEX_TEXTURE_IMAGE_UNITS = gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS;
-    this.TRIANGLES = gl.TRIANGLES;
-    this.UNSIGNED_SHORT = gl.UNSIGNED_SHORT;
     this.VERTEX_SHADER = gl.VERTEX_SHADER;
     this.FRAGMENT_SHADER = gl.FRAGMENT_SHADER;
     this.STATIC_DRAW = gl.STATIC_DRAW;
@@ -188,15 +168,6 @@ export class WebGlContextWrapper {
     this.INVALID_ENUM = gl.INVALID_ENUM;
     this.INVALID_OPERATION = gl.INVALID_OPERATION;
   }
-  /**
-   * Returns true if the WebGL context is WebGL2
-   *
-   * @returns
-   */
-  isWebGl2() {
-    return isWebGl2(this.gl);
-  }
-
   /**
    * ```
    * gl.activeTexture(textureUnit + gl.TEXTURE0);
@@ -1109,33 +1080,6 @@ export class WebGlContextWrapper {
     return this.gl.getError();
   }
 
-  /**
-   * ```
-   * gl.createVertexArray();
-   * ```
-   *
-   * @returns
-   */
-  createVertexArray() {
-    if (this.gl instanceof WebGL2RenderingContext) {
-      return this.gl.createVertexArray();
-    }
-    return undefined;
-  }
-
-  /**
-   * ```
-   * gl.bindVertexArray(vertexArray);
-   * ```
-   *
-   * @param vertexArray
-   */
-  bindVertexArray(vertexArray: WebGLVertexArrayObject | null) {
-    if (this.gl instanceof WebGL2RenderingContext) {
-      this.gl.bindVertexArray(vertexArray);
-    }
-  }
-
   /**
    * ```
    * gl.getAttribLocation(program, name);
@@ -1341,19 +1285,6 @@ export class WebGlContextWrapper {
     }
   }
 
-  /**
-   * ```
-   * gl.deleteVertexArray(vertexArray);
-   * ```
-   *
-   * @param vertexArray - The vertex array object to delete
-   */
-  deleteVertexArray(vertexArray: WebGLVertexArrayObject) {
-    if (this.isWebGl2()) {
-      (this.gl as WebGL2RenderingContext).deleteVertexArray(vertexArray);
-    }
-  }
-
   /**
    * Check for WebGL errors and return error information
    * @param operation Description of the operation for error reporting

package/src/core/renderers/CoreRenderer.ts

@@ -10,7 +10,6 @@ export interface CoreRendererOptions {
   stage: Stage;
   canvas: HTMLCanvasElement | OffscreenCanvas;
   contextSpy: ContextSpy | null;
-  forceWebGL2: boolean;
 }
 
 export interface BufferInfo {

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

@@ -14,10 +14,6 @@ import { SdfRenderOp } from './SdfRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
   createIndexBuffer,
-  type CoreWebGlParameters,
-  type CoreWebGlExtensions,
-  getWebGlParameters,
-  getWebGlExtensions,
   type WebGlColor,
 } from './internal/RendererUtils.js';
 import { WebGlCtxTexture } from './WebGlCtxTexture.js';
@@ -51,17 +47,11 @@ const GL_OUT_OF_MEMORY = 0x0505;
  */
 const MAX_DRAINED_GL_ERRORS = 8;
 
-interface CoreWebGlSystem {
-  parameters: CoreWebGlParameters;
-  extensions: CoreWebGlExtensions;
-}
-
 export type WebGlRenderOp = CoreNode | SdfRenderOp;
 
 export class WebGlRenderer extends CoreRenderer {
   //// WebGL Native Context and Data
   glw: WebGlContextWrapper;
-  system: CoreWebGlSystem;
 
   //// Persistent data
   quadBuffer: ArrayBuffer;
@@ -169,17 +159,20 @@ export class WebGlRenderer extends CoreRenderer {
   constructor(options: WebGlRendererOptions) {
     super(options);
 
+    // CPU-side vertex buffers, reused every frame. Their GL buffers and
+    // BufferCollections are wired up below, once the GL context exists.
     this.quadBuffer = new ArrayBuffer(this.stage.options.quadBufferSize);
     this.fQuadBuffer = new Float32Array(this.quadBuffer);
     this.uiQuadBuffer = new Uint32Array(this.quadBuffer);
 
+    // Shared SDF vertex buffer: 512 KB for ~3600 glyphs.
+    this.sdfBuffer = new ArrayBuffer(512 * 1024);
+    this.fSdfBuffer = new Float32Array(this.sdfBuffer);
+    this.uiSdfBuffer = new Uint32Array(this.sdfBuffer);
+
     this.mode = 'webgl';
 
-    const gl = createWebGLContext(
-      options.canvas,
-      options.forceWebGL2,
-      options.contextSpy,
-    );
+    const gl = createWebGLContext(options.canvas, options.contextSpy);
     const glw = (this.glw = new WebGlContextWrapper(gl));
     glw.viewport(0, 0, options.canvas.width, options.canvas.height);
 
@@ -192,11 +185,6 @@ export class WebGlRenderer extends CoreRenderer {
 
     createIndexBuffer(glw, this.stage.bufferMemory);
 
-    this.system = {
-      parameters: getWebGlParameters(this.glw),
-      extensions: getWebGlExtensions(this.glw),
-    };
-
     // Create the static node coords buffer
     // 80 is the magic number used in createIndexBuffer
     // @see RendererUtils.ts
@@ -261,13 +249,8 @@ export class WebGlRenderer extends CoreRenderer {
         },
       },
     ]);
-    // --- Shared SDF buffer ---------------------------------------------------
-    // Allocate 512 KB for SDF vertex data (~3600 glyphs).
-    const sdfBufSize = 512 * 1024;
-    this.sdfBuffer = new ArrayBuffer(sdfBufSize);
-    this.fSdfBuffer = new Float32Array(this.sdfBuffer);
-    this.uiSdfBuffer = new Uint32Array(this.sdfBuffer);
 
+    // --- Shared SDF buffer collection (CPU buffer allocated above) ----------
     const sdfWebGlBuffer = glw.createBuffer();
     const sdfStride = 6 * Float32Array.BYTES_PER_ELEMENT; // 24 bytes
     this.sdfQuadBufferCollection = new BufferCollection([
@@ -661,7 +644,8 @@ export class WebGlRenderer extends CoreRenderer {
    * SdfRenderOp, resulting in one draw call for many text nodes.
    */
   addSdfQuads(
-    glyphs: import('../../text-rendering/TextRenderer.js').GlyphLayout[],
+    glyphs: Float32Array,
+    glyphCount: number,
     fontScale: number,
     transform: Float32Array,
     color: number,
@@ -677,7 +661,6 @@ export class WebGlRenderer extends CoreRenderer {
       | null,
     sdfShader: WebGlShaderNode,
   ): void {
-    const glyphCount = glyphs.length;
     if (glyphCount === 0) {
       return;
     }
@@ -713,20 +696,21 @@ export class WebGlRenderer extends CoreRenderer {
     // Record start quad for this batch segment
     const startQuad = this.sdfQuadCount;
 
+    // Read packed glyph fields directly from the Float32Array (stride = 8).
+    let go = 0;
     for (let gi = 0; gi < glyphCount; gi++) {
-      const glyph = glyphs[gi]!;
-
       // Glyph corners in design units
-      const gx1 = glyph.x;
-      const gy1 = glyph.y;
-      const gx2 = gx1 + glyph.width;
-      const gy2 = gy1 + glyph.height;
+      const gx1 = glyphs[go]!;
+      const gy1 = glyphs[go + 1]!;
+      const gx2 = gx1 + glyphs[go + 2]!;
+      const gy2 = gy1 + glyphs[go + 3]!;
 
       // Atlas UVs
-      const u1 = glyph.atlasX;
-      const v1 = glyph.atlasY;
-      const u2 = u1 + glyph.atlasWidth;
-      const v2 = v1 + glyph.atlasHeight;
+      const u1 = glyphs[go + 4]!;
+      const v1 = glyphs[go + 5]!;
+      const u2 = u1 + glyphs[go + 6]!;
+      const v2 = v1 + glyphs[go + 7]!;
+      go += 8;
 
       // Transform to world space
       // Note: we use gx/y directly since m0,m1,m3,m4 are already pre-scaled

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

@@ -21,11 +21,11 @@ export type ShaderSource<T> =
 export type WebGlShaderType<T extends object = Record<string, unknown>> =
   CoreShaderType<T> & {
     /**
-     * fragment shader source for WebGl or WebGl2
+     * fragment shader source for WebGl
      */
     fragment: ShaderSource<T>;
     /**
-     * vertex shader source for WebGl or WebGl2
+     * vertex shader source for WebGl
      */
     vertex?: ShaderSource<T>;
     /**
@@ -43,7 +43,6 @@ export type WebGlShaderType<T extends object = Record<string, unknown>> =
      * extensions required for specific shader?
      */
     webgl1Extensions?: string[];
-    webgl2Extensions?: string[];
     supportsIndexedTextures?: boolean;
   };
 

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

@@ -19,13 +19,6 @@ import { CoreNode } from '../../CoreNode.js';
 
 export class WebGlShaderProgram implements CoreShaderProgram {
   protected program: WebGLProgram | null;
-  /**
-   * Vertex Array Object
-   *
-   * @remarks
-   * Used by WebGL2 Only
-   */
-  protected vao: WebGLVertexArrayObject | undefined;
   protected renderer: WebGlRenderer;
   protected glw: WebGlContextWrapper;
   protected attributeLocations: string[];
@@ -45,22 +38,15 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     this.renderer = renderer;
     const glw = (this.glw = renderer.glw);
 
-    // Check that extensions are supported
-    const webGl2 = glw.isWebGl2();
-    let requiredExtensions: string[] = [];
-
     this.supportsIndexedTextures =
       config.supportsIndexedTextures || this.supportsIndexedTextures;
-    requiredExtensions =
-      (webGl2 && config.webgl2Extensions) ||
-      (!webGl2 && config.webgl1Extensions) ||
-      [];
 
-    const glVersion = webGl2 ? '2.0' : '1.0';
+    // Check that required extensions are supported
+    const requiredExtensions = config.webgl1Extensions || [];
     requiredExtensions.forEach((extensionName) => {
       if (!glw.getExtension(extensionName)) {
         throw new Error(
-          `Shader "${this.constructor.name}" requires extension "${extensionName}" for WebGL ${glVersion} but wasn't found`,
+          `Shader "${this.constructor.name}" requires extension "${extensionName}" for WebGL 1.0 but wasn't found`,
         );
       }
     });
@@ -310,9 +296,6 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       return;
     }
     this.glw.useProgram(this.program, this.uniformLocations!);
-    if (this.glw.isWebGl2() && this.vao) {
-      this.glw.bindVertexArray(this.vao);
-    }
   }
 
   detach(): void {

package/src/core/renderers/webgl/internal/RendererUtils.ts

@@ -1,92 +1,5 @@
 import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
 
-export interface CoreWebGlParameters {
-  MAX_RENDERBUFFER_SIZE: number;
-  MAX_TEXTURE_SIZE: number;
-  MAX_VIEWPORT_DIMS: Int32Array;
-  MAX_VERTEX_TEXTURE_IMAGE_UNITS: number;
-  MAX_TEXTURE_IMAGE_UNITS: number;
-  MAX_COMBINED_TEXTURE_IMAGE_UNITS: number;
-  MAX_VERTEX_ATTRIBS: number;
-  MAX_VARYING_VECTORS: number;
-  MAX_VERTEX_UNIFORM_VECTORS: number;
-  MAX_FRAGMENT_UNIFORM_VECTORS: number;
-}
-
-/**
- * Get device specific webgl parameters
- * @param glw
- */
-export function getWebGlParameters(
-  glw: WebGlContextWrapper,
-): CoreWebGlParameters {
-  const params: CoreWebGlParameters = {
-    MAX_RENDERBUFFER_SIZE: 0,
-    MAX_TEXTURE_SIZE: 0,
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
-    MAX_VIEWPORT_DIMS: 0 as any, // Code below will replace this with an Int32Array
-    MAX_VERTEX_TEXTURE_IMAGE_UNITS: 0,
-    MAX_TEXTURE_IMAGE_UNITS: 0,
-    MAX_COMBINED_TEXTURE_IMAGE_UNITS: 0,
-    MAX_VERTEX_ATTRIBS: 0,
-    MAX_VARYING_VECTORS: 0,
-    MAX_VERTEX_UNIFORM_VECTORS: 0,
-    MAX_FRAGMENT_UNIFORM_VECTORS: 0,
-  };
-
-  // Map over all parameters and get them
-  const keys = Object.keys(params) as Array<keyof CoreWebGlParameters>;
-  keys.forEach((key) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    params[key] = glw.getParameter(glw[key]);
-  });
-
-  return params;
-}
-
-export interface CoreWebGlExtensions {
-  ANGLE_instanced_arrays: ANGLE_instanced_arrays | null;
-  WEBGL_compressed_texture_s3tc: WEBGL_compressed_texture_s3tc | null;
-  WEBGL_compressed_texture_astc: WEBGL_compressed_texture_astc | null;
-  WEBGL_compressed_texture_etc: WEBGL_compressed_texture_etc | null;
-  WEBGL_compressed_texture_etc1: WEBGL_compressed_texture_etc1 | null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  WEBGL_compressed_texture_pvrtc: any | null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  WEBKIT_WEBGL_compressed_texture_pvrtc: any | null;
-  WEBGL_compressed_texture_s3tc_srgb: WEBGL_compressed_texture_s3tc_srgb | null;
-  OES_vertex_array_object: OES_vertex_array_object | null;
-}
-
-/**
- * Get device webgl extensions
- * @param glw
- */
-export function getWebGlExtensions(
-  glw: WebGlContextWrapper,
-): CoreWebGlExtensions {
-  const extensions: CoreWebGlExtensions = {
-    ANGLE_instanced_arrays: null,
-    WEBGL_compressed_texture_s3tc: null,
-    WEBGL_compressed_texture_astc: null,
-    WEBGL_compressed_texture_etc: null,
-    WEBGL_compressed_texture_etc1: null,
-    WEBGL_compressed_texture_pvrtc: null,
-    WEBKIT_WEBGL_compressed_texture_pvrtc: null,
-    WEBGL_compressed_texture_s3tc_srgb: null,
-    OES_vertex_array_object: null,
-  };
-
-  // Map over all extensions and get them
-  const keys = Object.keys(extensions) as Array<keyof CoreWebGlExtensions>;
-  keys.forEach((key) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    extensions[key] = glw.getExtension(key);
-  });
-
-  return extensions;
-}
-
 /**
  * Allocate big memory chunk that we
  * can re-use to draw quads

package/src/core/renderers/webgl/internal/ShaderUtils.ts

@@ -85,7 +85,6 @@ export interface ShaderOptions {
   shaderSources?: ShaderProgramSources;
   supportsIndexedTextures?: boolean;
   webgl1Extensions?: string[];
-  webgl2Extensions?: string[];
 }
 
 // prettier-ignore

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

@@ -19,12 +19,6 @@ interface CanvasFont {
   metrics?: FontMetrics;
 }
 
-/**
- * Global font set regardless of if run in the main thread or a web worker
- */
-// const globalFontSet: FontFaceSet = (resolvedGlobal.document?.fonts ||
-//   (resolvedGlobal as unknown as { fonts: FontFaceSet }).fonts) as FontFaceSet;
-
 // Global state variables for fontHandler
 const fontFamilies: Record<string, FontFace> = {};
 const fontLoadPromises = new Map<string, Promise<void>>();

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

@@ -131,3 +131,20 @@ describe('SdfTextRenderer layout cache', () => {
     expect(SdfFontHandler.getFontData).toHaveBeenCalledTimes(0);
   });
 });
+
+describe('SdfTextRenderer lazy shader compile', () => {
+  it('registers the SDF shader at init but defers compilation', () => {
+    const shManager = {
+      registerShaderType: vi.fn(),
+      createShader: vi.fn(() => ({})),
+    };
+    const fakeStage = { options: { textLayoutCacheSize: 10 }, shManager };
+
+    SdfTextRenderer.init(fakeStage as never);
+
+    // Registration is cheap and stays at boot; the expensive compile + link is
+    // deferred until the first SDF glyph actually renders (see getSdfShader).
+    expect(shManager.registerShaderType).toHaveBeenCalledTimes(1);
+    expect(shManager.createShader).not.toHaveBeenCalled();
+  });
+});

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

@@ -14,7 +14,7 @@ import { Sdf } from '../shaders/webgl/SdfShader.js';
 import type { WebGlCtxTexture } from '../renderers/webgl/WebGlCtxTexture.js';
 import type { WebGlShaderNode } from '../renderers/webgl/WebGlShaderNode.js';
 import { isProductionEnvironment } from '../../utils.js';
-import type { TextLayout, GlyphLayout } from './TextRenderer.js';
+import { SDF_GLYPH_STRIDE, type TextLayout } from './TextRenderer.js';
 import { mapTextLayout } from './TextLayoutEngine.js';
 import type { RectWithValid } from '../lib/utils.js';
 import type { Dimensions } from '../../common/CommonTypes.js';
@@ -38,9 +38,27 @@ const init = (stage: Stage): void => {
     maxLayoutCacheSize = configuredCacheSize;
   }
 
-  // Register SDF shader with the shader manager
+  // Register the SDF shader, but defer the (expensive) compile + link until the
+  // first SDF glyph actually renders — see getSdfShader / renderQuads. SDF fonts
+  // load asynchronously, so the first frame almost never needs the shader, and
+  // compiling it during Stage construction sits on the critical path to first
+  // paint for no benefit.
   stage.shManager.registerShaderType('Sdf', Sdf);
-  sdfShader = stage.shManager.createShader('Sdf') as WebGlShaderNode;
+  sdfShader = null;
+};
+
+/**
+ * Lazily compile (and memoize) the SDF shader on first use.
+ *
+ * @remarks
+ * The shader program is compiled and linked the first time an SDF glyph is
+ * actually drawn, not at boot. Subsequent calls return the cached node.
+ */
+const getSdfShader = (stage: Stage): WebGlShaderNode => {
+  if (sdfShader === null) {
+    sdfShader = stage.shManager.createShader('Sdf') as WebGlShaderNode;
+  }
+  return sdfShader;
 };
 
 const font: FontHandler = SdfFontHandler;
@@ -141,6 +159,8 @@ const renderQuads = (
   const webGlRenderer = renderer as WebGlRenderer;
   const cache = renderProps.sdfCache;
   const ctxTexture = atlasTexture.ctxTexture as WebGlCtxTexture;
+  // Compiles on the first real SDF draw; cheap memoized lookup thereafter.
+  const shader = getSdfShader(webGlRenderer.stage);
 
   // --- Cache-hit fast path ------------------------------------------------
   if (cache !== undefined && cache.vertices !== null) {
@@ -167,7 +187,7 @@ const renderQuads = (
         layout.height,
         renderProps.parentHasRenderTexture,
         renderProps.framebufferDimensions,
-        sdfShader!,
+        shader,
       );
       return null;
     }
@@ -177,6 +197,7 @@ const renderQuads = (
   const startIdx = webGlRenderer.sdfBufferIdx;
   webGlRenderer.addSdfQuads(
     layout.glyphs,
+    layout.glyphCount,
     layout.fontScale,
     renderProps.globalTransform,
     renderProps.color,
@@ -189,7 +210,7 @@ const renderQuads = (
     layout.height,
     renderProps.parentHasRenderTexture,
     renderProps.framebufferDimensions,
-    sdfShader!,
+    shader,
   );
 
   // Snapshot the written vertex data into the cache for future frames
@@ -201,7 +222,7 @@ const renderQuads = (
         cache.vertices = new Float32Array(len);
       }
       cache.vertices.set(webGlRenderer.fSdfBuffer.subarray(startIdx, endIdx));
-      cache.glyphCount = layout.glyphs.length;
+      cache.glyphCount = layout.glyphCount;
       cache.color = renderProps.color;
       cache.alpha = renderProps.worldAlpha;
       cache.layoutRef = layout;
@@ -283,7 +304,19 @@ const generateTextLayout = (
 
   const lineAmount = lines.length;
 
-  const glyphs: GlyphLayout[] = [];
+  // Upper bound on glyph slots = total chars across all lines. Surrogate pairs
+  // and skipped codepoints (zero-width / missing) may leave the tail of this
+  // buffer unused; the real count is tracked in `glyphCount`.
+  let maxGlyphs = 0;
+  for (let i = 0; i < lineAmount; i++) {
+    maxGlyphs += (lines[i] as TextLineStruct)[0].length;
+  }
+
+  // Packed glyph buffer: SDF_GLYPH_STRIDE floats per glyph. One Float32Array
+  // replaces what used to be one object literal per glyph.
+  const glyphs = new Float32Array(maxGlyphs * SDF_GLYPH_STRIDE);
+  let glyphIdx = 0;
+  let glyphCount = 0;
   let currentX = 0;
   let baselineY = 0;
   for (let i = 0; i < lineAmount; i++) {
@@ -341,18 +374,16 @@ const generateTextLayout = (
       // BMFont line-box top; subtracting atlasBase re-anchors it relative to
       // the alphabetic baseline so fonts with different BMFont 'base' values
       // share the same on-screen baseline.
-      const glyphLayout: GlyphLayout = {
-        x: currentX + glyph.xoffset,
-        y: baselineY + glyph.yoffset - atlasBase,
-        width: glyph.width,
-        height: glyph.height,
-        atlasX: glyph.x * invAtlasWidth,
-        atlasY: glyph.y * invAtlasHeight,
-        atlasWidth: glyph.width * invAtlasWidth,
-        atlasHeight: glyph.height * invAtlasHeight,
-      };
-
-      glyphs.push(glyphLayout);
+      glyphs[glyphIdx] = currentX + glyph.xoffset;
+      glyphs[glyphIdx + 1] = baselineY + glyph.yoffset - atlasBase;
+      glyphs[glyphIdx + 2] = glyph.width;
+      glyphs[glyphIdx + 3] = glyph.height;
+      glyphs[glyphIdx + 4] = glyph.x * invAtlasWidth;
+      glyphs[glyphIdx + 5] = glyph.y * invAtlasHeight;
+      glyphs[glyphIdx + 6] = glyph.width * invAtlasWidth;
+      glyphs[glyphIdx + 7] = glyph.height * invAtlasHeight;
+      glyphIdx += SDF_GLYPH_STRIDE;
+      glyphCount++;
 
       // Advance position with letter spacing (in design units)
       currentX += glyph.xadvance + letterSpacing;
@@ -363,6 +394,7 @@ const generateTextLayout = (
   // Convert final dimensions to pixel space for the layout
   return {
     glyphs,
+    glyphCount,
     distanceRange: fontScale * fontData.distanceField.distanceRange,
     width: effectiveWidth * fontScale,
     height: effectiveHeight,