@lightningjs/renderer 2.16.0 → 2.18.0

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

@@ -22,7 +22,6 @@ import { assertTruthy } from '../../../utils.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { Texture } from '../../textures/Texture.js';
-import { isPowerOfTwo } from '../../utils.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
 import { isHTMLImageElement } from './internal/RendererUtils.js';
 
@@ -52,6 +51,25 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     super(memManager, textureSource);
   }
 
+  /**
+   * GL error check with direct state marking
+   * Uses cached error result to minimize function calls
+   */
+  private checkGLError(): boolean {
+    // Skip if already failed to prevent double-processing
+    if (this.state === 'failed') {
+      return true;
+    }
+
+    const error = this.glw.getError();
+    if (error !== 0) {
+      this.state = 'failed';
+      this.textureSource.setState('failed', new Error(`WebGL Error: ${error}`));
+      return true;
+    }
+    return false;
+  }
+
   get ctxTexture(): WebGLTexture | null {
     if (this.state === 'freed') {
       this.load();
@@ -92,10 +110,11 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
 
     if (this._nativeCtxTexture === null) {
       this.state = 'failed';
-      const error = new Error('Could not create WebGL Texture');
-      this.textureSource.setState('failed', error);
-      console.error('Could not create WebGL Texture');
-      throw error;
+      this.textureSource.setState(
+        'failed',
+        new Error('WebGL Texture creation failed'),
+      );
+      return;
     }
 
     try {
@@ -113,16 +132,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       // Update the texture source's width and height so that it can be used
       // for rendering.
       this.textureSource.setState('loaded', { width, height });
-
-      // cleanup source texture data next tick
-      // This is done using queueMicrotask to ensure it runs after the current
-      // event loop tick, allowing the texture to be fully loaded and bound
-      // to the GL context before freeing the source data.
-      // This is important to avoid issues with the texture data being
-      // freed while the texture is still being loaded or used.
-      queueMicrotask(() => {
-        this.textureSource.freeTextureData();
-      });
+      this.textureSource.freeTextureData();
     } catch (err: unknown) {
       // If the texture has been freed while loading, return early.
       // Type assertion needed because state could change during async operations
@@ -130,12 +140,9 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         return;
       }
 
+      // Ensure texture is marked as failed
       this.state = 'failed';
-      const error = err instanceof Error ? err : new Error(String(err));
-      this.textureSource.setState('failed', error);
-      this.textureSource.freeTextureData();
-      console.error(err);
-      throw error; // Re-throw to propagate the error
+      this.textureSource.setState('failed');
     }
   }
 
@@ -145,10 +152,19 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
   async onLoadRequest(): Promise<Dimensions> {
     const { glw } = this;
     const textureData = this.textureSource.textureData;
+
+    // Early return if texture is already failed
+    if (this.state === 'failed') {
+      return { width: 0, height: 0 };
+    }
+
     if (textureData === null || this._nativeCtxTexture === null) {
-      throw new Error(
-        'Texture data or native texture is null ' + this.textureSource.type,
+      this.state = 'failed';
+      this.textureSource.setState(
+        'failed',
+        new Error('No texture data available'),
       );
+      return { width: 0, height: 0 };
     }
 
     // Set to a 1x1 transparent texture
@@ -160,6 +176,11 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
 
     glw.activeTexture(0);
 
+    // High-performance error check - single call, direct state marking
+    if (this.checkGLError() === true) {
+      return { width: 0, height: 0 };
+    }
+
     const tdata = textureData.data;
     const format = glw.RGBA;
     const formatBytes = 4;
@@ -183,25 +204,13 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
 
       glw.texImage2D(0, format, format, glw.UNSIGNED_BYTE, tdata);
 
-      this.setTextureMemUse(height * width * formatBytes * memoryPadding);
-    } else if (tdata === null) {
-      width = 0;
-      height = 0;
-      // Reset to a 1x1 transparent texture
-      glw.bindTexture(this._nativeCtxTexture);
+      // Check for errors after image upload operations
+      if (this.checkGLError() === true) {
+        return { width: 0, height: 0 };
+      }
 
-      glw.texImage2D(
-        0,
-        format,
-        1,
-        1,
-        0,
-        format,
-        glw.UNSIGNED_BYTE,
-        TRANSPARENT_TEXTURE_DATA,
-      );
-      this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
-    } else if ('mipmaps' in tdata && tdata.mipmaps) {
+      this.setTextureMemUse(height * width * formatBytes * memoryPadding);
+    } else if (tdata && 'mipmaps' in tdata && tdata.mipmaps) {
       const { mipmaps, width = 0, height = 0, type, glInternalFormat } = tdata;
       const view =
         type === 'ktx'
@@ -216,6 +225,11 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
       glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
 
+      // Check for errors after compressed texture operations
+      if (this.checkGLError() === true) {
+        return { width: 0, height: 0 };
+      }
+
       this.setTextureMemUse(view.byteLength);
     } else if (tdata && tdata instanceof Uint8Array) {
       // Color Texture
@@ -239,12 +253,24 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         tdata,
       );
 
+      // Check for errors after color texture operations
+      if (this.checkGLError() === true) {
+        return { width: 0, height: 0 };
+      }
+
       this.setTextureMemUse(width * height * formatBytes);
     } else {
       console.error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,
         textureData,
       );
