@solidtv/renderer 1.5.0-1 → 1.5.1

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

@@ -0,0 +1,233 @@
+import { describe, expect, it, vi } from 'vitest';
+import { WebGlShaderProgram } from './WebGlShaderProgram.js';
+
+/**
+ * Tests for the redundant-uniform-upload skip in bindRenderOp.
+ *
+ * The program instance is created without running the constructor (which
+ * compiles GLSL against a live GL context); the fields bindRenderOp touches
+ * are populated manually, and bindTextures/bindBufferCollection are stubbed.
+ */
+
+type FakeGlw = {
+  uniform1f: ReturnType<typeof vi.fn>;
+  uniform2f: ReturnType<typeof vi.fn>;
+  uniform4f: ReturnType<typeof vi.fn>;
+  canvas: { width: number; height: number };
+};
+
+const makeProgram = (): { program: WebGlShaderProgram; glw: FakeGlw } => {
+  const glw: FakeGlw = {
+    uniform1f: vi.fn(),
+    uniform2f: vi.fn(),
+    uniform4f: vi.fn(),
+    canvas: { width: 1920, height: 1080 },
+  };
+
+  const program = Object.create(
+    WebGlShaderProgram.prototype,
+  ) as WebGlShaderProgram;
+  const p = program as unknown as Record<string, unknown>;
+  p['glw'] = glw;
+  p['useSystemAlpha'] = true;
+  p['useSystemDimensions'] = true;
+  p['useTimeValue'] = false;
+  p['lastBoundUniforms'] = null;
+  p['lastPixelRatio'] = -1;
+  p['lastResolutionW'] = -1;
+  p['lastResolutionH'] = -1;
+  p['lastAlpha'] = -1;
+  p['lastDimensionsW'] = -1;
+  p['lastDimensionsH'] = -1;
+  p['lastTime'] = -1;
+  // Stub the buffer/texture binding done before the uniform pass
+  p['bindTextures'] = vi.fn();
+  p['bindBufferCollection'] = vi.fn();
+  return { program, glw };
+};
+
+const makeUniforms = () => ({
+  single: {
+    u_borderGap: { method: 'uniform1f', value: 0 },
+  },
+  vec2: {},
+  vec3: {},
+  vec4: {
+    u_radius: { method: 'uniform4f', value: [16, 16, 16, 16] },
+  },
+});
+
+const makeOp = (
+  uniforms: ReturnType<typeof makeUniforms>,
+  overrides?: Record<string, unknown>,
+) => ({
+  isCoreNode: true,
+  rtt: false,
+  parentHasRenderTexture: false,
+  parentFramebufferDimensions: null,
+  framebufferDimensions: null,
+  stage: { pixelRatio: 2 },
+  time: 0,
+  worldAlpha: 1,
+  w: 200,
+  h: 100,
+  renderOpTextures: [],
+  quadBufferCollection: {},
+  shader: { props: {}, uniforms },
+  ...overrides,
+});
+
+const totalCalls = (glw: FakeGlw): number =>
+  glw.uniform1f.mock.calls.length +
+  glw.uniform2f.mock.calls.length +
+  glw.uniform4f.mock.calls.length;
+
+describe('bindRenderOp uniform dedup', () => {
+  it('should upload everything on the first bind', () => {
+    const { program, glw } = makeProgram();
+    const uniforms = makeUniforms();
+
+    program.bindRenderOp(makeOp(uniforms) as never);
+
+    // u_pixelRatio, u_alpha, u_borderGap (1f) + u_resolution, u_dimensions (2f) + u_radius (4f)
+    expect(glw.uniform1f.mock.calls.length).toBe(3);
+    expect(glw.uniform2f.mock.calls.length).toBe(2);
+    expect(glw.uniform4f.mock.calls.length).toBe(1);
+  });
+
+  it('should issue zero uniform calls on an identical re-bind', () => {
+    const { program, glw } = makeProgram();
+    const uniforms = makeUniforms();
+
+    program.bindRenderOp(makeOp(uniforms) as never);
+    glw.uniform1f.mockClear();
+    glw.uniform2f.mockClear();
+    glw.uniform4f.mockClear();
+
+    program.bindRenderOp(makeOp(uniforms) as never);
+
+    expect(totalCalls(glw)).toBe(0);
+  });
+
+  it('should skip across interleaved ops (shared collection, different op objects)', () => {
+    const { program, glw } = makeProgram();
+    const uniforms = makeUniforms();
+
+    // Two distinct ops (different cards) sharing the value-cached collection
+    program.bindRenderOp(makeOp(uniforms) as never);
+    glw.uniform1f.mockClear();
+    glw.uniform2f.mockClear();
+    glw.uniform4f.mockClear();
+
+    // GL uniform state persists on the program across useProgram switches,
+    // so an op of another program in between changes nothing here.
+    program.bindRenderOp(makeOp(uniforms) as never);
+
+    expect(totalCalls(glw)).toBe(0);
+  });
+
+  it('should re-upload only the changed system uniform', () => {
+    const { program, glw } = makeProgram();
+    const uniforms = makeUniforms();
+
+    program.bindRenderOp(makeOp(uniforms) as never);
+    glw.uniform1f.mockClear();
+    glw.uniform2f.mockClear();
+    glw.uniform4f.mockClear();
+
+    program.bindRenderOp(makeOp(uniforms, { worldAlpha: 0.5 }) as never);
+
+    expect(glw.uniform1f.mock.calls.length).toBe(1);
+    expect(glw.uniform1f.mock.calls[0]![0]).toBe('u_alpha');
+    expect(glw.uniform1f.mock.calls[0]![1]).toBe(0.5);
+    expect(glw.uniform2f.mock.calls.length).toBe(0);
+    expect(glw.uniform4f.mock.calls.length).toBe(0);
+  });
+
+  it('should re-upload dimensions when the op size differs', () => {
+    const { program, glw } = makeProgram();
+    const uniforms = makeUniforms();
+
+    program.bindRenderOp(makeOp(uniforms) as never);
+    glw.uniform2f.mockClear();
+
+    program.bindRenderOp(makeOp(uniforms, { w: 300, h: 150 }) as never);
+
+    expect(glw.uniform2f.mock.calls.length).toBe(1);
+    expect(glw.uniform2f.mock.calls[0]![0]).toBe('u_dimensions');
+  });
+
+  it('should re-run the collection pass for a different collection object', () => {
+    const { program, glw } = makeProgram();
+    const uniformsA = makeUniforms();
+    const uniformsB = makeUniforms(); // identical values, distinct identity
+
+    program.bindRenderOp(makeOp(uniformsA) as never);
+    glw.uniform1f.mockClear();
+    glw.uniform4f.mockClear();
+
+    program.bindRenderOp(makeOp(uniformsB) as never);
+
+    // Conservative direction: new object => redundant upload, never a skip
+    expect(glw.uniform1f.mock.calls.length).toBe(1); // u_borderGap
+    expect(glw.uniform4f.mock.calls.length).toBe(1); // u_radius
+  });
+
+  it('should re-upload pixel ratio and resolution across an RTT flip', () => {
+    const { program, glw } = makeProgram();
+    const uniforms = makeUniforms();
+
+    program.bindRenderOp(makeOp(uniforms) as never);
+    glw.uniform1f.mockClear();
+    glw.uniform2f.mockClear();
+
+    // RTT op: pixelRatio forced to 1, resolution = framebuffer dimensions
+    program.bindRenderOp(
+      makeOp(uniforms, {
+        isCoreNode: false,
+        parentHasRenderTexture: true,
+        framebufferDimensions: { w: 512, h: 256 },
+      }) as never,
+    );
+
+    const calls1f = glw.uniform1f.mock.calls;
+    const calls2f = glw.uniform2f.mock.calls;
+    expect(calls1f.some((c) => c[0] === 'u_pixelRatio' && c[1] === 1)).toBe(
+      true,
+    );
+    expect(calls2f.some((c) => c[0] === 'u_resolution' && c[1] === 512)).toBe(
+      true,
+    );
+
+    glw.uniform1f.mockClear();
+    glw.uniform2f.mockClear();
+
+    // Back to screen: values flip back and must re-upload
+    program.bindRenderOp(makeOp(uniforms) as never);
+    expect(
+      glw.uniform1f.mock.calls.some(
+        (c) => c[0] === 'u_pixelRatio' && c[1] === 2,
+      ),
+    ).toBe(true);
+    expect(
+      glw.uniform2f.mock.calls.some(
+        (c) => c[0] === 'u_resolution' && c[1] === 1920,
+      ),
+    ).toBe(true);
+  });
+
+  it('should skip the collection pass entirely for propless shaders', () => {
+    const { program, glw } = makeProgram();
+
+    program.bindRenderOp(
+      makeOp(makeUniforms(), {
+        shader: { props: undefined, uniforms: makeUniforms() },
+      }) as never,
+    );
+
+    // Only system uniforms: pixelRatio + alpha (1f), resolution + dimensions (2f)
+    expect(glw.uniform1f.mock.calls.length).toBe(2);
+    expect(glw.uniform2f.mock.calls.length).toBe(2);
+    expect(glw.uniform4f.mock.calls.length).toBe(0);
+  });
+});

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

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest';
+import { createIndexBuffer } from './RendererUtils.js';
+import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
+
+// Capture the Uint16Array handed to elementArrayBufferData so we can assert on
+// the generated quad indices without a real GL context.
+function mockGlw(): {
+  glw: WebGlContextWrapper;
+  getIndices: () => Uint16Array;
+} {
+  let captured: Uint16Array | null = null;
+  const glw = {
+    STATIC_DRAW: 0,
+    createBuffer: () => ({}),
+    elementArrayBufferData: (_buffer: unknown, indices: Uint16Array) => {
+      captured = indices;
+    },
+  } as unknown as WebGlContextWrapper;
+  return {
+    glw,
+    getIndices: () => {
+      if (captured === null) {
+        throw new Error('elementArrayBufferData was not called');
+      }
+      return captured;
+    },
+  };
+}
+
+// The expected 6 element indices for quad `q`: two triangles over the quad's
+// four vertices [4q, 4q+1, 4q+2, 4q+3] wound as [0,1,2, 2,1,3].
+const expectedQuad = (q: number): number[] => {
+  const j = q * 4;
+  return [j, j + 1, j + 2, j + 2, j + 1, j + 3];
+};
+
+describe('createIndexBuffer', () => {
+  it('fills indices for EVERY quad, not just the first 1/6', () => {
+    // size / 80 = 800 quads, comfortably under the Uint16 cap.
+    const { glw, getIndices } = mockGlw();
+    createIndexBuffer(glw, 800 * 80);
+    const indices = getIndices();
+    const maxQuads = 800;
+
+    expect(indices.length).toBe(maxQuads * 6);
+
+    // First, middle and — critically — the LAST quad must be populated. The
+    // original bug stopped the loop at `i < maxQuads`, zeroing every quad past
+    // ~maxQuads/6 and collapsing it into a degenerate triangle.
+    for (const q of [0, 1, maxQuads >> 1, maxQuads - 2, maxQuads - 1]) {
+      const slice = Array.from(indices.subarray(q * 6, q * 6 + 6));
+      expect(slice).toEqual(expectedQuad(q));
+    }
+
+    // No trailing zeroed slots (every quad past index 0 references vertices > 0).
+    const lastQuad = Array.from(indices.subarray((maxQuads - 1) * 6));
+    expect(lastQuad.some((v) => v !== 0)).toBe(true);
+  });
+
+  it('caps at 16384 quads so Uint16 vertex ids never overflow', () => {
+    // Request far more than Uint16 can address (25000 quads worth of bytes).
+    const { glw, getIndices } = mockGlw();
+    createIndexBuffer(glw, 25000 * 80);
+    const indices = getIndices();
+
+    expect(indices.length).toBe(16384 * 6);
+    // The very last vertex id is 16384*4 - 1 = 65535, the Uint16 maximum.
+    expect(indices[indices.length - 1]).toBe(65535);
+    expect(Array.from(indices.subarray(16383 * 6, 16383 * 6 + 6))).toEqual(
+      expectedQuad(16383),
+    );
+  });
+});

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

