@solidtv/renderer 1.5.6 → 1.6.0

package/src/core/renderers/canvas/CanvasRenderer.ts

@@ -17,8 +17,16 @@ export class CanvasRenderer extends CoreRenderer {
   private canvas: HTMLCanvasElement;
   private pixelRatio: number;
   private clearColor: string;
+  private clearColorAlpha: number;
   public renderToTextureActive = false;
   activeRttNode: CoreNode | null = null;
+  // Scratch state for the preallocated shader renderContext callback below —
+  // valid only for the duration of the shader render() call in addQuad.
+  private shaderContextNode: CoreNode | null = null;
+  private shaderContextTexture: Texture | null = null;
+  private shaderRenderContext = () => {
+    this.renderContext(this.shaderContextNode!, this.shaderContextTexture!);
+  };
 
   constructor(options: CoreRendererOptions) {
     super(options);
@@ -29,16 +37,23 @@ export class CanvasRenderer extends CoreRenderer {
     this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
     this.pixelRatio = this.stage.pixelRatio;
     this.clearColor = normalizeCanvasColor(this.stage.clearColor);
+    this.clearColorAlpha = (this.stage.clearColor >>> 24) & 0xff;
   }
 
   reset(): void {
-    this.canvas.width = this.canvas.width; // quick reset canvas
-
     const ctx = this.context;
+    const w = this.canvas.width;
+    const h = this.canvas.height;
+
+    // The frame's save/restore pairs are balanced, so resetting the transform
+    // and clearing is equivalent to the `canvas.width = canvas.width` trick
+    // without tearing down the backing store every frame.
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, w, h);
 
-    if (this.clearColor) {
+    if (this.clearColorAlpha !== 0) {
       ctx.fillStyle = this.clearColor;
-      ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+      ctx.fillRect(0, 0, w, h);
     }
 
     ctx.scale(this.pixelRatio, this.pixelRatio);
@@ -72,7 +87,7 @@ export class CanvasRenderer extends CoreRenderer {
       }
     }
 
-    const hasTransform = ta !== 1;
+    const hasTransform = ta !== 1 || td !== 1 || tb !== 0 || tc !== 0;
     const clippingValid = clippingRect.valid === true;
 
     // If the clipping rect is valid but zero-area, the node is fully clipped — skip rendering
@@ -99,10 +114,9 @@ export class CanvasRenderer extends CoreRenderer {
     }
 
     if (hasClipping === true) {
-      const path = new Path2D();
-      const { x, y, w, h } = clippingRect;
-      path.rect(x, y, w, h);
-      ctx.clip(path);
+      ctx.beginPath();
+      ctx.rect(clippingRect.x, clippingRect.y, clippingRect.w, clippingRect.h);
+      ctx.clip();
     }
 
     if (hasTransform === true) {
@@ -121,12 +135,11 @@ export class CanvasRenderer extends CoreRenderer {
     }
 
     if (hasShader === true) {
-      let renderContext: (() => void) | null = () => {
-        this.renderContext(node, texture);
-      };
-
-      (shader as CanvasShaderNode).render(ctx, node, renderContext);
-      renderContext = null;
+      this.shaderContextNode = node;
+      this.shaderContextTexture = texture;
+      (shader as CanvasShaderNode).render(ctx, node, this.shaderRenderContext);
+      this.shaderContextNode = null;
+      this.shaderContextTexture = null;
     } else {
       this.renderContext(node, texture);
     }
@@ -345,6 +358,7 @@ export class CanvasRenderer extends CoreRenderer {
    */
   updateClearColor(color: number) {
     this.clearColor = normalizeCanvasColor(color);
+    this.clearColorAlpha = (color >>> 24) & 0xff;
   }
 
   override getTextureCoords(

package/src/core/renderers/canvas/CanvasShaderNode.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it, vi } from 'vitest';
+import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
+import type { CoreNode } from '../../CoreNode.js';
+import type { Stage } from '../../Stage.js';
+
+type TestProps = { radius: number };
+
+const makeShaderNode = (props: TestProps) => {
+  const shManager = {
+    getShaderValues: vi.fn(),
+    setShaderValues: vi.fn(),
+    mutateShaderValueUsage: vi.fn(),
+  };
+  const stage = { shManager } as unknown as Stage;
+  const updater = vi.fn(function (this: CanvasShaderNode<TestProps>) {
+    (this.computed as Record<string, unknown>).value = 'computed';
+  });
+  const config = {
+    props: { radius: 0 },
+    render: vi.fn(),
+    update: updater,
+  } as unknown as CanvasShaderType<TestProps>;
+  const shaderNode = new CanvasShaderNode<TestProps>(
+    'test',
+    config,
+    stage,
+    props,
+  );
+  shaderNode.attachNode({ w: 100, h: 50 } as CoreNode);
+  return { shaderNode, shManager, updater };
+};
+
+describe('CanvasShaderNode.update value cache', () => {
+  it('computes and registers values on a cache miss', () => {
+    const { shaderNode, shManager, updater } = makeShaderNode({ radius: 4 });
+    shManager.getShaderValues.mockReturnValue(undefined);
+
+    shaderNode.update!();
+
+    expect(updater).toHaveBeenCalledTimes(1);
+    expect(shManager.setShaderValues).toHaveBeenCalledTimes(1);
+    expect(shManager.setShaderValues).toHaveBeenCalledWith(
+      shaderNode.valueKey,
+      shaderNode.computed,
+    );
+    expect((shaderNode.computed as Record<string, unknown>).value).toBe(
+      'computed',
+    );
+  });
+
+  it('reuses cached values on a cache hit without recomputing', () => {
+    const { shaderNode, shManager, updater } = makeShaderNode({ radius: 4 });
+    const cached = { value: 'cached' };
+    shManager.getShaderValues.mockReturnValue(cached);
+
+    shaderNode.update!();
+
+    expect(shaderNode.computed).toBe(cached);
+    expect(updater).not.toHaveBeenCalled();
+    expect(shManager.setShaderValues).not.toHaveBeenCalled();
+  });
+
+  it('skips all work when the value key is unchanged', () => {
+    const { shaderNode, shManager, updater } = makeShaderNode({ radius: 4 });
+    shManager.getShaderValues.mockReturnValue(undefined);
+
+    shaderNode.update!();
+    shaderNode.update!();
+
+    expect(updater).toHaveBeenCalledTimes(1);
+    expect(shManager.getShaderValues).toHaveBeenCalledTimes(1);
+  });
+});

package/src/core/renderers/canvas/CanvasShaderNode.ts

@@ -63,6 +63,7 @@ export class CanvasShaderNode<
         ) as Record<string, unknown>;
         if (computed !== undefined) {
           this.computed = computed as Computed;
+          return;
         }
         this.computed = {};
         this.updater!(this.node as CoreNode);

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

@@ -60,7 +60,7 @@ export class SdfRenderOp extends CoreRenderOp {
   }
 
   draw() {
-    const { glw, options, stage } = this.renderer;
+    const { glw, stage } = this.renderer;
 
     stage.shManager.useShader(this.shader.program);
     this.shader.program.bindRenderOp(this);
@@ -73,7 +73,7 @@ export class SdfRenderOp extends CoreRenderOp {
       const clipWidth = Math.round(this.clippingRect.w * pixelRatio);
       const clipHeight = Math.round(this.clippingRect.h * pixelRatio);
       let clipY = Math.round(
-        options.canvas.height - clipHeight - this.clippingRect.y * pixelRatio,
+        glw.canvasH - clipHeight - this.clippingRect.y * pixelRatio,
       );
       // if parent has render texture, we need to adjust the scissor rect
       // to be relative to the parent's framebuffer

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);
+  });
+});