@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta20

package/src/core/textures/ImageTexture.ts

@@ -29,7 +29,9 @@ import {
   isBase64Image,
 } from '../lib/utils.js';
 import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
-import { fetchJson } from '../text-rendering/font-face-types/utils.js';
+import { fetchJson } from '../lib/utils.js';
+import type { Platform } from '../platforms/Platform.js';
+import { isProductionEnvironment } from '../../utils.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -65,12 +67,12 @@ export interface ImageTextureProps {
    * Width of the image to be used as a texture. If not provided, the image's
    * natural width will be used.
    */
-  width?: number | null;
+  w?: number | null;
   /**
    * Height of the image to be used as a texture. If not provided, the image's
    * natural height will be used.
    */
-  height?: number | null;
+  h?: number | null;
   /**
    * Type, indicate an image type for overriding type detection
    *
@@ -107,6 +109,12 @@ export interface ImageTextureProps {
    * @default null
    */
   sy?: number | null;
+  /**
+   * Maximum number of times to retry loading the image if it fails.
+   *
+   * @default 5
+   */
+  maxRetryCount?: number;
 }
 
 /**
@@ -124,13 +132,20 @@ export interface ImageTextureProps {
  * {@link ImageTextureProps.premultiplyAlpha} prop to `false`.
  */
 export class ImageTexture extends Texture {
-  public props: Required<ImageTextureProps>;
+  private platform: Platform;
 
+  public props: Required<ImageTextureProps>;
   public override type: TextureType = TextureType.image;
 
-  constructor(txManager: CoreTextureManager, props: ImageTextureProps) {
+  constructor(
+    txManager: CoreTextureManager,
+    props: Required<ImageTextureProps>,
+  ) {
     super(txManager);
-    this.props = ImageTexture.resolveDefaults(props);
+
+    this.platform = txManager.platform;
+    this.props = props;
+    this.maxRetryCount = props.maxRetryCount as number;
   }
 
   hasAlphaChannel(mimeType: string) {
@@ -144,24 +159,30 @@ export class ImageTexture extends Texture {
       img.crossOrigin = 'anonymous';
     }
 
-    return new Promise<{ data: HTMLImageElement; premultiplyAlpha: boolean }>(
-      (resolve) => {
-        img.onload = () => {
-          resolve({ data: img, premultiplyAlpha: hasAlpha });
-        };
+    return new Promise<{
+      data: HTMLImageElement | null;
+      premultiplyAlpha: boolean;
+    }>((resolve, reject) => {
+      img.onload = () => {
+        resolve({ data: img, premultiplyAlpha: hasAlpha });
+      };
 
-        img.onerror = () => {
-          console.warn('Image loading failed, returning fallback object.');
-          resolve({ data: img, 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) {
-          img.src = URL.createObjectURL(src);
-        } else {
-          img.src = src;
-        }
-      },
-    );
+      if (src instanceof Blob) {
+        img.src = URL.createObjectURL(src);
+      } else {
+        img.src = src;
+      }
+    });
   }
 
   async createImageBitmap(
@@ -180,23 +201,30 @@ 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',
-      });
+      const bitmap = await this.platform.createImageBitmap(
+        blob,
+        sx || 0,
+        sy || 0,
+        sw,
+        sh,
+        {
+          premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        },
+      );
       return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
     } 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),
+        data: await this.platform.createImageBitmap(blob),
         premultiplyAlpha: hasAlphaChannel,
       };
     }
 
     // default createImageBitmap without crop but with options
