@solidtv/renderer 1.5.5 → 1.6.0

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

@@ -0,0 +1,122 @@
+import { describe, expect, it, vi } from 'vitest';
+import { WebGlRenderer } from './WebGlRenderer.js';
+
+/**
+ * Tests for the shader-node batching gate in WebGlRenderer.reuseRenderOp.
+ *
+ * A full renderer needs a live GL context, so the method is exercised on a
+ * minimal fake `this` holding only curRenderOp. Nodes and shader nodes are
+ * plain objects with the fields reuseRenderOp reads.
+ */
+
+const clippingRect = { x: 0, y: 0, w: 0, h: 0, valid: false };
+
+type FakeShaderNode = {
+  shaderKey: string;
+  program: { reuseRenderOp: ReturnType<typeof vi.fn> };
+  uniforms: object;
+  resolvedProps: Record<string, unknown>;
+};
+
+const makeShaderNode = (
+  program: FakeShaderNode['program'],
+  uniforms: object,
+  shaderKey = 'Rounded',
+): FakeShaderNode => ({
+  shaderKey,
+  program,
+  uniforms,
+  resolvedProps: { radius: [16, 16, 16, 16] },
+});
+
+const makeProgram = (batches = true) => ({
+  reuseRenderOp: vi.fn(() => batches),
+});
+
+// Node shape shared by the op anchor and the incoming quad
+const makeNode = (shader: FakeShaderNode) => ({
+  isCoreNode: true,
+  parentHasRenderTexture: false,
+  parentFramebufferDimensions: null,
+  rtt: false,
+  clippingRect,
+  props: { rtt: false, shader },
+  shader,
+});
+
+const reuse = (curRenderOp: unknown, node: unknown): boolean =>
+  WebGlRenderer.prototype.reuseRenderOp.call(
+    { curRenderOp } as WebGlRenderer,
+    node as never,
+  );
+
+describe('WebGlRenderer.reuseRenderOp shader batching', () => {
+  it('rejects when there is no current render op', () => {
+    const shader = makeShaderNode(makeProgram(), {});
+    expect(reuse(null, makeNode(shader))).toBe(false);
+  });
+
+  it('batches two quads using the same shader node', () => {
+    const shader = makeShaderNode(makeProgram(), {});
+
+    expect(reuse(makeNode(shader), makeNode(shader))).toBe(true);
+    expect(shader.program.reuseRenderOp.mock.calls.length).toBe(1);
+  });
+
+  it('batches distinct shader nodes sharing program and uniform collection', () => {
+    const program = makeProgram();
+    const uniforms = {};
+    const shaderA = makeShaderNode(program, uniforms);
+    const shaderB = makeShaderNode(program, uniforms);
+
+    expect(reuse(makeNode(shaderA), makeNode(shaderB))).toBe(true);
+  });
+
+  it('rejects distinct shader nodes with different uniform collections', () => {
+    const program = makeProgram();
+    const shaderA = makeShaderNode(program, {});
+    const shaderB = makeShaderNode(program, {});
+
+    expect(reuse(makeNode(shaderA), makeNode(shaderB))).toBe(false);
+    // Gate rejects before the program-level prop compare runs
+    expect(program.reuseRenderOp.mock.calls.length).toBe(0);
+  });
+
+  it('rejects equal uniform collections from different programs', () => {
+    // The shader value key does not include the shader type, so a collection
+    // shared across programs (key collision) must never merge draw calls.
+    const uniforms = {};
+    const shaderA = makeShaderNode(makeProgram(), uniforms, 'TypeA');
+    const shaderB = makeShaderNode(makeProgram(), uniforms, 'TypeB');
+
+    expect(reuse(makeNode(shaderA), makeNode(shaderB))).toBe(false);
+  });
+
+  it('batches default-shader quads without consulting the program', () => {
+    const shaderA = makeShaderNode(makeProgram(), {}, 'default');
+    const shaderB = makeShaderNode(makeProgram(), {}, 'default');
+
+    expect(reuse(makeNode(shaderA), makeNode(shaderB))).toBe(true);
+    expect(shaderA.program.reuseRenderOp.mock.calls.length).toBe(0);
+  });
+
+  it('rejects when clipping rects differ', () => {
+    const shader = makeShaderNode(makeProgram(), {});
+    const node = makeNode(shader);
+    node.clippingRect = { x: 0, y: 0, w: 100, h: 100, valid: true };
+
+    expect(reuse(makeNode(shader), node)).toBe(false);
+  });
+
+  it('defers to the program-level check for batched shader nodes', () => {
+    const program = makeProgram(false);
+    const uniforms = {};
+    const shaderA = makeShaderNode(program, uniforms);
+    const shaderB = makeShaderNode(program, uniforms);
+
+    // Same program + shared collection passes the gate, but the program can
+    // still veto (e.g. worldAlpha mismatch on a u_alpha shader).
+    expect(reuse(makeNode(shaderA), makeNode(shaderB))).toBe(false);
+    expect(program.reuseRenderOp.mock.calls.length).toBe(1);
+  });
+});

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