+
+      this.state = 'failed';
+      this.textureSource.setState(
+        'failed',
+        new Error('Unexpected texture data'),
+      );
+      return { width: 0, height: 0 };
     }
 
     return {
@@ -265,6 +291,13 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
 
     this.state = 'freed';
     this.textureSource.setState('freed');
+    this.release();
+  }
+
+  /**
+   * Release the WebGLTexture from the GPU without changing state
+   */
+  release(): void {
     this._w = 0;
     this._h = 0;
 
@@ -308,6 +341,11 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
     glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
 
+    const error = glw.getError();
+    if (error !== 0) {
+      return null;
+    }
+
     return nativeTexture;
   }
 }

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

@@ -412,7 +412,7 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
         this.setStatus(state, 'failed', new Error(msg));
         return;
       }
-      trFontFace.texture.setRenderableOwner(state, true);
+      trFontFace.texture.setRenderableOwner(state.props.fontFamily, true);
     }
 
     // If the font hasn't been loaded yet, stop here.
@@ -787,13 +787,16 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
     renderable: boolean,
   ): void {
     super.setIsRenderable(state, renderable);
-    state.trFontFace?.texture.setRenderableOwner(state, renderable);
+    state.trFontFace?.texture.setRenderableOwner(
+      state.props.fontFamily,
+      renderable,
+    );
   }
 
   override destroyState(state: SdfTextRendererState): void {
     super.destroyState(state);
     // If there's a Font Face assigned we must free the owner relation to its texture
-    state.trFontFace?.texture.setRenderableOwner(state, false);
+    state.trFontFace?.texture.setRenderableOwner(state.props.fontFamily, false);
   }
   //#endregion Overrides
 
@@ -813,7 +816,10 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
   protected releaseFontFace(state: SdfTextRendererState) {
     state.resLineHeight = undefined;
     if (state.trFontFace) {
-      state.trFontFace.texture.setRenderableOwner(state, false);
+      state.trFontFace.texture.setRenderableOwner(
+        state.props.fontFamily,
+        false,
+      );
       state.trFontFace = undefined;
     }
   }

package/src/core/textures/ColorTexture.ts

