@solidtv/renderer 1.3.1 → 1.4.0

package/src/core/renderers/CoreShaderNode.ts

@@ -96,6 +96,12 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
   protected node: CoreNode | null = null;
   readonly time: CoreShaderType['time'] = undefined;
   update: (() => void) | undefined = undefined;
+  /**
+   * The shader-value cache key currently held by this node (set by the
+   * subclass `update()` after the most recent successful value resolution).
+   * Tracked on the base so {@link detachNode} can release it on teardown.
+   */
+  valueKey = '';
   private _valueKeyCache = '';
   private _valueKeyDirty = true;
   private _lastW = 0;
@@ -162,6 +168,23 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
     this.node = node;
   }
 
+  /**
+   * Release this node's currently-held shader-value cache entry so the shader
+   * manager's idle `cleanup()` can reclaim it, and detach from the owning node.
+   *
+   * Called from {@link CoreNode.destroy}. Mirrors the `prevKey` release done on
+   * every value-key change in the subclass `update()`; without it a destroyed
+   * node's last value-cache entry stays pinned at usage >= 1 forever and can
+   * never be evicted.
+   */
+  detachNode() {
+    if (this.valueKey.length > 0) {
+      this.stage.shManager.mutateShaderValueUsage(this.valueKey, -1);
+      this.valueKey = '';
+    }
+    this.node = null;
+  }
+
   createValueKey() {
     if (
       this._valueKeyDirty === false &&

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

@@ -0,0 +1,34 @@
+import { describe, expect, it, vi } from 'vitest';
+import { CanvasRenderer } from './CanvasRenderer.js';
+import { TextureType } from '../../textures/Texture.js';
+
+describe('CanvasRenderer.renderContext', () => {
+  it('skips drawing when canvas texture image is undefined', () => {
+    const drawImage = vi.fn();
+
+    const renderer = Object.create(CanvasRenderer.prototype) as CanvasRenderer;
+    (renderer as any).context = {
+      drawImage,
+      globalAlpha: 1,
+    };
+
+    const node = {
+      premultipliedColorTl: 0xffffffff,
+      globalTransform: { tx: 10, ty: 20 },
+      props: { w: 100, h: 50 },
+      worldAlpha: 1,
+      textureCoords: { x1: 0, y1: 0, x2: 1, y2: 1 },
+    } as any;
+
+    const texture = {
+      type: TextureType.image,
+      ctxTexture: {
+        getImage: () => undefined,
+      },
+    } as any;
+
+    expect(() => renderer.renderContext(node, texture)).not.toThrow();
+    expect(drawImage).not.toHaveBeenCalled();
+    expect((renderer as any).context.globalAlpha).toBe(1);
+  });
+});

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

@@ -63,7 +63,19 @@ export class CanvasRenderer extends CoreRenderer {
     }
 
     const hasTransform = ta !== 1;
-    const hasClipping = clippingRect.w !== 0 && clippingRect.h !== 0;
+    const clippingValid = clippingRect.valid === true;
+
+    // If the clipping rect is valid but zero-area, the node is fully clipped — skip rendering
+    if (
+      clippingValid === true &&
+      clippingRect.w === 0 &&
+      clippingRect.h === 0
+    ) {
+      return;
+    }
+
+    const hasClipping =
+      clippingValid === true && clippingRect.w !== 0 && clippingRect.h !== 0;
     const shader = node.props.shader;
     const hasShader = shader !== null;
 
@@ -124,7 +136,7 @@ export class CanvasRenderer extends CoreRenderer {
 
     if (textureType !== TextureType.color) {
       const tintColor = parseColor(color);
-      let image: ImageBitmap | HTMLCanvasElement | HTMLImageElement;
+      let image: ImageBitmap | HTMLCanvasElement | HTMLImageElement | null;
 
       if (textureType === TextureType.subTexture) {
         image = (
@@ -134,12 +146,29 @@ export class CanvasRenderer extends CoreRenderer {
         image = (texture.ctxTexture as CanvasTexture).getImage(tintColor);
       }
 
+      // The texture can disappear while an async load/fetch is racing (e.g. 404);
+      // skip drawing this frame instead of dereferencing an invalid image object.
+      if (image === null || image === undefined) {
+        return;
+      }
+
+      const imageWidth = image.width;
+      const imageHeight = image.height;
+      if (
+        typeof imageWidth !== 'number' ||
+        typeof imageHeight !== 'number' ||
+        imageWidth <= 0 ||
+        imageHeight <= 0
+      ) {
+        return;
+      }
+
       this.context.globalAlpha = tintColor.a ?? node.worldAlpha;
 
       const txCoords = node.textureCoords;
       if (txCoords) {
-        const ix = image.width;
-        const iy = image.height;
+        const ix = imageWidth;
+        const iy = imageHeight;
 
         let sx = txCoords.x1 * ix;
         let sy = txCoords.y1 * iy;

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

@@ -26,7 +26,6 @@ export class CanvasShaderNode<
 > extends CoreShaderNode<Props> {
   private updater: ((node: CoreNode, props?: Props) => void) | undefined =
     undefined;
-  private valueKey: string = '';
   computed: Partial<Computed> = {};
   applySNR: boolean;
   render: CanvasShaderType<Props>['render'];

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

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { CanvasTexture } from './CanvasTexture.js';
+
+describe('CanvasTexture.load', () => {
+  it('fails gracefully when textureData.data is null', async () => {
+    const textureSource = {
+      textureData: { data: null },
+      state: 'initial',
+      dimensions: null,
+      setState(nextState: string) {
+        this.state = nextState;
+      },
+      freeTextureData() {
+        // no-op
+      },
+    } as any;
+
+    const memManager = {
+      setTextureMemUse() {
+        // no-op
+      },
+    } as any;
+
+    const ctxTexture = new CanvasTexture(memManager, textureSource);
+
+    await expect(ctxTexture.load()).rejects.toThrow(
+      'CanvasTexture: Texture data is null',
+    );
+    expect(textureSource.state).toBe('failed');
+  });
+});

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

@@ -2,6 +2,7 @@ import type { Dimensions } from '../../../common/CommonTypes.js';
 import { assertTruthy } from '../../../utils.js';
 import { formatRgba, type IParsedColor } from '../../lib/colorParser.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
+import type { Texture } from '../../textures/Texture.js';
 
 export class CanvasTexture extends CoreContextTexture {
   protected image:
@@ -17,10 +18,23 @@ export class CanvasTexture extends CoreContextTexture {
     | undefined;
 
   async load(): Promise<void> {
+    // Capture textureData synchronously before any await - a pending
+    // freeTextureDataTask microtask could null textureSource.textureData
+    // during the first async suspension, causing onLoadRequest to fail.
+    const textureData = this.textureSource.textureData;
+    assertTruthy(textureData?.data, 'Texture data is null before load');
+
     this.textureSource.setState('loading');
 
     try {
-      const size = await this.onLoadRequest();
+      const size = await this.onLoadRequest(textureData.data);
+
+      // Guard against the texture being freed while the load was in flight
+      if (this.textureSource.state === 'freed') {
+        this.image = undefined;
+        return;
+      }
+
       this.textureSource.setState('loaded', size);
       this.textureSource.freeTextureData();
       this.updateMemSize();
@@ -63,9 +77,11 @@ export class CanvasTexture extends CoreContextTexture {
 
   getImage(
     color: IParsedColor,
-  ): ImageBitmap | HTMLCanvasElement | HTMLImageElement {
+  ): ImageBitmap | HTMLCanvasElement | HTMLImageElement | null {
     const image = this.image;
-    assertTruthy(image, 'Attempt to get unloaded image texture');
+    if (image === undefined) {
+      return null;
+    }
 
     if (color.isWhite) {
       if (this.tintCache) {
@@ -114,9 +130,21 @@ export class CanvasTexture extends CoreContextTexture {
     return canvas;
   }
 
-  private async onLoadRequest(): Promise<Dimensions> {
-    assertTruthy(this.textureSource?.textureData?.data, 'Texture data is null');
-    const { data } = this.textureSource.textureData;
+  private async onLoadRequest(
+    data: NonNullable<Texture['textureData']>['data'],
+  ): Promise<Dimensions> {
+    if (data === null) {
+      throw new Error('CanvasTexture: Texture data is null');
+    }
+
+    // CompressedData objects (KTX, PVR, ASTC) carry GPU-format mipmap buffers
+    // that cannot be decoded by Canvas2D. Reject explicitly rather than falling
+    // through silently and leaving this.image unassigned.
+    if (typeof data === 'object' && 'mipmaps' in data) {
+      throw new Error(
+        'CanvasTexture: Compressed texture data is not supported in Canvas2D render mode',
+      );
+    }
 
     // TODO: canvas from text renderer should be able to provide the canvas directly
     // instead of having to re-draw it into a new canvas...
@@ -125,7 +153,7 @@ export class CanvasTexture extends CoreContextTexture {
       canvas.width = data.width;
       canvas.height = data.height;
       const ctx = canvas.getContext('2d');
-      if (ctx) ctx.putImageData(data, 0, 0);
+      if (ctx !== null) ctx.putImageData(data, 0, 0);
       this.image = canvas;
       return { w: data.width, h: data.height };
     } else if (

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

@@ -14,10 +14,6 @@ import { SdfRenderOp } from './SdfRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
   createIndexBuffer,
-  type CoreWebGlParameters,
-  type CoreWebGlExtensions,
-  getWebGlParameters,
-  getWebGlExtensions,
   type WebGlColor,
 } from './internal/RendererUtils.js';
 import { WebGlCtxTexture } from './WebGlCtxTexture.js';
@@ -51,17 +47,11 @@ const GL_OUT_OF_MEMORY = 0x0505;
  */
 const MAX_DRAINED_GL_ERRORS = 8;
 
-interface CoreWebGlSystem {
-  parameters: CoreWebGlParameters;
-  extensions: CoreWebGlExtensions;
-}
-
 export type WebGlRenderOp = CoreNode | SdfRenderOp;
 
 export class WebGlRenderer extends CoreRenderer {
   //// WebGL Native Context and Data
   glw: WebGlContextWrapper;
-  system: CoreWebGlSystem;
 
   //// Persistent data
   quadBuffer: ArrayBuffer;
@@ -169,17 +159,20 @@ export class WebGlRenderer extends CoreRenderer {
   constructor(options: WebGlRendererOptions) {
     super(options);
 
+    // CPU-side vertex buffers, reused every frame. Their GL buffers and
+    // BufferCollections are wired up below, once the GL context exists.
     this.quadBuffer = new ArrayBuffer(this.stage.options.quadBufferSize);
     this.fQuadBuffer = new Float32Array(this.quadBuffer);
     this.uiQuadBuffer = new Uint32Array(this.quadBuffer);
 
+    // Shared SDF vertex buffer: 512 KB for ~3600 glyphs.
+    this.sdfBuffer = new ArrayBuffer(512 * 1024);
+    this.fSdfBuffer = new Float32Array(this.sdfBuffer);
+    this.uiSdfBuffer = new Uint32Array(this.sdfBuffer);
+
     this.mode = 'webgl';
 
-    const gl = createWebGLContext(
-      options.canvas,
-      options.forceWebGL2,
-      options.contextSpy,
-    );
+    const gl = createWebGLContext(options.canvas, options.contextSpy);
     const glw = (this.glw = new WebGlContextWrapper(gl));
     glw.viewport(0, 0, options.canvas.width, options.canvas.height);
 
@@ -192,11 +185,6 @@ export class WebGlRenderer extends CoreRenderer {
 
     createIndexBuffer(glw, this.stage.bufferMemory);
 
-    this.system = {
-      parameters: getWebGlParameters(this.glw),
-      extensions: getWebGlExtensions(this.glw),
-    };
-
     // Create the static node coords buffer
     // 80 is the magic number used in createIndexBuffer
     // @see RendererUtils.ts
@@ -261,13 +249,8 @@ export class WebGlRenderer extends CoreRenderer {
         },
       },
     ]);
-    // --- Shared SDF buffer ---------------------------------------------------
-    // Allocate 512 KB for SDF vertex data (~3600 glyphs).
-    const sdfBufSize = 512 * 1024;
-    this.sdfBuffer = new ArrayBuffer(sdfBufSize);
-    this.fSdfBuffer = new Float32Array(this.sdfBuffer);
-    this.uiSdfBuffer = new Uint32Array(this.sdfBuffer);
 
+    // --- Shared SDF buffer collection (CPU buffer allocated above) ----------
     const sdfWebGlBuffer = glw.createBuffer();
     const sdfStride = 6 * Float32Array.BYTES_PER_ELEMENT; // 24 bytes
     this.sdfQuadBufferCollection = new BufferCollection([

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

@@ -21,11 +21,11 @@ export type ShaderSource<T> =
 export type WebGlShaderType<T extends object = Record<string, unknown>> =
   CoreShaderType<T> & {
     /**
-     * fragment shader source for WebGl or WebGl2
+     * fragment shader source for WebGl
      */
     fragment: ShaderSource<T>;
     /**
-     * vertex shader source for WebGl or WebGl2
+     * vertex shader source for WebGl
      */
     vertex?: ShaderSource<T>;
     /**
@@ -43,7 +43,6 @@ export type WebGlShaderType<T extends object = Record<string, unknown>> =
      * extensions required for specific shader?
      */
     webgl1Extensions?: string[];
-    webgl2Extensions?: string[];
     supportsIndexedTextures?: boolean;
   };
 
@@ -53,7 +52,6 @@ export class WebGlShaderNode<
   readonly program: WebGlShaderProgram;
   private updater: ((node: CoreNode, props?: Props) => void) | undefined =
     undefined;
-  private valueKey: string = '';
   uniforms: UniformCollection = {
     single: {},
     vec2: {},

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

@@ -19,13 +19,6 @@ import { CoreNode } from '../../CoreNode.js';
 
 export class WebGlShaderProgram implements CoreShaderProgram {
   protected program: WebGLProgram | null;
-  /**
-   * Vertex Array Object
-   *
-   * @remarks
-   * Used by WebGL2 Only
-   */
-  protected vao: WebGLVertexArrayObject | undefined;
   protected renderer: WebGlRenderer;
   protected glw: WebGlContextWrapper;
   protected attributeLocations: string[];
@@ -45,22 +38,15 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     this.renderer = renderer;
     const glw = (this.glw = renderer.glw);
 
-    // Check that extensions are supported
-    const webGl2 = glw.isWebGl2();
-    let requiredExtensions: string[] = [];
-
     this.supportsIndexedTextures =
       config.supportsIndexedTextures || this.supportsIndexedTextures;
-    requiredExtensions =
-      (webGl2 && config.webgl2Extensions) ||
-      (!webGl2 && config.webgl1Extensions) ||
-      [];
 
-    const glVersion = webGl2 ? '2.0' : '1.0';
+    // Check that required extensions are supported
+    const requiredExtensions = config.webgl1Extensions || [];
     requiredExtensions.forEach((extensionName) => {
       if (!glw.getExtension(extensionName)) {
         throw new Error(
-          `Shader "${this.constructor.name}" requires extension "${extensionName}" for WebGL ${glVersion} but wasn't found`,
+          `Shader "${this.constructor.name}" requires extension "${extensionName}" for WebGL 1.0 but wasn't found`,
         );
       }
     });
@@ -310,9 +296,6 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       return;
     }
     this.glw.useProgram(this.program, this.uniformLocations!);
-    if (this.glw.isWebGl2() && this.vao) {
-      this.glw.bindVertexArray(this.vao);
-    }
   }
 
   detach(): void {

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

@@ -1,92 +1,5 @@
 import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
 
-export interface CoreWebGlParameters {
-  MAX_RENDERBUFFER_SIZE: number;
-  MAX_TEXTURE_SIZE: number;
-  MAX_VIEWPORT_DIMS: Int32Array;
-  MAX_VERTEX_TEXTURE_IMAGE_UNITS: number;
-  MAX_TEXTURE_IMAGE_UNITS: number;
-  MAX_COMBINED_TEXTURE_IMAGE_UNITS: number;
-  MAX_VERTEX_ATTRIBS: number;
-  MAX_VARYING_VECTORS: number;
-  MAX_VERTEX_UNIFORM_VECTORS: number;
-  MAX_FRAGMENT_UNIFORM_VECTORS: number;
-}
-
-/**
- * Get device specific webgl parameters
- * @param glw
- */
-export function getWebGlParameters(
-  glw: WebGlContextWrapper,
-): CoreWebGlParameters {
-  const params: CoreWebGlParameters = {
-    MAX_RENDERBUFFER_SIZE: 0,
-    MAX_TEXTURE_SIZE: 0,
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
-    MAX_VIEWPORT_DIMS: 0 as any, // Code below will replace this with an Int32Array
-    MAX_VERTEX_TEXTURE_IMAGE_UNITS: 0,
-    MAX_TEXTURE_IMAGE_UNITS: 0,
-    MAX_COMBINED_TEXTURE_IMAGE_UNITS: 0,
-    MAX_VERTEX_ATTRIBS: 0,
-    MAX_VARYING_VECTORS: 0,
-    MAX_VERTEX_UNIFORM_VECTORS: 0,
-    MAX_FRAGMENT_UNIFORM_VECTORS: 0,
-  };
-
-  // Map over all parameters and get them
-  const keys = Object.keys(params) as Array<keyof CoreWebGlParameters>;
-  keys.forEach((key) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    params[key] = glw.getParameter(glw[key]);
-  });
-
-  return params;
-}
-
-export interface CoreWebGlExtensions {
-  ANGLE_instanced_arrays: ANGLE_instanced_arrays | null;
-  WEBGL_compressed_texture_s3tc: WEBGL_compressed_texture_s3tc | null;
-  WEBGL_compressed_texture_astc: WEBGL_compressed_texture_astc | null;
-  WEBGL_compressed_texture_etc: WEBGL_compressed_texture_etc | null;
-  WEBGL_compressed_texture_etc1: WEBGL_compressed_texture_etc1 | null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  WEBGL_compressed_texture_pvrtc: any | null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  WEBKIT_WEBGL_compressed_texture_pvrtc: any | null;
-  WEBGL_compressed_texture_s3tc_srgb: WEBGL_compressed_texture_s3tc_srgb | null;
-  OES_vertex_array_object: OES_vertex_array_object | null;
-}
-
-/**
- * Get device webgl extensions
- * @param glw
- */
-export function getWebGlExtensions(
-  glw: WebGlContextWrapper,
-): CoreWebGlExtensions {
-  const extensions: CoreWebGlExtensions = {
-    ANGLE_instanced_arrays: null,
-    WEBGL_compressed_texture_s3tc: null,
-    WEBGL_compressed_texture_astc: null,
-    WEBGL_compressed_texture_etc: null,
-    WEBGL_compressed_texture_etc1: null,
-    WEBGL_compressed_texture_pvrtc: null,
-    WEBKIT_WEBGL_compressed_texture_pvrtc: null,
-    WEBGL_compressed_texture_s3tc_srgb: null,
-    OES_vertex_array_object: null,
-  };
-
-  // Map over all extensions and get them
-  const keys = Object.keys(extensions) as Array<keyof CoreWebGlExtensions>;
-  keys.forEach((key) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    extensions[key] = glw.getExtension(key);
-  });
-
-  return extensions;
-}
-
 /**
  * Allocate big memory chunk that we
  * can re-use to draw quads

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

@@ -85,7 +85,6 @@ export interface ShaderOptions {
   shaderSources?: ShaderProgramSources;
   supportsIndexedTextures?: boolean;
   webgl1Extensions?: string[];
-  webgl2Extensions?: string[];
 }
 
 // prettier-ignore

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

@@ -19,12 +19,6 @@ interface CanvasFont {
   metrics?: FontMetrics;
 }
 
-/**
- * Global font set regardless of if run in the main thread or a web worker
- */
-// const globalFontSet: FontFaceSet = (resolvedGlobal.document?.fonts ||
-//   (resolvedGlobal as unknown as { fonts: FontFaceSet }).fonts) as FontFaceSet;
-
 // Global state variables for fontHandler
 const fontFamilies: Record<string, FontFace> = {};
 const fontLoadPromises = new Map<string, Promise<void>>();

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

@@ -40,10 +40,22 @@ const layoutCache = new Map<
   }
 >();
 
+// Upper bound on layoutCache entries, enforced on idle via `cleanup`.
+// Overridden from stage options in `init`. Note: the Canvas path does not
+// currently populate `layoutCache`, so this is effectively inert today and
+// exists to keep the eviction policy uniform with the SDF backend should
+// Canvas layout caching be wired up later.
+let maxLayoutCacheSize = 250;
+
 // Initialize the Text Renderer
 const init = (stage: Stage): void => {
   const dpr = stage.options.devicePhysicalPixelRatio;
 
+  const configuredCacheSize = stage.options.textLayoutCacheSize;
+  if (configuredCacheSize !== undefined) {
+    maxLayoutCacheSize = configuredCacheSize;
+  }
+
   // Drawing canvas and context
   canvas = stage.platform.createCanvas() as HTMLCanvasElement | OffscreenCanvas;
   context = canvas.getContext('2d', { willReadFrequently: true }) as
@@ -224,6 +236,19 @@ const clearLayoutCache = (): void => {
   layoutCache.clear();
 };
 
+/**
+ * Trim the layout cache back down to `maxLayoutCacheSize`, evicting the
+ * least-recently-used entries first. Called when the stage goes idle. The
+ * Canvas path does not currently populate `layoutCache`, so this is a no-op in
+ * practice today; it mirrors the SDF backend's eviction policy.
+ */
+const cleanup = (): void => {
+  while (layoutCache.size > maxLayoutCacheSize) {
+    const oldest = layoutCache.keys().next().value as string;
+    layoutCache.delete(oldest);
+  }
+};
+
 /**
  * Add quads for rendering (Canvas doesn't use quads)
  */
@@ -252,6 +277,7 @@ const CanvasTextRenderer = {
   renderQuads,
   init,
   clearLayoutCache,
+  cleanup,
 };
 
 export default CanvasTextRenderer;