@solidtv/renderer 1.5.0-0 → 1.5.0

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

@@ -30,7 +30,8 @@ import { Platform } from '../core/platforms/Platform.js';
  * @example
  * ```typescript
  * renderer.on('fpsUpdate', (_target, data) => {
- *   console.log(`Current FPS: ${data.fps}`);
+ *   console.log(`${data.fps} fps, ${data.renderOps} draw calls`);
+ *   console.log('backend:', data.capabilities.renderMode, data.capabilities.webGlVersion);
  *   if (data.contextSpyData) {
  *     console.log('WebGL calls:', data.contextSpyData);
  *   }
@@ -42,6 +43,21 @@ export interface RendererMainFpsUpdateEvent {
   fps: number;
   /** Context spy data (if enabled) - contains WebGL call statistics */
   contextSpyData?: unknown;
+  /**
+   * Draw calls (render operations) submitted for the most recent frame.
+   * `0` on the Canvas backend.
+   */
+  renderOps: number;
+  /** Quads rendered in the most recent frame. `0` on the Canvas backend. */
+  quads: number;
+  /**
+   * Active backend + device capabilities (constant for the renderer's
+   * lifetime). Included so each periodic sample is self-describing for
+   * telemetry — e.g. slice fps by `webGlVersion` or `vertexArrayObject`.
+   *
+   * @see {@link RendererCapabilities}
+   */
+  capabilities: RendererCapabilities;
 }
 
 /**
@@ -526,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
    *
@@ -701,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,
@@ -763,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;