@solidtv/renderer 1.4.2 → 1.5.0-1

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

@@ -9,6 +9,7 @@ import {
   CoreRenderer,
   type BufferInfo,
   type CoreRendererOptions,
+  type RendererCapabilities,
 } from '../CoreRenderer.js';
 import { SdfRenderOp } from './SdfRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
@@ -133,6 +134,15 @@ export class WebGlRenderer extends CoreRenderer {
   defaultShaderNode: WebGlShaderNode | null = null;
   quadBufferCollection: BufferCollection;
 
+  /**
+   * Shared static element (index) buffer for quad rendering.
+   *
+   * @remarks
+   * Bound once globally, but also recorded into each shader program's Vertex
+   * Array Object since the element-array binding is part of VAO state.
+   */
+  indexBuffer: WebGLBuffer | null = null;
+
   clearColor: WebGlColor = {
     raw: 0x00000000,
     normalized: [0, 0, 0, 0],
@@ -187,7 +197,7 @@ export class WebGlRenderer extends CoreRenderer {
     glw.setBlend(true);
     glw.blendFunc(glw.ONE, glw.ONE_MINUS_SRC_ALPHA);
 
-    createIndexBuffer(glw, this.stage.bufferMemory);
+    this.indexBuffer = createIndexBuffer(glw, this.stage.bufferMemory);
 
     // Create the static node coords buffer
     // 80 is the magic number used in createIndexBuffer
@@ -1280,6 +1290,17 @@ export class WebGlRenderer extends CoreRenderer {
     return bufferInfo;
   }
 
+  getCapabilities(): RendererCapabilities {
+    const glw = this.glw;
+    return {
+      renderMode: 'webgl',
+      webGlVersion: glw.isWebGl2 ? 2 : 1,
+      vertexArrayObject: glw.canUseVertexArrayObject,
+      maxTextureSize: glw.getParameter(glw.MAX_TEXTURE_SIZE) as number,
+      maxTextureUnits: glw.getParameter(glw.MAX_TEXTURE_IMAGE_UNITS) as number,
+    };
+  }
+
   /**
    * Drain the GL error queue once and report whether a GL_OUT_OF_MEMORY was
    * seen since the last call.

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

@@ -30,6 +30,19 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   public isDestroyed = false;
   supportsIndexedTextures = false;
 
+  /**
+   * Cached Vertex Array Objects, keyed by the buffer collection they capture.
+   *
+   * @remarks
+   * A VAO records this program's attribute layout (enabled arrays, pointers and
+   * their source buffers) plus the shared element index buffer, so a draw only
+   * needs a single `bindVertexArray` instead of re-pointing every attribute. In
+   * practice a program only ever binds one collection, but keying by collection
+   * keeps it correct if that ever changes. Empty / unused when the context has
+   * no VAO support (see {@link WebGlContextWrapper.canUseVertexArrayObject}).
+   */
+  protected vaos = new Map<BufferCollection, WebGLVertexArrayObject | null>();
+
   constructor(
     renderer: WebGlRenderer,
     config: WebGlShaderType,
@@ -259,6 +272,38 @@ export class WebGlShaderProgram implements CoreShaderProgram {
 
   bindBufferCollection(buffer: BufferCollection) {
     const { glw } = this;
+
+    if (glw.canUseVertexArrayObject === true) {
+      let vao = this.vaos.get(buffer);
+      if (vao === undefined) {
+        // First draw with this collection: try to capture the attribute layout
+        // in a VAO. Cache the result — including a null on allocation failure,
+        // so we don't retry createVertexArray every frame.
+        vao = this.createVao(buffer);
+        this.vaos.set(buffer, vao);
+      }
+      if (vao !== null) {
+        // createVao leaves a freshly built VAO bound; re-binding is cheap and
+        // keeps the build and reuse paths identical.
+        glw.bindVertexArray(vao);
+        return;
+      }
+      // VAO allocation failed (e.g. under GL OOM). Bind the default VAO so the
+      // per-draw attribute setup below records into it rather than corrupting
+      // another program's cached VAO, then fall through.
+      glw.bindVertexArray(null);
+    }
+
+    // No (usable) VAO: re-point every attribute on each draw.
+    this.bindAttributes(buffer);
+  }
+
+  /**
+   * Point this program's vertex attributes at the given buffer collection.
+   * When a VAO is bound this records into it; otherwise it mutates global state.
+   */
+  private bindAttributes(buffer: BufferCollection) {
+    const { glw } = this;
     const attribs = this.attributeLocations;
     const attribLen = attribs.length;
 
@@ -282,6 +327,30 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     }
   }
 
+  /**
+   * Create and populate a Vertex Array Object capturing this program's
+   * attribute layout for the given buffer collection. The new VAO is left bound.
+   * Returns null if the context reports VAO support but allocation fails (e.g.
+   * under GL OOM), in which case the caller falls back to per-draw binding.
+   */
+  private createVao(buffer: BufferCollection): WebGLVertexArrayObject | null {
+    const { glw } = this;
+    const vao = glw.createVertexArray();
+    if (vao === null) {
+      return null;
+    }
+    glw.bindVertexArray(vao);
+
+    this.bindAttributes(buffer);
+
+    // The element-array binding is part of VAO state and starts out null on a
+    // fresh VAO, so record the shared index buffer into it or indexed
+    // drawElements would read from no buffer.
+    glw.bindElementArrayBuffer(this.renderer.indexBuffer);
+
+    return vao;
+  }
+
   bindTextures(textures: WebGlCtxTexture[]) {
     const t = textures[0];
     if (t === undefined) {
@@ -299,6 +368,13 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   detach(): void {
+    // With VAOs the enabled-attribute state lives in each per-collection VAO,
+    // not in global context state. Disabling here would mutate whichever VAO is
+    // currently bound and corrupt it for the next draw, so there's nothing to
+    // do on a program switch.
+    if (this.glw.canUseVertexArrayObject === true) {
+      return;
+    }
     this.disableAttributes();
   }
 
@@ -310,6 +386,13 @@ export class WebGlShaderProgram implements CoreShaderProgram {
 
     this.detach();
 
+    for (const vao of this.vaos.values()) {
+      if (vao !== null) {
+        glw.deleteVertexArray(vao);
+      }
+    }
+    this.vaos.clear();
+
     glw.deleteProgram(this.program!);
     this.program = null;
     this.uniformLocations = null;

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

@@ -7,7 +7,10 @@ import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
  * @param glw
  * @param size
  */
-export function createIndexBuffer(glw: WebGlContextWrapper, size: number) {
+export function createIndexBuffer(
+  glw: WebGlContextWrapper,
+  size: number,
+): WebGLBuffer | null {
   const maxQuads = ~~(size / 80);
   const indices = new Uint16Array(maxQuads * 6);
 
@@ -22,6 +25,7 @@ export function createIndexBuffer(glw: WebGlContextWrapper, size: number) {
 
   const buffer = glw.createBuffer();
   glw.elementArrayBufferData(buffer, indices, glw.STATIC_DRAW);
+  return buffer;
 }
 
 /**

package/src/main-api/Renderer.ts

@@ -14,6 +14,7 @@ import type { CanvasRenderer } from '../core/renderers/canvas/CanvasRenderer.js'
 import type { WebGlRenderer } from '../core/renderers/webgl/WebGlRenderer.js';
 import type { Inspector, InspectorOptions } from './Inspector.js';
 import type { CoreShaderNode } from '../core/renderers/CoreShaderNode.js';
+import type { RendererCapabilities } from '../core/renderers/CoreRenderer.js';
 import type {
   ExtractShaderProps,
   OptionalShaderProps,
@@ -29,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);
  *   }
@@ -41,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;
 }
 
 /**
@@ -1035,6 +1052,24 @@ export class RendererMain extends EventEmitter {
     return this.stage.renderer.getBufferInfo();
   }
 
+  /**
+   * Report the active rendering backend and device capabilities.
+   *
+   * @remarks
+   * Useful for diagnostics and field logging — e.g. confirming which WebGL
+   * version a device negotiated and whether Vertex Array Objects engaged.
+   * Reads live GL parameters (CPU↔GPU round-trips), so call once at startup
+   * rather than per frame.
+   *
+   * @example
+   * ```ts
+   * console.table(renderer.getCapabilities());
+   * ```
+   */
+  getCapabilities(): RendererCapabilities {
+    return this.stage.renderer.getCapabilities();
+  }
+
   /**
    * Re-render the current frame without advancing any running animations.
    *