@@ -11,10 +11,17 @@ export function createIndexBuffer(
   glw: WebGlContextWrapper,
   size: number,
 ): WebGLBuffer | null {
-  const maxQuads = ~~(size / 80);
+  // 4 vertices per quad. Element indices are Uint16, so the largest vertex id
+  // we can address is 65535 — i.e. 16384 quads (16384 * 4 = 65536). Never claim
+  // more than that, regardless of the requested byte budget.
+  const maxQuads = Math.min(~~(size / 80), 16384);
   const indices = new Uint16Array(maxQuads * 6);
 
-  for (let i = 0, j = 0; i < maxQuads; i += 6, j += 4) {
+  // i walks the index slot (6 per quad), j the vertex base (4 per quad). The
+  // bound must be maxQuads * 6 to fill every slot — stopping at maxQuads left
+  // ~5/6 of the buffer zeroed, collapsing every quad past ~maxQuads/6 into a
+  // degenerate triangle (the cause of tail geometry silently disappearing).
+  for (let i = 0, j = 0; i < maxQuads * 6; i += 6, j += 4) {
     indices[i] = j;
     indices[i + 1] = j + 1;
     indices[i + 2] = j + 2;

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

@@ -97,21 +97,22 @@ describe('SdfTextRenderer layout cache', () => {
     expect(SdfFontHandler.getFontData).toHaveBeenCalledTimes(1);
   });
 
-  it('cleanup trims to the cap and evicts least-recently-used first', () => {
+  it('eagerly bounds the cache on insert (does not wait for idle cleanup)', () => {
+    // An animating scene never goes idle, so the cache must be bounded on insert
+    // rather than relying solely on idle `cleanup`. With cap 2, inserting a 3rd
+    // entry must immediately evict the least-recently-used (oldest) one — 'A'.
     initRenderer(2);
 
-    render('A');
-    render('B');
-    render('C');
-    // Re-access 'A' so it becomes most-recently-used; 'B' is now the LRU.
-    render('A');
-
-    SdfTextRenderer.cleanup();
+    render('A'); // {A}
+    render('B'); // {A, B}
+    render('C'); // insert -> over cap -> eagerly evict LRU 'A' -> {B, C}
 
     vi.clearAllMocks();
-    render('B'); // evicted -> miss
-    render('A'); // survived -> hit
+    // Probe survivors first (hits only re-order, they don't change membership),
+    // then the evicted entry last so its re-insert can't perturb the assertion.
     render('C'); // survived -> hit
+    render('B'); // survived -> hit
+    render('A'); // evicted -> miss (one layout regen)
 
     expect(SdfFontHandler.getFontData).toHaveBeenCalledTimes(1);
   });

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

@@ -24,9 +24,14 @@ const type = 'sdf' as const;
 
 let sdfShader: WebGlShaderNode | null = null;
 
-// Upper bound on layoutCache entries, enforced on idle via `cleanup`.
-// Overridden from stage options in `init`. The cache is allowed to grow past
-// this during active rendering and is trimmed back to it when the stage idles.
+// Upper bound on layoutCache entries. Overridden from stage options in `init`.
+// Enforced both eagerly on insert (see `renderText`) and in bulk on idle (see
+// `cleanup`). The eager bound matters because a continuously animating scene
+// never goes idle, so idle-only eviction would let apps with ever-changing text
+// (clocks, counters, score/fps readouts) grow the cache without limit until the
+// page runs out of memory. The per-insert cost is a single Map delete on a
+// cache miss (i.e. only when new text is laid out), so it does not compete with
+// steady-state rendering.
 let maxLayoutCacheSize = 250;
 
 // Initialize the SDF text renderer
@@ -114,6 +119,15 @@ const renderText = (props: CoreTextNodeProps): TextRenderInfo => {
   layout = generateTextLayout(props, fontData);
   layoutCache.set(cacheKey, layout);
 
+  // Eagerly bound the cache. Idle `cleanup` alone is not enough: an animating
+  // scene never idles, so without this, ever-changing text grows the cache
+  // without limit. The Map is insertion-ordered and cache hits re-insert
+  // (delete + set) to the end, so the first key is the least-recently-used.
+  if (layoutCache.size > maxLayoutCacheSize) {
+    const oldest = layoutCache.keys().next().value as string;
+    layoutCache.delete(oldest);
+  }
+
   // For SDF renderer, ImageData is null since we render via WebGL
   return {
     remainingLines: 0,

package/src/main-api/Renderer.ts

@@ -542,6 +542,23 @@ export type RendererMainSettings = RendererRuntimeSettings & {
    */
   forceWebGL2: boolean;
 
+  /**
+   * Disable Vertex Array Objects
+   *
+   * @remarks
+   * By default the WebGL renderer caches each shader program's attribute layout
+   * in a Vertex Array Object (native on WebGL2, or via the
+   * `OES_vertex_array_object` extension on WebGL1) and binds it with a single
+   * call per draw instead of re-pointing every attribute. Set this to `true` to
+   * force the per-draw attribute-binding path instead.
+   *
+   * This is primarily a diagnostic/benchmarking switch — it lets you A/B the VAO
+   * optimization on a target device. It has no effect on the Canvas renderer.
+   *
+   * @defaultValue `false`
+   */
+  disableVertexArrayObject: boolean;
+
   /**
    * Canvas object to use for rendering
    *
@@ -717,6 +734,7 @@ export class RendererMain extends EventEmitter {
         settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
       enableContextSpy: settings.enableContextSpy ?? false,
       forceWebGL2: settings.forceWebGL2 ?? false,
+      disableVertexArrayObject: settings.disableVertexArrayObject ?? false,
       inspector: settings.inspector ?? false,
       inspectorOptions: settings.inspectorOptions ?? {},
       renderEngine: settings.renderEngine,
@@ -779,6 +797,7 @@ export class RendererMain extends EventEmitter {
       devicePhysicalPixelRatio,
       enableContextSpy: settings.enableContextSpy!,
       forceWebGL2: settings.forceWebGL2!,
+      disableVertexArrayObject: settings.disableVertexArrayObject!,
       fpsUpdateInterval: settings.fpsUpdateInterval!,
       enableClear: settings.enableClear!,
       numImageWorkers: settings.numImageWorkers!,

package/src/utils.test.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest';
+import { createWebGLContext } from './utils.js';
+import { ContextSpy } from './core/lib/ContextSpy.js';
+
+describe('createWebGLContext context spy', () => {
+  // Build a minimal fake GL context whose getExtension returns a fake
+  // OES_vertex_array_object so we can assert the spy counts calls on it.
+  function makeContext(spy: ContextSpy) {
+    let vaoCounter = 0;
+    const ext = {
+      createVertexArrayOES: () => ({ id: ++vaoCounter }),
+      bindVertexArrayOES: (_vao: unknown) => undefined,
+      deleteVertexArrayOES: (_vao: unknown) => undefined,
+    };
+    const gl = {
+      getExtension: (name: string) =>
+        name === 'OES_vertex_array_object' ? ext : null,
+      viewport: () => undefined,
+    };
+    const canvas = {
+      getContext: () => gl,
+    } as unknown as HTMLCanvasElement;
+    return createWebGLContext(canvas, false, spy);
+  }
+
+  it('counts methods on extension objects returned by getExtension', () => {
+    const spy = new ContextSpy();
+    const gl = makeContext(spy);
+
+    // WebGL1 VAO calls route through the extension object.
+    const ext = gl.getExtension('OES_vertex_array_object') as unknown as {
+      createVertexArrayOES: () => unknown;
+      bindVertexArrayOES: (vao: unknown) => void;
+    };
+    const vao = ext.createVertexArrayOES();
+    ext.bindVertexArrayOES(vao);
+    ext.bindVertexArrayOES(null);
+
+    const data = spy.getData();
+    expect(data['getExtension']).toBeGreaterThan(0);
+    expect(data['createVertexArrayOES']).toBe(1);
+    expect(data['bindVertexArrayOES']).toBe(2);
+  });
+
+  it('passes through a null extension without throwing', () => {
+    const spy = new ContextSpy();
+    const gl = makeContext(spy);
+    expect(gl.getExtension('NOPE' as 'OES_vertex_array_object')).toBe(null);
+  });
+
+  it('still counts direct context calls', () => {
+    const spy = new ContextSpy();
+    const gl = makeContext(spy);
+    gl.viewport(0, 0, 1, 1);
+    expect(spy.getData()['viewport']).toBe(1);
+  });
+});

package/src/utils.ts

@@ -29,17 +29,33 @@ export function createWebGLContext(
     throw new Error('Unable to create WebGL context');
   }
   if (contextSpy) {
-    // Proxy the GL context to log all GL calls
-    return new Proxy(gl, {
+    // Proxy the GL context — and any extension object it hands out — so every
+    // call is counted. The renderer routes WebGL1 Vertex Array Object calls
+    // through the OES_vertex_array_object extension object; without wrapping
+    // that object its methods (bindVertexArrayOES / createVertexArrayOES /
+    // deleteVertexArrayOES) would bypass the spy entirely. On WebGL2 the same
+    // calls live on the context itself and are already captured.
+    const handler: ProxyHandler<object> = {
       get(target, prop) {
-        const value = target[prop as never] as unknown;
-        if (typeof value === 'function') {
-          contextSpy.increment(String(prop));
-          return value.bind(target);
+        const value = (target as Record<string | symbol, unknown>)[prop];
+        if (typeof value !== 'function') {
+          return value;
         }
-        return value;
+        contextSpy.increment(String(prop));
+        const fn = value as (...args: unknown[]) => unknown;
+        if (prop === 'getExtension') {
+          return (...args: unknown[]): unknown => {
+            const ext = fn.apply(target, args);
+            if (ext !== null && typeof ext === 'object') {
+              return new Proxy(ext, handler);
+            }
+            return ext;
+          };
+        }
+        return fn.bind(target);
       },
-    });
+    };
+    return new Proxy(gl as object, handler) as unknown as WebGLRenderingContext;
   }
 
   return gl;