@@ -0,0 +1,302 @@
+import { describe, expect, it, vi } from 'vitest';
+import { WebGlRenderer } from './WebGlRenderer.js';
+
+/**
+ * Tests for the SDF buffer write paths and the upload skip.
+ *
+ * A full renderer needs a live GL context, so methods are exercised on a
+ * minimal fake `this` via the prototype, holding only the fields each method
+ * touches.
+ */
+
+const FLOATS_PER_GLYPH = 24; // 4 vertices x 6 floats
+
+/**
+ * Build one glyph (4 vertices) of cached vertex data with a bit-pattern color.
+ * Layout per vertex: [x, y, u, v, color(uint32), distRange].
+ */
+const makeCachedGlyph = (color: number): Float32Array => {
+  const buf = new ArrayBuffer(FLOATS_PER_GLYPH * 4);
+  const f = new Float32Array(buf);
+  const u = new Uint32Array(buf);
+  const corners = [
+    [10, 20, 0.1, 0.2],
+    [30, 20, 0.3, 0.2],
+    [10, 40, 0.1, 0.4],
+    [30, 40, 0.3, 0.4],
+  ];
+  for (let v = 0; v < 4; v++) {
+    const i = v * 6;
+    f[i] = corners[v]![0]!;
+    f[i + 1] = corners[v]![1]!;
+    f[i + 2] = corners[v]![2]!;
+    f[i + 3] = corners[v]![3]!;
+    u[i + 4] = color;
+    f[i + 5] = 4; // distanceRange
+  }
+  return f;
+};
+
+type SdfWriterFake = {
+  sdfBufferIdx: number;
+  sdfQuadCount: number;
+  sdfBuffer: ArrayBuffer;
+  fSdfBuffer: Float32Array;
+  uiSdfBuffer: Uint32Array;
+  sdfBufferChanged: boolean;
+  ensureSdfBufferCapacity: ReturnType<typeof vi.fn>;
+  finalizeSdfBatch: ReturnType<typeof vi.fn>;
+};
+
+const makeWriterFake = (): SdfWriterFake => {
+  const sdfBuffer = new ArrayBuffer(1024 * 4);
+  return {
+    sdfBufferIdx: 0,
+    sdfQuadCount: 0,
+    sdfBuffer,
+    fSdfBuffer: new Float32Array(sdfBuffer),
+    uiSdfBuffer: new Uint32Array(sdfBuffer),
+    sdfBufferChanged: false,
+    ensureSdfBufferCapacity: vi.fn(),
+    finalizeSdfBatch: vi.fn(),
+  };
+};
+
+const finalizeArgs = [
+  {} as never, // atlasTexture
+  { x: 0, y: 0, w: 0, h: 0, valid: false }, // clippingRect
+  1, // worldAlpha
+  100, // width
+  50, // height
+  false, // parentHasRenderTexture
+  null, // framebufferDimensions
+  {} as never, // sdfShader
+] as const;
+
+describe('WebGlRenderer.addSdfTranslatedQuads', () => {
+  it('copies cached vertices with the position delta applied', () => {
+    const fake = makeWriterFake();
+    const cached = makeCachedGlyph(0x00ff00ff);
+
+    WebGlRenderer.prototype.addSdfTranslatedQuads.call(
+      fake as never,
+      cached,
+      1,
+      5,
+      -3,
+      ...finalizeArgs,
+    );
+
+    const f = fake.fSdfBuffer;
+    // Positions shifted by (5, -3)
+    expect([f[0], f[1]]).toEqual([15, 17]);
+    expect([f[6], f[7]]).toEqual([35, 17]);
+    expect([f[12], f[13]]).toEqual([15, 37]);
+    expect([f[18], f[19]]).toEqual([35, 37]);
+    // UVs and distanceRange untouched
+    expect([f[2], f[3], f[5]]).toEqual([Math.fround(0.1), Math.fround(0.2), 4]);
+    expect(fake.sdfBufferIdx).toBe(FLOATS_PER_GLYPH);
+    expect(fake.sdfQuadCount).toBe(1);
+    expect(fake.sdfBufferChanged).toBe(true);
+    expect(fake.finalizeSdfBatch.mock.calls.length).toBe(1);
+    // startQuad 0, numGlyphs 1
+    expect(fake.finalizeSdfBatch.mock.calls[0]![0]).toBe(0);
+    expect(fake.finalizeSdfBatch.mock.calls[0]![1]).toBe(1);
+    // Source cache untouched
+    expect(cached[0]).toBe(10);
+    expect(cached[1]).toBe(20);
+  });
+
+  it('preserves packed color bits exactly, including float32 NaN patterns', () => {
+    const fake = makeWriterFake();
+    // 0xFFFFFFFF (white, full alpha) is a float32 NaN bit pattern — an
+    // element-wise float copy could canonicalize it. The memcpy must not.
+    const cached = makeCachedGlyph(0xffffffff);
+
+    WebGlRenderer.prototype.addSdfTranslatedQuads.call(
+      fake as never,
+      cached,
+      1,
+      100,
+      200,
+      ...finalizeArgs,
+    );
+
+    for (let v = 0; v < 4; v++) {
+      expect(fake.uiSdfBuffer[v * 6 + 4]).toBe(0xffffffff);
+    }
+  });
+
+  it('appends after existing content and is a no-op for zero glyphs', () => {
+    const fake = makeWriterFake();
+    fake.sdfBufferIdx = FLOATS_PER_GLYPH;
+    fake.sdfQuadCount = 1;
+    const cached = makeCachedGlyph(0x000000ff);
+
+    WebGlRenderer.prototype.addSdfTranslatedQuads.call(
+      fake as never,
+      cached,
+      0,
+      5,
+      5,
+      ...finalizeArgs,
+    );
+    expect(fake.sdfBufferIdx).toBe(FLOATS_PER_GLYPH);
+    expect(fake.sdfBufferChanged).toBe(false);
+    expect(fake.finalizeSdfBatch.mock.calls.length).toBe(0);
+
+    WebGlRenderer.prototype.addSdfTranslatedQuads.call(
+      fake as never,
+      cached,
+      1,
+      5,
+      5,
+      ...finalizeArgs,
+    );
+    expect(fake.sdfBufferIdx).toBe(FLOATS_PER_GLYPH * 2);
+    expect(fake.fSdfBuffer[FLOATS_PER_GLYPH]).toBe(15);
+    // startQuad continues from the existing quad count
+    expect(fake.finalizeSdfBatch.mock.calls[0]![0]).toBe(1);
+  });
+});
+
+type UploadFake = {
+  sdfBufferIdx: number;
+  sdfBufferChanged: boolean;
+  lastUploadedSdfSize: number;
+  sdfBuffer: ArrayBuffer;
+  sdfQuadBufferCollection: { getBuffer: ReturnType<typeof vi.fn> };
+  glw: { arrayBufferData: ReturnType<typeof vi.fn>; DYNAMIC_DRAW: number };
+};
+
+const makeUploadFake = (): UploadFake => ({
+  sdfBufferIdx: 0,
+  sdfBufferChanged: true,
+  lastUploadedSdfSize: 0,
+  sdfBuffer: new ArrayBuffer(1024),
+  sdfQuadBufferCollection: { getBuffer: vi.fn(() => ({})) },
+  glw: { arrayBufferData: vi.fn(), DYNAMIC_DRAW: 35048 },
+});
+
+const upload = (fake: UploadFake) =>
+  (
+    WebGlRenderer.prototype as unknown as {
+      uploadSdfBuffer: (this: unknown) => void;
+    }
+  ).uploadSdfBuffer.call(fake);
+
+describe('WebGlRenderer.uploadSdfBuffer skip', () => {
+  it('does nothing when no SDF glyphs were written', () => {
+    const fake = makeUploadFake();
+
+    upload(fake);
+
+    expect(fake.glw.arrayBufferData.mock.calls.length).toBe(0);
+    // Flag is kept so a later frame with content still uploads
+    expect(fake.sdfBufferChanged).toBe(true);
+  });
+
+  it('uploads when changed, then skips identical follow-up frames', () => {
+    const fake = makeUploadFake();
+    fake.sdfBufferIdx = 48;
+
+    upload(fake);
+    expect(fake.glw.arrayBufferData.mock.calls.length).toBe(1);
+    expect(fake.sdfBufferChanged).toBe(false);
+    expect(fake.lastUploadedSdfSize).toBe(48);
+
+    // Next frame: exact cache hits rewrote identical bytes, same size
+    upload(fake);
+    expect(fake.glw.arrayBufferData.mock.calls.length).toBe(1);
+  });
+
+  it('uploads again when the changed flag is raised', () => {
+    const fake = makeUploadFake();
+    fake.sdfBufferIdx = 48;
+    upload(fake);
+
+    fake.sdfBufferChanged = true;
+    upload(fake);
+
+    expect(fake.glw.arrayBufferData.mock.calls.length).toBe(2);
+  });
+
+  it('uploads when the size differs even if the flag is clear', () => {
+    const fake = makeUploadFake();
+    fake.sdfBufferIdx = 48;
+    upload(fake);
+
+    fake.sdfBufferIdx = 24;
+    upload(fake);
+
+    expect(fake.glw.arrayBufferData.mock.calls.length).toBe(2);
+    expect(fake.lastUploadedSdfSize).toBe(24);
+  });
+});
+
+describe('sdfBufferChanged raisers', () => {
+  it('addSdfQuads marks the buffer changed', () => {
+    const fake = makeWriterFake();
+    // One glyph record: [x, y, w, h, u, v, uw, vh]
+    const glyphs = new Float32Array([0, 0, 10, 10, 0, 0, 0.1, 0.1]);
+    const transform = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+
+    WebGlRenderer.prototype.addSdfQuads.call(
+      fake as never,
+      glyphs,
+      1, // glyphCount
+      1, // fontScale
+      transform,
+      0xffffffff, // color
+      1, // worldAlpha
+      4, // distanceRange
+      {} as never, // atlasTexture
+      { x: 0, y: 0, w: 0, h: 0, valid: false }, // clippingRect
+      100, // width
+      50, // height
+      false, // parentHasRenderTexture
+      null, // framebufferDimensions
+      {} as never, // sdfShader
+    );
+
+    expect(fake.sdfBufferChanged).toBe(true);
+    expect(fake.sdfBufferIdx).toBe(FLOATS_PER_GLYPH);
+  });
+
+  it('invalidateQuadBuffer marks the buffer changed (render-list rebuild)', () => {
+    const fake = {
+      sdfBufferChanged: false,
+      curBufferIdx: 99,
+      lastUploadedBufferSize: 99,
+      needsFullUpload: false,
+      stage: { renderList: [] },
+    };
+
+    WebGlRenderer.prototype.invalidateQuadBuffer.call(fake as never);
+
+    expect(fake.sdfBufferChanged).toBe(true);
+  });
+
+  it('ensureSdfBufferCapacity marks the buffer changed on growth only', () => {
+    const sdfBuffer = new ArrayBuffer(FLOATS_PER_GLYPH * 4);
+    const fake = {
+      sdfBuffer,
+      fSdfBuffer: new Float32Array(sdfBuffer),
+      uiSdfBuffer: new Uint32Array(sdfBuffer),
+      sdfBufferChanged: false,
+    };
+    const ensure = (size: number) =>
+      (
+        WebGlRenderer.prototype as unknown as {
+          ensureSdfBufferCapacity: (this: unknown, n: number) => void;
+        }
+      ).ensureSdfBufferCapacity.call(fake, size);
+
+    ensure(FLOATS_PER_GLYPH); // fits — no realloc
+    expect(fake.sdfBufferChanged).toBe(false);
+
+    ensure(FLOATS_PER_GLYPH * 8); // grows
+    expect(fake.sdfBufferChanged).toBe(true);
+    expect(fake.fSdfBuffer.length).toBeGreaterThanOrEqual(FLOATS_PER_GLYPH * 8);
+  });
+});

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