-    const bitmap = await createImageBitmap(blob, {
+    const bitmap = await this.platform.createImageBitmap(blob, {
       premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
       colorSpaceConversion: 'none',
       imageOrientation: 'none',
@@ -240,11 +268,12 @@ export class ImageTexture extends Texture {
   }
 
   override async getTextureSource(): Promise<TextureData> {
-    let resp;
+    let resp: TextureData;
     try {
       resp = await this.determineImageTypeAndLoadImage();
     } catch (e) {
       this.setState('failed', e as Error);
+
       return {
         data: null,
       };
@@ -257,23 +286,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,
@@ -317,8 +329,8 @@ export class ImageTexture extends Texture {
     if (type === 'svg') {
       return loadSvg(
         absoluteSrc,
-        this.props.width,
-        this.props.height,
+        this.props.w,
+        this.props.h,
         this.props.sx,
         this.props.sy,
         this.props.sw,
@@ -329,8 +341,8 @@ export class ImageTexture extends Texture {
     if (isSvgImage(src) === true) {
       return loadSvg(
         absoluteSrc,
-        this.props.width,
-        this.props.height,
+        this.props.w,
+        this.props.h,
         this.props.sx,
         this.props.sy,
         this.props.sw,
@@ -356,26 +368,25 @@ export class ImageTexture extends Texture {
    * @returns The cache key as a string, or `false` if the key cannot be generated.
    */
   static override makeCacheKey(props: ImageTextureProps): string | false {
-    const resolvedProps = ImageTexture.resolveDefaults(props);
     // Only cache key-able textures; prioritise key
-    const key = resolvedProps.key || resolvedProps.src;
+    const key = props.key || props.src;
     if (typeof key !== 'string') {
       return false;
     }
 
-    // if we have source dimensions, cache the texture separately
-    let dimensionProps = '';
-    if (resolvedProps.sh !== null && resolvedProps.sw !== null) {
-      dimensionProps += ',';
-      dimensionProps += resolvedProps.sx ?? '';
-      dimensionProps += resolvedProps.sy ?? '';
-      dimensionProps += resolvedProps.sw || '';
-      dimensionProps += resolvedProps.sh || '';
+    let cacheKey = `ImageTexture,${key},${props.premultiplyAlpha ?? 'true'},${
+      props.maxRetryCount
+    }`;
+
+    if (props.sh !== null && props.sw !== null) {
+      cacheKey += ',';
+      cacheKey += props.sx ?? '';
+      cacheKey += props.sy ?? '';
+      cacheKey += props.sw || '';
+      cacheKey += props.sh || '';
     }
 
-    return `ImageTexture,${key},${
-      resolvedProps.premultiplyAlpha ?? 'true'
-    }${dimensionProps}`;
+    return cacheKey;
   }
 
   static override resolveDefaults(
@@ -386,12 +397,13 @@ export class ImageTexture extends Texture {
       premultiplyAlpha: props.premultiplyAlpha ?? true, // null,
       key: props.key ?? null,
       type: props.type ?? null,
-      width: props.width ?? null,
-      height: props.height ?? null,
+      w: props.w ?? null,
+      h: props.h ?? null,
       sx: props.sx ?? null,
       sy: props.sy ?? null,
       sw: props.sw ?? null,
       sh: props.sh ?? null,
+      maxRetryCount: props.maxRetryCount ?? 5,
     };
   }
 

package/src/core/textures/NoiseTexture.ts

@@ -29,13 +29,13 @@ export interface NoiseTextureProps {
    *
    * @default 128
    */
-  width?: number;
+  w?: number;
   /**
    * Height of texture
    *
    * @default 128
    */
-  height?: number;
+  h?: number;
   /**
    * A number value that can be varied to force new textures to be generated
    *
@@ -58,14 +58,17 @@ export class NoiseTexture extends Texture {
 
   public override type: TextureType = TextureType.noise;
 
-  constructor(txManager: CoreTextureManager, props: NoiseTextureProps) {
+  constructor(
+    txManager: CoreTextureManager,
+    props: Required<NoiseTextureProps>,
+  ) {
     super(txManager);
-    this.props = NoiseTexture.resolveDefaults(props);
+    this.props = props;
   }
 
   override async getTextureSource(): Promise<TextureData> {
-    const { width, height } = this.props;
-    const size = width * height * 4;
+    const { w, h } = this.props;
+    const size = w * h * 4;
     const pixelData8 = new Uint8ClampedArray(size);
     for (let i = 0; i < size; i += 4) {
       const v = Math.floor(Math.random() * 256);
@@ -75,10 +78,9 @@ 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),
+      data: new ImageData(pixelData8, w, h),
     };
   }
 
@@ -87,15 +89,15 @@ export class NoiseTexture extends Texture {
       return false;
     }
     const resolvedProps = NoiseTexture.resolveDefaults(props);
-    return `NoiseTexture,${resolvedProps.width},${resolvedProps.height},${resolvedProps.cacheId}`;
+    return `NoiseTexture,${resolvedProps.w},${resolvedProps.h},${resolvedProps.cacheId}`;
   }
 
   static override resolveDefaults(
     props: NoiseTextureProps,
   ): Required<NoiseTextureProps> {
     return {
-      width: props.width ?? 128,
-      height: props.height ?? 128,
+      w: props.w ?? 128,
+      h: props.h ?? 128,
       cacheId: props.cacheId ?? 0,
     };
   }

package/src/core/textures/RenderTexture.ts

@@ -28,13 +28,13 @@ export interface RenderTextureProps {
    * WebGL Texture width
    * @default 256
    */
-  width?: number;
+  w?: number;
 
   /**
    * WebGL Texture height
    * @default 256
    */
-  height?: number;
+  h?: number;
 }
 
 export class RenderTexture extends Texture {
@@ -42,30 +42,32 @@ export class RenderTexture extends Texture {
 
   public override type: TextureType = TextureType.renderToTexture;
 
-  constructor(txManager: CoreTextureManager, props?: RenderTextureProps) {
+  constructor(
+    txManager: CoreTextureManager,
+    props: Required<RenderTextureProps>,
+  ) {
     super(txManager);
-    this.props = RenderTexture.resolveDefaults(props || {});
+    this.props = props;
   }
 
-  get width() {
-    return this.props.width;
+  get w() {
+    return this.props.w;
   }
 
-  set width(value: number) {
-    this.props.width = value;
+  set w(value: number) {
+    this.props.w = value;
   }
 
-  get height() {
-    return this.props.height;
+  get h() {
+    return this.props.h;
   }
 
-  set height(value: number) {
-    this.props.height = value;
+  set h(value: number) {
+    this.props.h = value;
   }
 
   override async getTextureSource(): Promise<TextureData> {
-    this.setState('fetched');
-
+    // Render texture data ready - dimensions will be set during upload
     return {
       data: null,
       premultiplyAlpha: null,
@@ -76,8 +78,8 @@ export class RenderTexture extends Texture {
     props: RenderTextureProps,
   ): Required<RenderTextureProps> {
     return {
-      width: props.width || 256,
-      height: props.height || 256,
+      w: props.w || 256,
+      h: props.h || 256,
     };
   }
 

package/src/core/textures/SubTexture.ts

@@ -30,6 +30,8 @@ import {
   type TextureState,
 } from './Texture.js';
 
+let subTextureId = 0;
+
 /**
  * Properties of the {@link SubTexture}
  */
@@ -60,12 +62,12 @@ export interface SubTextureProps {
    *
    * @default 0
    */
-  width?: number;
+  w?: number;
 
   /**
    * The height of the sub-texture in pixels
    **/
-  height?: number;
+  h?: number;
 }
 
 /**
@@ -75,18 +77,19 @@ export interface SubTextureProps {
  * The parent texture can be a Sprite Sheet/Texture Atlas and set using the
  * {@link SubTextureProps.texture} prop. The sub-region relative to the parent
  * texture is defined with the {@link SubTextureProps.x},
- * {@link SubTextureProps.y}, {@link SubTextureProps.width}, and
- * {@link SubTextureProps.height} pixel values.
+ * {@link SubTextureProps.y}, {@link SubTextureProps.w}, and
+ * {@link SubTextureProps.h} pixel values.
  */
 export class SubTexture extends Texture {
   props: Required<SubTextureProps>;
   parentTexture: Texture;
 
   public override type: TextureType = TextureType.subTexture;
+  public subtextureId = `subtexture-${subTextureId++}`;
 
-  constructor(txManager: CoreTextureManager, props: SubTextureProps) {
+  constructor(txManager: CoreTextureManager, props: Required<SubTextureProps>) {
     super(txManager);
-    this.props = SubTexture.resolveDefaults(props || {});
+    this.props = props;
 
     assertTruthy(this.props.texture, 'SubTexture requires a parent texture');
     assertTruthy(
@@ -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 !== null) {
+        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 !== null) {
+        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);
@@ -133,51 +130,33 @@ export class SubTexture extends Texture {
   private onParentTxLoaded: TextureLoadedEventHandler = () => {
     // We ignore the parent's passed dimensions, and simply use the SubTexture's
     // configured dimensions (because that's all that matters here)
-    this.forwardParentTxState('loaded', {
-      width: this.props.width,
-      height: this.props.height,
+    this.setState('loaded', {
+      w: this.props.w,
+      h: this.props.h,
     });
   };
 
   private onParentTxFailed: TextureFailedEventHandler = (target, error) => {
-    this.forwardParentTxState('failed', error);
-  };
-
-  private onParentTxFetched = () => {
-    this.forwardParentTxState('fetched', {
-      width: this.props.width,
-      height: this.props.height,
-    });
-  };
-
-  private onParentTxFetching = () => {
-    this.forwardParentTxState('fetching');
+    this.retryCount = this.parentTexture.retryCount - 1;
+    this.setState('failed', error);
   };
 
   private onParentTxLoading = () => {
-    this.forwardParentTxState('loading');
+    this.setState('loading');
   };
 
   private onParentTxFreed = () => {
-    this.forwardParentTxState('freed');
+    this.setState('freed');
   };
 
-  private forwardParentTxState(
-    state: TextureState,
-    errorOrDimensions?: Error | Dimensions,
-  ) {
-    this.setState(state, errorOrDimensions);
-  }
-
   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,
       });
@@ -196,8 +175,8 @@ export class SubTexture extends Texture {
       texture: props.texture,
       x: props.x || 0,
       y: props.y || 0,
-      width: props.width || 0,
-      height: props.height || 0,
+      w: props.w || 0,
+      h: props.h || 0,
     };
   }