@lightningjs/renderer 3.0.3 → 3.0.5

package/src/core/CoreTextNode.test.ts

@@ -319,8 +319,30 @@ describe('CoreTextNode', () => {
     });
   }
 
+  function createSdfRenderInfo() {
+    return {
+      type: 'sdf' as const,
+      width: 100,
+      height: 20,
+      atlasTexture: {} as any,
+      layout: {
+        glyphCount: 1,
+        width: 100,
+        height: 20,
+        fontScale: 1,
+        lineHeight: 20,
+        fontFamily: 'Arial',
+        distanceRange: 4,
+        vertexBuffer: new Float32Array([0, 0, 0, 0, 10, 0, 1, 0]),
+        truncatedTextLines: 0,
+      },
+      hasRemainingText: false,
+      remainingLines: 0,
+    };
+  }
+
   describe('updateRenderState – SDF buffer release on OutOfBounds', () => {
-    it('should call renderer.deleteBuffer and clear _sdfBufferRef when transitioning to OutOfBounds', () => {
+    it('should call renderer.deleteBuffer and clear _sdfBuffer when transitioning to OutOfBounds', () => {
       const deleteBuffer = vi.fn();
       const node = new CoreTextNode(
         makeStageWithDeleteBuffer(deleteBuffer),
@@ -328,17 +350,17 @@ describe('CoreTextNode', () => {
         mockTextRenderer,
       );
 
-      // Simulate a live WebGLBuffer sitting in the ref
       const fakeBuffer = {};
-      (node as any)._sdfBufferRef.current = fakeBuffer;
+      (node as any)._sdfBuffer = fakeBuffer;
+      (node as any)._renderInfo = createSdfRenderInfo();
 
       node.updateRenderState(CoreNodeRenderState.OutOfBounds);
 
       expect(deleteBuffer).toHaveBeenCalledWith(fakeBuffer);
-      expect((node as any)._sdfBufferRef.current).toBeNull();
+      expect((node as any)._sdfBuffer).toBeNull();
     });
 
-    it('should not call renderer.deleteBuffer when _sdfBufferRef is already null', () => {
+    it('should not call renderer.deleteBuffer when _sdfBuffer is already null', () => {
       const deleteBuffer = vi.fn();
       const node = new CoreTextNode(
         makeStageWithDeleteBuffer(deleteBuffer),
@@ -346,7 +368,7 @@ describe('CoreTextNode', () => {
         mockTextRenderer,
       );
 
-      // _sdfBufferRef.current is null by default
+      (node as any)._renderInfo = createSdfRenderInfo();
       node.updateRenderState(CoreNodeRenderState.OutOfBounds);
 
       expect(deleteBuffer).not.toHaveBeenCalled();
@@ -361,12 +383,13 @@ describe('CoreTextNode', () => {
       );
 
       const fakeBuffer = {};
-      (node as any)._sdfBufferRef.current = fakeBuffer;
+      (node as any)._sdfBuffer = fakeBuffer;
+      (node as any)._renderInfo = createSdfRenderInfo();
 
       node.updateRenderState(CoreNodeRenderState.InBounds);
 
       expect(deleteBuffer).not.toHaveBeenCalled();
-      expect((node as any)._sdfBufferRef.current).toBe(fakeBuffer);
+      expect((node as any)._sdfBuffer).toBe(fakeBuffer);
     });
 
     it('should not release the buffer for a canvas-type text node', () => {
@@ -382,7 +405,14 @@ describe('CoreTextNode', () => {
         canvasTextRenderer,
       );
 
-      (node as any)._sdfBufferRef.current = {};
+      (node as any)._renderInfo = {
+        type: 'canvas',
+        width: 100,
+        height: 20,
+        imageData: {} as ImageData,
+        hasRemainingText: false,
+        remainingLines: 0,
+      };
 
       node.updateRenderState(CoreNodeRenderState.OutOfBounds);
 
@@ -401,12 +431,12 @@ describe('CoreTextNode', () => {
       );
 
       const fakeBuffer = {} as WebGLBuffer;
-      (node as any)._sdfBufferRef.current = fakeBuffer;
+      (node as any)._sdfBuffer = fakeBuffer;
 
       node.update(16, clippingRect);
 
       expect(deleteBuffer).toHaveBeenCalledWith(fakeBuffer);
-      expect((node as any)._sdfBufferRef.current).toBeNull();
+      expect((node as any)._sdfBuffer).toBeNull();
     });
 
     it('should call renderer.deleteBuffer again on each subsequent layout regeneration', () => {
@@ -424,12 +454,12 @@ describe('CoreTextNode', () => {
       // Trigger a second layout pass by invalidating the layout
       node.fontSize = 24;
       const secondBuffer = {} as WebGLBuffer;
-      (node as any)._sdfBufferRef.current = secondBuffer;
+      (node as any)._sdfBuffer = secondBuffer;
 
       node.update(16, clippingRect);
 
       expect(deleteBuffer).toHaveBeenCalledWith(secondBuffer);
-      expect((node as any)._sdfBufferRef.current).toBeNull();
+      expect((node as any)._sdfBuffer).toBeNull();
     });
 
     it('should not call renderer.deleteBuffer when buffer is already null at regeneration time', () => {
@@ -441,7 +471,7 @@ describe('CoreTextNode', () => {
         mockTextRenderer,
       );
 
-      // _sdfBufferRef.current is null by default
+      // _sdfBuffer is null by default
       node.update(16, clippingRect);
 
       expect(deleteBuffer).not.toHaveBeenCalled();
@@ -460,14 +490,14 @@ describe('CoreTextNode', () => {
 
       // Prime the node with a cached buffer
       const fakeBuffer = {} as WebGLBuffer;
-      (node as any)._sdfBufferRef.current = fakeBuffer;
+      (node as any)._sdfBuffer = fakeBuffer;
       (node as any)._layoutGenerated = true;
 
       node.text = '';
       node.update(16, clippingRect);
 
       expect(deleteBuffer).toHaveBeenCalledWith(fakeBuffer);
-      expect((node as any)._sdfBufferRef.current).toBeNull();
+      expect((node as any)._sdfBuffer).toBeNull();
     });
 
     it('should not call renderer.deleteBuffer when text is invalid and buffer is already null', () => {
@@ -484,7 +514,7 @@ describe('CoreTextNode', () => {
       expect(deleteBuffer).not.toHaveBeenCalled();
     });
 
-    it('should also clear _cachedLayout when text becomes invalid', () => {
+    it('should also clear _renderInfo when text becomes invalid', () => {
       const deleteBuffer = vi.fn();
       const props = { ...defaultTextProps, text: 'Hello', forceLoad: true };
       const node = new CoreTextNode(
@@ -493,13 +523,12 @@ describe('CoreTextNode', () => {
         mockTextRenderer,
       );
 
-      (node as any)._cachedLayout = {};
-      (node as any)._layoutGenerated = true;
+      (node as any)._renderInfo = createSdfRenderInfo();
 
       node.text = '';
       node.update(16, clippingRect);
 
-      expect((node as any)._cachedLayout).toBeNull();
+      expect((node as any)._renderInfo).toBeNull();
     });
   });
 
@@ -513,12 +542,12 @@ describe('CoreTextNode', () => {
       );
 
       const fakeBuffer = {} as WebGLBuffer;
-      (node as any)._sdfBufferRef.current = fakeBuffer;
+      (node as any)._sdfBuffer = fakeBuffer;
 
       node.destroy();
 
       expect(deleteBuffer).toHaveBeenCalledWith(fakeBuffer);
-      expect((node as any)._sdfBufferRef.current).toBeNull();
+      expect((node as any)._sdfBuffer).toBeNull();
     });
 
     it('should not call renderer.deleteBuffer on destroy when buffer is already null', () => {
@@ -535,14 +564,98 @@ describe('CoreTextNode', () => {
       expect(deleteBuffer).not.toHaveBeenCalled();
     });
 
-    it('should clear _cachedLayout on destroy', () => {
+    it('should clear _renderInfo on destroy', () => {
       const node = new CoreTextNode(stage, defaultTextProps, mockTextRenderer);
 
-      (node as any)._cachedLayout = {};
+      (node as any)._renderInfo = createSdfRenderInfo();
 
       node.destroy();
 
-      expect((node as any)._cachedLayout).toBeNull();
+      expect((node as any)._renderInfo).toBeNull();
+    });
+  });
+
+  describe('SDF render path', () => {
+    it('reuses the uploaded SDF buffer across renderQuads calls', () => {
+      const createBuffer = vi.fn().mockReturnValue({ label: 'sdf-buffer' });
+      const arrayBufferData = vi.fn();
+      const glw = {
+        createBuffer,
+        arrayBufferData,
+        STATIC_DRAW: 0x88e4,
+        FLOAT: 0x1406,
+      };
+      const sdfStage = mock<Stage>({
+        strictBound: createBound(0, 0, 1920, 1080),
+        preloadBound: createBound(0, 0, 1920, 1080),
+        defaultTexture: { state: 'loaded' },
+        renderer: { glw } as unknown as CoreRenderer,
+      });
+      const node = new CoreTextNode(
+        sdfStage,
+        defaultTextProps,
+        mockTextRenderer,
+      );
+      const transform = new Float32Array([1, 0, 0, 1, 0, 0]);
+
+      (node as any).handleRenderResult(createSdfRenderInfo());
+      (node as any).globalTransform = {
+        getFloatArr: vi.fn().mockReturnValue(transform),
+      };
+
+      node.renderQuads(sdfStage.renderer);
+      node.renderQuads(sdfStage.renderer);
+
+      expect(createBuffer).toHaveBeenCalledTimes(1);
+      expect(arrayBufferData).toHaveBeenCalledTimes(1);
+      expect(mockTextRenderer.renderQuads).toHaveBeenCalledTimes(2);
+      expect((node as any)._sdfBuffer).toEqual({ label: 'sdf-buffer' });
+      expect(node.sdfShaderProps.transform).toBe(transform);
+    });
+
+    it('uses framebuffer-relative scissor coordinates for RTT draws', () => {
+      const bindRenderOp = vi.fn();
+      const useShader = vi.fn();
+      const setScissorTest = vi.fn();
+      const scissor = vi.fn();
+      const drawArrays = vi.fn();
+      const sdfStage = mock<Stage>({
+        strictBound: createBound(0, 0, 1920, 1080),
+        preloadBound: createBound(0, 0, 1920, 1080),
+        defaultTexture: { state: 'loaded' },
+        pixelRatio: 2,
+        platform: { canvas: { width: 1920, height: 1080 } } as any,
+        shManager: { useShader } as any,
+      });
+      const node = new CoreTextNode(
+        sdfStage,
+        defaultTextProps,
+        mockTextRenderer,
+      );
+      const shader = { program: { bindRenderOp } };
+
+      node.props.shader = shader as any;
+      node.numQuads = 2;
+      node.clippingRect = { x: 10, y: 20, w: 30, h: 40, valid: true };
+      node.parentHasRenderTexture = true;
+      node.rttParent = { framebufferDimensions: { w: 320, h: 180 } } as any;
+      node.props.h = 25;
+
+      node.draw({
+        glw: {
+          TRIANGLES: 4,
+          setScissorTest,
+          scissor,
+          drawArrays,
+        },
+        stage: sdfStage,
+      } as any);
+
+      expect(useShader).toHaveBeenCalledWith(shader.program);
+      expect(bindRenderOp).toHaveBeenCalledWith(node);
+      expect(setScissorTest).toHaveBeenCalledWith(true);
+      expect(scissor).toHaveBeenCalledWith(10, 155, 30, 40);
+      expect(drawArrays).toHaveBeenCalledWith(4, 0, 12);
     });
   });
 });

package/src/core/CoreTextNode.ts

@@ -21,7 +21,6 @@ import type {
   FontHandler,
   TextRenderer,
   TrProps,
-  TextLayout,
   TextRenderInfo,
 } from './text-rendering/TextRenderer.js';
 import {
@@ -40,6 +39,11 @@ import type { RectWithValid } from './lib/utils.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import type { TextureLoadedEventHandler } from './textures/Texture.js';
 import { Matrix3d } from './lib/Matrix3d.js';
+import { BufferCollection } from './renderers/webgl/internal/BufferCollection.js';
+import type { SdfShaderProps } from './shaders/webgl/SdfShader.js';
+import type { WebGlRenderer } from './renderers/webgl/WebGlRenderer.js';
+import type { WebGlCtxTexture } from './renderers/webgl/WebGlCtxTexture.js';
+import { mergeColorAlpha } from '../utils.js';
 export interface CoreTextNodeProps extends CoreNodeProps, TrProps {
   /**
    * Force Text Node to use a specific Text Renderer
@@ -63,21 +67,14 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
   private _waitingForFont = false;
   private _containType: TextConstraint = TextConstraint.none;
 
-  // SDF layout caching for performance
-  private _cachedLayout: TextLayout | null = null;
-  // Mutable ref box shared with SdfTextRenderer so the renderer can write the
-  // created WebGLBuffer back into it, allowing reuse across frames.
-  private _sdfBufferRef: { current: WebGLBuffer | null } = { current: null };
+  private _sdfBuffer: WebGLBuffer | null = null;
+  private _sdfQuadCollection: BufferCollection | null = null;
+  private _sdfShaderProps: Partial<SdfShaderProps> | null = null;
 
   // Text renderer properties - stored directly on the node
-  private textProps: CoreTextNodeProps;
+  textProps: CoreTextNodeProps;
 
-  private _renderInfo: TextRenderInfo = {
-    width: 0,
-    height: 0,
-  };
-
-  private _type: 'sdf' | 'canvas' = 'sdf'; // Default to SDF renderer
+  private _renderInfo: TextRenderInfo | null = null;
 
   constructor(
     stage: Stage,
@@ -87,7 +84,6 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     super(stage, props);
     this.textRenderer = textRenderer;
     this.fontHandler = textRenderer.font;
-    this._type = textRenderer.type;
 
     // Initialize text properties from props
     // Props are guaranteed to have all defaults resolved by Stage.createTextNode
@@ -121,10 +117,11 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
    * Safe to call from destroy() or on text change.
    */
   private releaseSdfBuffer(): void {
-    const buf = this._sdfBufferRef.current;
+    const buf = this._sdfBuffer;
     if (buf === null) return;
     this.stage.renderer.deleteBuffer(buf);
-    this._sdfBufferRef.current = null;
+    this._sdfBuffer = null;
+    this._sdfQuadCollection = null;
   }
 
   allowTextGeneration() {
@@ -221,7 +218,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     ) {
       if (this.fontHandler.isFontLoaded(this.textProps.fontFamily) === true) {
         this._waitingForFont = false;
-        this._cachedLayout = null; // Invalidate cached layout
+        this._renderInfo = null; // Clear any previous render info before generating new layout
         this.releaseSdfBuffer(); // Free the cached WebGLBuffer
         const resp = this.textRenderer.renderText(this.textProps);
         this.handleRenderResult(resp);
@@ -236,7 +233,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
       // If text is invalid, ensure node is not renderable
       this.setRenderable(false);
       this._layoutGenerated = false;
-      this._cachedLayout = null;
+      this._renderInfo = null;
       this.releaseSdfBuffer(); // Free the cached WebGLBuffer
     }
 
@@ -251,19 +248,19 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     // Guard: Text nodes are never renderable without valid text
     const hasValidText =
       typeof this.textProps.text === 'string' && this.textProps.text.length > 0;
-    if (hasValidText === false) {
+
+    const renderInfo = this._renderInfo;
+    if (hasValidText === false || renderInfo === null) {
       this.setRenderable(false);
       return;
     }
 
     // SDF text nodes are always renderable if they have a valid layout
-    if (this._type === 'canvas') {
+    if (renderInfo.type === 'canvas') {
       super.updateIsRenderable();
       return;
     }
-
-    // For SDF, check if we have a cached layout
-    this.setRenderable(this._cachedLayout !== null);
+    this.setRenderable(true);
   }
 
   /**
@@ -271,10 +268,19 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
    */
   private handleRenderResult(result: TextRenderInfo): void {
     // Host paths on top
-    const textRendererType = this._type;
+    const textRendererType = result.type;
     let width = result.width;
     let height = result.height;
 
+    // Handle zero-dimension case (can happen with certain text inputs or font issues)
+    if (width === 0 || height === 0) {
+      this.emit('failed', {
+        type: 'text',
+        error: new Error('Text rendering failed, width or height zero'),
+      } satisfies NodeTextFailedPayload);
+      return;
+    }
+
     // Handle Canvas renderer (uses ImageData)
     if (textRendererType === 'canvas') {
       if (result.imageData === undefined) {
@@ -291,6 +297,9 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         premultiplyAlpha: true,
         src: result.imageData as ImageData,
       });
+
+      this.props.w = width;
+      this.props.h = height;
       // It isn't renderable until the texture is loaded we have to set it to false here to avoid it
       // being detected as a renderable default color node in the next frame
       // it will be corrected once the texture is loaded
@@ -300,25 +309,31 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         // We do want the texture to load immediately
         this.texture.setRenderableOwner(this._id, true);
       }
-    }
+    } else {
+      const layout = result.layout;
+      // For SDF, we rely on the presence of a valid layout to determine renderability
+      if (layout === undefined) {
+        this.emit('failed', {
+          type: 'text',
+          error: new Error(
+            'SDF text rendering failed, no layout data returned',
+          ),
+        } satisfies NodeTextFailedPayload);
+        return;
+      }
 
-    // Handle zero-dimension case (can happen with certain text inputs or font issues)
-    if (width === 0 || height === 0) {
-      this.emit('failed', {
-        type: 'text',
-        error: new Error('Text rendering failed, width or height zero'),
-      } satisfies NodeTextFailedPayload);
-      return;
-    }
+      this.props.w = width;
+      this.props.h = height;
+      this.setUpdateType(UpdateType.Local);
+      this.setRenderable(true);
+      this.numQuads = layout.glyphCount;
 
-    this._cachedLayout = result.layout || null;
-    this.props.w = width;
-    this.props.h = height;
+      this._sdfShaderProps = {
+        size: layout.fontScale,
+        distanceRange: layout.distanceRange,
+      };
 
-    // Handle SDF renderer (uses layout caching)
-    if (textRendererType === 'sdf') {
-      this.setRenderable(true);
-      this.setUpdateType(UpdateType.Local);
+      this.renderOpTextures = [result.atlasTexture as WebGlCtxTexture];
     }
 
     this._renderInfo = result;
@@ -327,6 +342,8 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
 
   // Reusable bound method for emitting loaded event
   private emitTextLoadedEvent = () => {
+    if (this._renderInfo === null) return; // Guard against unexpected null
+
     this.emit('loaded', {
       type: 'text',
       dimensions: {
@@ -346,42 +363,68 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
         return;
     }
 
-    // Canvas renderer: use standard texture rendering via CoreNode
-    if (this._type === 'canvas') {
-      super.renderQuads(renderer);
+    // Early return if no renderInfo
+    if (this._renderInfo === null) {
       return;
     }
 
-    // Early return if no cached data
-    if (this._cachedLayout === null) {
+    // Canvas renderer: use standard texture rendering via CoreNode
+    if (this._renderInfo.type === 'canvas') {
+      super.renderQuads(renderer);
       return;
     }
 
-    const props = this.textProps;
-    this.textRenderer.renderQuads(renderer, this._cachedLayout as TextLayout, {
-      fontFamily: this.textProps.fontFamily,
-      fontSize: props.fontSize,
-      color: this.props.color || 0xffffffff,
-      offsetY: props.offsetY,
-      worldAlpha: this.worldAlpha,
-      globalTransform: this.globalTransform!.getFloatArr(),
-      clippingRect: this.clippingRect,
-      width: this.props.w,
-      height: this.props.h,
-      parentHasRenderTexture: this.parentHasRenderTexture,
-      framebufferDimensions:
-        this.parentHasRenderTexture === true
-          ? this.parentFramebufferDimensions
-          : null,
-      stage: this.stage,
-      glBufferRef: this._sdfBufferRef,
-    });
+    if (this._sdfBuffer === null) {
+      const glw = (this.stage.renderer as WebGlRenderer).glw;
+      this._sdfBuffer = glw.createBuffer();
+      if (this._sdfBuffer === null) {
+        console.error('Failed to create WebGL buffer for SDF text rendering');
+        return;
+      }
+      glw.arrayBufferData(
+        this._sdfBuffer,
+        this._renderInfo.layout.vertexBuffer,
+        glw.STATIC_DRAW,
+      );
+
+      this._sdfQuadCollection = new BufferCollection([
+        {
+          buffer: this._sdfBuffer,
+          attributes: {
+            a_position: {
+              name: 'a_position',
+              size: 2,
+              type: glw.FLOAT as number,
+              normalized: false,
+              stride: 4 * Float32Array.BYTES_PER_ELEMENT,
+              offset: 0,
+            },
+            a_textureCoords: {
+              name: 'a_textureCoords',
+              size: 2,
+              type: glw.FLOAT as number,
+              normalized: false,
+              stride: 4 * Float32Array.BYTES_PER_ELEMENT,
+              offset: 2 * Float32Array.BYTES_PER_ELEMENT,
+            },
+          },
+        },
+      ]);
+    }
+
+    this.sdfShaderProps!.transform = this.globalTransform!.getFloatArr();
+    this.sdfShaderProps!.color = mergeColorAlpha(
+      this.props.color,
+      this.worldAlpha,
+    );
+
+    this.textRenderer.renderQuads(this);
   }
 
   override updateRenderState(renderState: CoreNodeRenderState): void {
     super.updateRenderState(renderState);
     if (
-      this._type === 'sdf' &&
+      this._renderInfo !== null &&
       renderState === CoreNodeRenderState.OutOfBounds
     ) {
       this.releaseSdfBuffer();
@@ -394,7 +437,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     }
 
     // Clear cached layout and vertex buffer
-    this._cachedLayout = null;
+    this._renderInfo = null;
     this.releaseSdfBuffer(); // Delete the cached WebGLBuffer before losing stage ref
 
     this.fontHandler = null!; // Clear reference to avoid memory leaks
@@ -403,6 +446,70 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     super.destroy();
   }
 
+  /**
+   * used in webgl SDF shader to get the quad buffer collection for rendering text quads
+   */
+  override get quadBufferCollection(): BufferCollection {
+    return this._sdfQuadCollection || super.quadBufferCollection;
+  }
+
+  /**
+   * used in webgl SDF shader to get the SDF shader props for rendering text quads
+   */
+  get sdfShaderProps(): SdfShaderProps {
+    return this._sdfShaderProps as SdfShaderProps;
+  }
+
+  override get isSdfRenderOp(): boolean {
+    return this.textRenderer.type === 'sdf';
+  }
+
+  override draw(renderer: WebGlRenderer) {
+    if (this.textRenderer.type === 'canvas') {
+      super.draw(renderer);
+      return;
+    }
+
+    const { glw, stage } = renderer;
+    const canvas = stage.platform!.canvas!;
+    const shader = this.props.shader as any;
+
+    stage.shManager.useShader(shader.program);
+    shader.program.bindRenderOp(this);
+
+    const clippingRect = this.clippingRect;
+
+    // Clipping
+    if (clippingRect.valid === true) {
+      const pixelRatio = this.parentHasRenderTexture ? 1 : stage.pixelRatio;
+
+      const clipX = Math.round(clippingRect.x * pixelRatio);
+      const clipWidth = Math.round(clippingRect.w * pixelRatio);
+      const clipHeight = Math.round(clippingRect.h * pixelRatio);
+      let clipY = Math.round(
+        canvas.height - clipHeight - clippingRect.y * pixelRatio,
+      );
+      // if parent has render texture, we need to adjust the scissor rect
+      // to be relative to the parent's framebuffer
+      if (this.parentHasRenderTexture) {
+        const parentFramebufferDimensions = this.parentFramebufferDimensions;
+        clipY =
+          parentFramebufferDimensions !== null
+            ? parentFramebufferDimensions.h - this.props.h
+            : 0;
+      }
+
+      glw.setScissorTest(true);
+      glw.scissor(clipX, clipY, clipWidth, clipHeight);
+    } else {
+      glw.setScissorTest(false);
+    }
+
+    // SDF rendering uses drawArrays with explicit triangle vertices (6 vertices per quad)
+    // Note: buffers should be bound by bindRenderOp -> bindBufferCollection
+    glw.drawArrays(glw.TRIANGLES, 0, 6 * this.numQuads);
+  }
+
   override set w(value: number) {
     this.maxWidth = value;
   }
@@ -621,7 +728,7 @@ export class CoreTextNode extends CoreNode implements CoreTextNodeProps {
     }
   }
 
-  get renderInfo(): TextRenderInfo {
+  get renderInfo(): TextRenderInfo | null {
     return this._renderInfo;
   }
 }

package/src/core/Stage.ts

@@ -224,6 +224,17 @@ export class Stage {
 
     const renderMode = this.renderer.mode || 'webgl';
 
+    // Canvas2D textures are plain JS heap objects managed by the browser GC.
+    // Threshold-based upload blocking makes no sense for JS heap — disable it
+    // by setting criticalThreshold to 0 while keeping the eviction machinery.
+    if (renderMode === 'canvas') {
+      this.txMemManager.updateSettings({
+        ...textureMemory,
+        criticalThreshold: 0,
+        doNotExceedCriticalThreshold: false,
+      });
+    }
+
     this.createDefaultTexture();
     setPremultiplyMode(renderMode);