@@ -127,6 +127,23 @@ export class WebGlRenderer extends CoreRenderer {
   sdfQuadCount = 0;
   sdfQuadBufferCollection: BufferCollection;
   curSdfRenderOp: SdfRenderOp | null = null;
+  /**
+   * Whether the shared SDF buffer's bytes may differ from what the GPU
+   * currently holds. Set by every write path that produces fresh bytes
+   * (cache-miss recompute, translated copy), by anything that can shift
+   * offsets or resize the buffer (render-list rebuild, RTT partial upload,
+   * backing-store growth), and consumed by {@link uploadSdfBuffer}. The
+   * exact cache-hit mem-copy path deliberately does NOT set it — it writes
+   * byte-identical data at identical offsets. Conservative direction: when
+   * in doubt, set it — a redundant upload is correct, a wrong skip is a
+   * glitch.
+   */
+  sdfBufferChanged = true;
+  /**
+   * Float32 length of the last main-pass SDF upload — the size half of the
+   * skip test in {@link uploadSdfBuffer}.
+   */
+  lastUploadedSdfSize = 0;
 
   /**
    * When true, the entire quad buffer is re-uploaded to the GPU via bufferData
@@ -212,7 +229,7 @@ export class WebGlRenderer extends CoreRenderer {
       gl,
       options.disableVertexArrayObject,
     ));
-    glw.viewport(0, 0, options.canvas.width, options.canvas.height);
+    glw.viewport(0, 0, glw.canvasW, glw.canvasH);
 
     this.attachContextLossListeners(options.canvas);
 
@@ -640,9 +657,21 @@ export class WebGlRenderer extends CoreRenderer {
       return true;
     }
 
-    // Check if the shader is the same
+    // Distinct shader nodes can still batch when they resolve to the same
+    // program and the value-key cache handed both the same uniform collection:
+    // collections are immutable after fill and shared by reference across
+    // equal value keys, so reference equality implies value equality. This is
+    // the common TV-rail case — many same-size cards, each app-created with
+    // its own shader node but equal props. Program identity is required
+    // because the value key does not include the shader type, so equal
+    // collections from different programs must not merge.
     if (curShader !== shader) {
-      return false;
+      if (
+        curShader.program !== shader.program ||
+        curShader.uniforms !== shader.uniforms
+      ) {
+        return false;
+      }
     }
 
     if (
@@ -729,6 +758,9 @@ export class WebGlRenderer extends CoreRenderer {
       return;
     }
 
+    // Full recompute writes fresh bytes — the GPU copy is now stale.
+    this.sdfBufferChanged = true;
+
     let idx = this.sdfBufferIdx;
     this.ensureSdfBufferCapacity(idx + glyphCount * 24);
 
@@ -891,6 +923,76 @@ export class WebGlRenderer extends CoreRenderer {
     );
   }
 
+  /**
+   * Append cached SDF vertices translated by (dx, dy) to the shared buffer.
+   *
+   * @remarks
+   * The scroll fast path: a text node whose transform changed by pure
+   * translation reuses its world-space vertex cache — one mem-copy plus two
+   * adds per vertex instead of full per-glyph matrix math, and the cache
+   * keeps its original base so nothing is re-snapshotted per frame.
+   *
+   * The copy MUST stay a typed-array `set` (bit-exact memcpy): packed ABGR
+   * colors live in the same Float32Array and some bit patterns are float32
+   * NaNs, which element-wise float reads/writes may canonicalize and corrupt.
+   * Only the two position floats of each vertex are touched after the copy.
+   */
+  addSdfTranslatedQuads(
+    cachedVertices: Float32Array,
+    numGlyphs: number,
+    dx: number,
+    dy: number,
+    atlasTexture: WebGlCtxTexture,
+    clippingRect: import('../../lib/utils.js').RectWithValid,
+    worldAlpha: number,
+    width: number,
+    height: number,
+    parentHasRenderTexture: boolean,
+    framebufferDimensions:
+      | import('../../../common/CommonTypes.js').Dimensions
+      | null,
+    sdfShader: WebGlShaderNode,
+  ): void {
+    if (numGlyphs === 0) {
+      return;
+    }
+
+    // Translated positions are fresh bytes — the GPU copy is now stale.
+    this.sdfBufferChanged = true;
+
+    const startQuad = this.sdfQuadCount;
+    const idx = this.sdfBufferIdx;
+
+    this.ensureSdfBufferCapacity(idx + cachedVertices.length);
+
+    // Read the buffer reference only after ensureSdfBufferCapacity — growth
+    // swaps the backing store.
+    const f = this.fSdfBuffer;
+    f.set(cachedVertices, idx);
+
+    const end = idx + cachedVertices.length;
+    for (let i = idx; i < end; i += 6) {
+      f[i] = f[i]! + dx;
+      f[i + 1] = f[i + 1]! + dy;
+    }
+
+    this.sdfBufferIdx = end;
+    this.sdfQuadCount += numGlyphs;
+
+    this.finalizeSdfBatch(
+      startQuad,
+      numGlyphs,
+      atlasTexture,
+      clippingRect,
+      worldAlpha,
+      width,
+      height,
+      parentHasRenderTexture,
+      framebufferDimensions,
+      sdfShader,
+    );
+  }
+
   /**
    * Shared batching logic for SDF render ops.
    * Called by both `addSdfQuads` (full compute) and `addSdfCachedQuads` (fast copy).
@@ -992,6 +1094,9 @@ export class WebGlRenderer extends CoreRenderer {
     this.sdfBuffer = newBuffer;
     this.fSdfBuffer = newFSdfBuffer;
     this.uiSdfBuffer = newUiSdfBuffer;
+
+    // New backing store — never skip the next upload.
+    this.sdfBufferChanged = true;
   }
 
   /**
@@ -1068,12 +1173,7 @@ export class WebGlRenderer extends CoreRenderer {
     }
 
     // Upload the shared SDF buffer if any SDF glyphs were written this frame.
-    if (this.sdfBufferIdx > 0) {
-      const sdfBuf =
-        this.sdfQuadBufferCollection.getBuffer('a_position') || null;
-      const sdfArr = new Float32Array(this.sdfBuffer, 0, this.sdfBufferIdx);
-      glw.arrayBufferData(sdfBuf, sdfArr, glw.DYNAMIC_DRAW);
-    }
+    this.uploadSdfBuffer();
 
     for (let i = 0, length = this.renderOps.length; i < length; i++) {
       this.renderOps[i]!.draw(this);
@@ -1087,6 +1187,34 @@ export class WebGlRenderer extends CoreRenderer {
     this.numQuadsRendered = this.quadBufferUsage / QUAD_SIZE_IN_BYTES;
   }
 
+  /**
+   * Upload the shared SDF buffer for the main pass, skipping the driver-side
+   * `bufferData` copy when the bytes provably match what the GPU already
+   * holds: every write this frame was an exact cache-hit mem-copy
+   * (`sdfBufferChanged` false) and the total size matches the previous
+   * upload. Exact hits write byte-identical data, and identical offsets are
+   * guaranteed because every source of reorder or resize — cache-miss
+   * recompute, translated copy, render-list rebuild, RTT partial upload,
+   * backing-store growth — sets `sdfBufferChanged`.
+   */
+  private uploadSdfBuffer(): void {
+    if (this.sdfBufferIdx === 0) {
+      return;
+    }
+    if (
+      this.sdfBufferChanged === false &&
+      this.sdfBufferIdx === this.lastUploadedSdfSize
+    ) {
+      return;
+    }
+    const glw = this.glw;
+    const sdfBuf = this.sdfQuadBufferCollection.getBuffer('a_position') || null;
+    const sdfArr = new Float32Array(this.sdfBuffer, 0, this.sdfBufferIdx);
+    glw.arrayBufferData(sdfBuf, sdfArr, glw.DYNAMIC_DRAW);
+    this.lastUploadedSdfSize = this.sdfBufferIdx;
+    this.sdfBufferChanged = false;
+  }
+
   getQuadCount(): number {
     return this.numQuadsRendered;
   }
@@ -1264,7 +1392,7 @@ export class WebGlRenderer extends CoreRenderer {
     // Bind the default framebuffer
     glw.bindFramebuffer(null);
 
-    glw.viewport(0, 0, this.glw.canvas.width, this.glw.canvas.height);
+    glw.viewport(0, 0, glw.canvasW, glw.canvasH);
     this.renderToTextureActive = false;
   }
 
@@ -1323,6 +1451,9 @@ export class WebGlRenderer extends CoreRenderer {
         this.sdfQuadBufferCollection.getBuffer('a_position') || null;
       const sdfArr = new Float32Array(this.sdfBuffer, 0, this.sdfBufferIdx);
       glw.arrayBufferData(sdfBuf, sdfArr, glw.DYNAMIC_DRAW);
+      // This partial upload replaced the GL buffer's contents and size — the
+      // main pass upload can no longer be skipped this frame.
+      this.sdfBufferChanged = true;
     }
 
     for (let i = 0, length = this.renderOps.length; i < length; i++) {
@@ -1331,7 +1462,10 @@ export class WebGlRenderer extends CoreRenderer {
   }
 
   updateViewport(): void {
-    this.glw.viewport(0, 0, this.glw.canvas.width, this.glw.canvas.height);
+    // Called after the canvas is resized (Renderer.updateAppDimensions) —
+    // refresh the wrapper's cached dimensions before they're used again.
+    this.glw.updateCanvasDimensions();
+    this.glw.viewport(0, 0, this.glw.canvasW, this.glw.canvasH);
   }
 
   removeRTTNode(node: CoreNode) {
@@ -1486,6 +1620,12 @@ export class WebGlRenderer extends CoreRenderer {
    * next addQuad() pass will reassign compact, contiguous slots starting from 0.
    */
   override invalidateQuadBuffer(): void {
+    // A render-list rebuild can reorder text nodes without touching their
+    // SDF vertex caches; byte-identical glyph data would then land at
+    // different offsets, so the upload skip must not fire on the rebuild
+    // frame.
+    this.sdfBufferChanged = true;
+
     if (!DIRTY_QUAD_BUFFER) {
       return;
     }