@solidtv/renderer 1.4.1 → 1.5.0-0

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,30 @@ 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: record the attribute layout into a
+        // VAO. createVao leaves the new VAO bound, so there's nothing more to do.
+        vao = this.createVao(buffer);
+        this.vaos.set(buffer, vao);
+        return;
+      }
+      glw.bindVertexArray(vao);
+      return;
+    }
+
+    // No VAO support: 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 +319,25 @@ 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.
+   */
+  private createVao(buffer: BufferCollection): WebGLVertexArrayObject | null {
+    const { glw } = this;
+    const vao = glw.createVertexArray();
+    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 +355,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 +373,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,
@@ -514,6 +515,17 @@ export type RendererMainSettings = RendererRuntimeSettings & {
    */
   textBaselineMode: TextBaselineMode;
 
+  /**
+   * Force WebGL2
+   *
+   * @remarks
+   * Force the renderer to use WebGL2. This can be used to force the renderer to
+   * use WebGL2 even if the browser supports WebGL1.
+   *
+   * @defaultValue `false`
+   */
+  forceWebGL2: boolean;
+
   /**
    * Canvas object to use for rendering
    *
@@ -688,6 +700,7 @@ export class RendererMain extends EventEmitter {
       numImageWorkers:
         settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
       enableContextSpy: settings.enableContextSpy ?? false,
+      forceWebGL2: settings.forceWebGL2 ?? false,
       inspector: settings.inspector ?? false,
       inspectorOptions: settings.inspectorOptions ?? {},
       renderEngine: settings.renderEngine,
@@ -749,6 +762,7 @@ export class RendererMain extends EventEmitter {
       deviceLogicalPixelRatio,
       devicePhysicalPixelRatio,
       enableContextSpy: settings.enableContextSpy!,
+      forceWebGL2: settings.forceWebGL2!,
       fpsUpdateInterval: settings.fpsUpdateInterval!,
       enableClear: settings.enableClear!,
       numImageWorkers: settings.numImageWorkers!,
@@ -1022,6 +1036,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.
    *

package/src/utils.ts

@@ -2,6 +2,7 @@ import type { ContextSpy } from './core/lib/ContextSpy.js';
 
 export function createWebGLContext(
   canvas: HTMLCanvasElement | OffscreenCanvas,
+  forceWebGL2 = false,
   contextSpy: ContextSpy | null,
 ): WebGLRenderingContext {
   const config: WebGLContextAttributes = {
@@ -19,7 +20,7 @@ export function createWebGLContext(
   const gl =
     // TODO: Remove this assertion once this issue is fixed in TypeScript
     // https://github.com/microsoft/TypeScript/issues/53614
-    (canvas.getContext('webgl', config) ||
+    (canvas.getContext(forceWebGL2 ? 'webgl2' : 'webgl', config) ||
       canvas.getContext(
         'experimental-webgl' as 'webgl',
         config,