@@ -45,13 +45,12 @@ export interface ColorTextureProps {
  * a Node are.
  */
 export class ColorTexture extends Texture {
-  public override type: TextureType = TextureType.color;
+  override readonly type = TextureType.color as const;
+  public props: Required<ColorTextureProps>;
 
-  props: Required<ColorTextureProps>;
-
-  constructor(txManager: CoreTextureManager, props?: ColorTextureProps) {
+  constructor(txManager: CoreTextureManager, props: ColorTextureProps) {
     super(txManager);
-    this.props = ColorTexture.resolveDefaults(props || {});
+    this.props = ColorTexture.resolveDefaults(props);
   }
 
   get color() {
@@ -77,8 +76,6 @@ export class ColorTexture extends Texture {
       pixelData[3] = (this.color >>> 24) & 0xff; // Alpha
     }
 
-    this.setState('fetched', { width: 1, height: 1 });
-
     return {
       data: pixelData,
       premultiplyAlpha: true,

package/src/core/textures/ImageTexture.ts

@@ -107,6 +107,13 @@ export interface ImageTextureProps {
    * @default null
    */
   sy?: number | null;
+
+  /**
+   * Maximum number of times to retry loading the image if it fails.
+   *
+   * @default 5
+   */
+  maxRetryCount?: number | null;
 }
 
 /**
@@ -124,13 +131,14 @@ export interface ImageTextureProps {
  * {@link ImageTextureProps.premultiplyAlpha} prop to `false`.
  */
 export class ImageTexture extends Texture {
+  override readonly type = TextureType.image as const;
   public props: Required<ImageTextureProps>;
 
-  public override type: TextureType = TextureType.image;
-
   constructor(txManager: CoreTextureManager, props: ImageTextureProps) {
+    const resolvedProps = ImageTexture.resolveDefaults(props);
     super(txManager);
-    this.props = ImageTexture.resolveDefaults(props);
+    this.props = resolvedProps;
+    this.maxRetryCount = props.maxRetryCount as number;
   }
 
   hasAlphaChannel(mimeType: string) {
@@ -147,14 +155,19 @@ export class ImageTexture extends Texture {
     return new Promise<{
       data: HTMLImageElement | null;
       premultiplyAlpha: boolean;
-    }>((resolve) => {
+    }>((resolve, reject) => {
       img.onload = () => {
         resolve({ data: img, premultiplyAlpha: hasAlpha });
       };
 
-      img.onerror = () => {
-        console.warn('Image loading failed, returning fallback object.');
-        resolve({ data: null, premultiplyAlpha: hasAlpha });
+      img.onerror = (err) => {
+        const errorMessage =
+          err instanceof Error
+            ? err.message
+            : err instanceof Event
+            ? `Image loading failed for ${img.src}`
+            : 'Unknown image loading error';
+        reject(new Error(`Image loading failed: ${errorMessage}`));
       };
 
       if (src instanceof Blob) {
@@ -181,28 +194,40 @@ export class ImageTexture extends Texture {
 
     if (imageBitmapSupported.full === true && sw !== null && sh !== null) {
       // createImageBitmap with crop
-      const bitmap = await createImageBitmap(blob, sx || 0, sy || 0, sw, sh, {
-        premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-        colorSpaceConversion: 'none',
-        imageOrientation: 'none',
-      });
-      return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
+      try {
+        const bitmap = await createImageBitmap(blob, sx || 0, sy || 0, sw, sh, {
+          premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        });
+        return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
+      } catch (error) {
+        throw new Error(`Failed to create image bitmap with crop: ${error}`);
+      }
     } else if (imageBitmapSupported.basic === true) {
       // basic createImageBitmap without options or crop
       // this is supported for Chrome v50 to v52/54 that doesn't support options
-      return {
-        data: await createImageBitmap(blob),
-        premultiplyAlpha: hasAlphaChannel,
-      };
+      try {
+        return {
+          data: await createImageBitmap(blob),
+          premultiplyAlpha: hasAlphaChannel,
+        };
+      } catch (error) {
+        throw new Error(`Failed to create basic image bitmap: ${error}`);
+      }
     }
 
     // default createImageBitmap without crop but with options
-    const bitmap = await createImageBitmap(blob, {
-      premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-      colorSpaceConversion: 'none',
-      imageOrientation: 'none',
-    });
-    return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
+    try {
+      const bitmap = await createImageBitmap(blob, {
+        premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+        colorSpaceConversion: 'none',
+        imageOrientation: 'none',
+      });
+      return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
+    } catch (error) {
+      throw new Error(`Failed to create image bitmap with options: ${error}`);
+    }
   }
 
   async loadImage(src: string) {
@@ -214,14 +239,18 @@ export class ImageTexture extends Texture {
         this.txManager.hasWorker === true &&
         this.txManager.imageWorkerManager !== null
       ) {
-        return this.txManager.imageWorkerManager.getImage(
-          src,
-          premultiplyAlpha,
-          sx,
-          sy,
-          sw,
-          sh,
-        );
+        try {
+          return this.txManager.imageWorkerManager.getImage(
+            src,
+            premultiplyAlpha,
+            sx,
+            sy,
+            sw,
+            sh,
+          );
+        } catch (error) {
+          throw new Error(`Failed to load image via worker: ${error}`);
+        }
       }
 
       let blob;
@@ -229,9 +258,11 @@ export class ImageTexture extends Texture {
       if (isBase64Image(src) === true) {
         blob = dataURIToBlob(src);
       } else {
-        blob = await fetchJson(src, 'blob').then(
-          (response) => response as Blob,
-        );
+        try {
+          blob = (await fetchJson(src, 'blob')) as Blob;
+        } catch (error) {
+          throw new Error(`Failed to fetch image blob from ${src}: ${error}`);
+        }
       }
 
       return this.createImageBitmap(blob, premultiplyAlpha, sx, sy, sw, sh);
@@ -258,23 +289,6 @@ export class ImageTexture extends Texture {
       };
     }
 
-    let width, height;
-    // check if resp.data is typeof Uint8ClampedArray else
-    // use resp.data.width and resp.data.height
-    if (resp.data instanceof Uint8Array) {
-      width = this.props.width ?? 0;
-      height = this.props.height ?? 0;
-    } else {
-      width = resp.data?.width ?? (this.props.width || 0);
-      height = resp.data?.height ?? (this.props.height || 0);
-    }
-
-    // we're loaded!
-    this.setState('fetched', {
-      width,
-      height,
-    });
-
     return {
       data: resp.data,
       premultiplyAlpha: this.props.premultiplyAlpha ?? true,
@@ -393,6 +407,7 @@ export class ImageTexture extends Texture {
       sy: props.sy ?? null,
       sw: props.sw ?? null,
       sh: props.sh ?? null,
+      maxRetryCount: props.maxRetryCount ?? 5,
     };
   }
 

package/src/core/textures/NoiseTexture.ts

@@ -75,7 +75,7 @@ export class NoiseTexture extends Texture {
       pixelData8[i + 3] = 255;
     }
 
-    this.setState('fetched');
+    // Noise texture data ready - dimensions will be set during upload
 
     return {
       data: new ImageData(pixelData8, width, height),

package/src/core/textures/RenderTexture.ts

@@ -64,7 +64,7 @@ export class RenderTexture extends Texture {
   }
 
   override async getTextureSource(): Promise<TextureData> {
-    this.setState('fetched');
+    // Render texture data ready - dimensions will be set during upload
 
     return {
       data: null,

package/src/core/textures/SubTexture.ts

@@ -30,6 +30,8 @@ import {
   type TextureState,
 } from './Texture.js';
 
+let subTextureId = 0;
+
 /**
  * Properties of the {@link SubTexture}
  */
@@ -83,6 +85,7 @@ export class SubTexture extends Texture {
   parentTexture: Texture;
 
   public override type: TextureType = TextureType.subTexture;
+  public subtextureId = `subtexture-${subTextureId++}`;
 
   constructor(txManager: CoreTextureManager, props: SubTextureProps) {
     super(txManager);
@@ -97,8 +100,8 @@ export class SubTexture extends Texture {
     // Resolve parent texture from cache or fallback to provided texture
     this.parentTexture = txManager.resolveParentTexture(this.props.texture);
 
-    if (this.renderableOwners.size > 0) {
-      this.parentTexture.setRenderableOwner(this, true);
+    if (this.renderableOwners.length > 0) {
+      this.parentTexture.setRenderableOwner(this.subtextureId, true);
     }
 
     // If parent texture is already loaded / failed, trigger loaded event manually
@@ -107,23 +110,17 @@ export class SubTexture extends Texture {
     // synchronous task after calling loadTexture()
     queueMicrotask(() => {
       const parentTx = this.parentTexture;
-      if (parentTx.state === 'loaded') {
-        this.onParentTxLoaded(parentTx, parentTx.dimensions!);
-      } else if (parentTx.state === 'fetching') {
-        this.onParentTxFetching();
-      } else if (parentTx.state === 'fetched') {
-        this.onParentTxFetched();
+      if (parentTx.state === 'loaded' && parentTx.dimensions) {
+        this.onParentTxLoaded(parentTx, parentTx.dimensions);
       } else if (parentTx.state === 'loading') {
         this.onParentTxLoading();
-      } else if (parentTx.state === 'failed') {
-        this.onParentTxFailed(parentTx, parentTx.error!);
+      } else if (parentTx.state === 'failed' && parentTx.error) {
+        this.onParentTxFailed(parentTx, parentTx.error);
       } else if (parentTx.state === 'freed') {
         this.onParentTxFreed();
       }
 
-      parentTx.on('fetched', this.onParentTxFetched);
       parentTx.on('loading', this.onParentTxLoading);
-      parentTx.on('fetching', this.onParentTxFetching);
       parentTx.on('loaded', this.onParentTxLoaded);
       parentTx.on('failed', this.onParentTxFailed);
       parentTx.on('freed', this.onParentTxFreed);
@@ -143,17 +140,6 @@ export class SubTexture extends Texture {
     this.forwardParentTxState('failed', error);
   };
 
-  private onParentTxFetched = () => {
-    this.forwardParentTxState('fetched', {
-      width: this.props.width,
-      height: this.props.height,
-    });
-  };
-
-  private onParentTxFetching = () => {
-    this.forwardParentTxState('fetching');
-  };
-
   private onParentTxLoading = () => {
     this.forwardParentTxState('loading');
   };
@@ -171,17 +157,14 @@ export class SubTexture extends Texture {
 
   override onChangeIsRenderable(isRenderable: boolean): void {
     // Propagate the renderable owner change to the parent texture
-    this.parentTexture.setRenderableOwner(this, isRenderable);
+    this.parentTexture.setRenderableOwner(this.subtextureId, isRenderable);
   }
 
   override async getTextureSource(): Promise<TextureData> {
-    // Check if parent texture is loaded
-    return new Promise((resolve, reject) => {
-      this.setState('fetched');
-      resolve({
-        data: this.props,
-      });
-    });
+    // SubTexture data ready - dimensions will be set during upload
+    return {
+      data: this.props,
+    };
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars