@lightningjs/renderer 3.0.0-beta18 → 3.0.0-beta19

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

@@ -21,8 +21,10 @@ import type { Dimensions } from '../../../common/CommonTypes.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { Texture } from '../../textures/Texture.js';
+import { uploadCompressedTexture } from '../../lib/textureCompression.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
 import { isHTMLImageElement } from './internal/RendererUtils.js';
+import type { Bound } from '../../lib/utils.js';
 
 const TRANSPARENT_TEXTURE_DATA = new Uint8Array([0, 0, 0, 0]);
 
@@ -42,6 +44,13 @@ export class WebGlCtxTexture extends CoreContextTexture {
   private _w = 0;
   private _h = 0;
 
+  txCoords: Bound = {
+    x1: 0,
+    y1: 0,
+    x2: 1,
+    y2: 1,
+  };
+
   constructor(
     protected glw: WebGlContextWrapper,
     memManager: TextureMemoryManager,
@@ -50,6 +59,25 @@ export class WebGlCtxTexture 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();
@@ -117,9 +145,7 @@ export class WebGlCtxTexture extends CoreContextTexture {
       // 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
@@ -180,6 +206,11 @@ export class WebGlCtxTexture extends CoreContextTexture {
 
       glw.texImage2D(0, format, format, glw.UNSIGNED_BYTE, tdata);
 
+      // Check for errors after compressed texture operations
+      if (this.checkGLError() === true) {
+        return { w: 0, h: 0 };
+      }
+
       this.setTextureMemUse(h * w * formatBytes * memoryPadding);
     } else if (tdata === null) {
       w = 0;
@@ -199,21 +230,21 @@ export class WebGlCtxTexture extends CoreContextTexture {
       );
       this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
     } else if ('mipmaps' in tdata && tdata.mipmaps) {
-      const { mipmaps, w = 0, h = 0, type, glInternalFormat } = tdata;
-      const view =
-        type === 'ktx'
-          ? new DataView(mipmaps[0] ?? new ArrayBuffer(0))
-          : (mipmaps[0] as unknown as ArrayBufferView);
+      const { mipmaps, type, blockInfo } = tdata;
+      uploadCompressedTexture[type]!(glw, this._nativeCtxTexture, tdata);
 
-      glw.bindTexture(this._nativeCtxTexture);
+      // Check for errors after compressed texture operations
+      if (this.checkGLError() === true) {
+        return { w: 0, h: 0 };
+      }
 
-      glw.compressedTexImage2D(0, glInternalFormat, w, h, 0, view);
-      glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
-      glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
-      glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
-      glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
+      w = tdata.w;
+      h = tdata.h;
+      this.txCoords.x2 = w / (Math.ceil(w / blockInfo.width) * blockInfo.width);
+      this.txCoords.y2 =
+        h / (Math.ceil(h / blockInfo.height) * blockInfo.height);
 
-      this.setTextureMemUse(view.byteLength);
+      this.setTextureMemUse(mipmaps[0]?.byteLength ?? 0);
     } else if (tdata && tdata instanceof Uint8Array) {
       // Color Texture
       w = 1;
@@ -227,6 +258,11 @@ export class WebGlCtxTexture extends CoreContextTexture {
 
       glw.texImage2D(0, format, w, h, 0, format, glw.UNSIGNED_BYTE, tdata);
 
+      // Check for errors after compressed texture operations
+      if (this.checkGLError() === true) {
+        return { w: 0, h: 0 };
+      }
+
       this.setTextureMemUse(w * h * formatBytes);
     } else {
       console.error(
@@ -253,6 +289,13 @@ export class WebGlCtxTexture 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;
 

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

@@ -34,7 +34,8 @@ type ReqQuad =
   | 'rtt'
   | 'clippingRect'
   | 'height'
-  | 'width';
+  | 'width'
+  | 'time';
 type RenderOpQuadOptions = Pick<QuadOptions, ReqQuad> &
   Partial<Omit<QuadOptions, ReqQuad>> & {
     sdfShaderProps?: Record<string, unknown>;
@@ -65,6 +66,7 @@ export class WebGlRenderOp extends CoreRenderOp {
   readonly framebufferDimensions?: Dimensions | null;
   readonly alpha: number;
   readonly pixelRatio: number;
+  readonly time?: number | null;
 
   constructor(
     readonly renderer: WebGlRenderer,
@@ -83,6 +85,7 @@ export class WebGlRenderOp extends CoreRenderOp {
     this.alpha = quad.alpha;
     this.pixelRatio =
       this.parentHasRenderTexture === true ? 1 : renderer.stage.pixelRatio;
+    this.time = quad.time;
 
     /**
      * related to line 51

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

@@ -52,6 +52,7 @@ import { WebGlCtxRenderTexture } from './WebGlCtxRenderTexture.js';
 import { Default } from '../../shaders/webgl/Default.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
+import type { Dimensions } from '../../../common/CommonTypes.js';
 
 export type WebGlRendererOptions = CoreRendererOptions;
 
@@ -77,7 +78,7 @@ export class WebGlRenderer extends CoreRenderer {
   override rttNodes: CoreNode[] = [];
   activeRttNode: CoreNode | null = null;
 
-  defaultTextureCoords: TextureCoords = {
+  override defaultTextureCoords: TextureCoords = {
     x1: 0,
     y1: 0,
     x2: 1,
@@ -640,85 +641,82 @@ export class WebGlRenderer extends CoreRenderer {
     return this.defaultShaderNode;
   }
 
-  override getTextureCoords(node: CoreNode): TextureCoords {
+  override getTextureCoords(node: CoreNode): TextureCoords | undefined {
     const texture = node.texture;
     if (texture === null) {
-      return this.defaultTextureCoords;
+      return undefined;
     }
 
-    const textureOptions = node.textureOptions;
+    //this stuff needs to be properly moved to CtxSubTexture at some point in the future.
+    const ctxTexture =
+      (texture as SubTexture).parentTexture !== undefined
+        ? (texture as SubTexture).parentTexture.ctxTexture
+        : texture.ctxTexture;
+    if (ctxTexture === undefined) {
+      return undefined;
+    }
+
+    const textureOptions = node.props.textureOptions;
+
+    //early exit for textures with no options unless its a subtexture
     if (
-      texture.type === TextureType.subTexture ||
-      texture.type === TextureType.image ||
-      texture.type === TextureType.renderToTexture ||
-      textureOptions !== null
+      texture.type !== TextureType.subTexture &&
+      textureOptions === undefined
     ) {
-      const result = {
-        x1: 0,
-        y1: 0,
-        x2: 1,
-        y2: 1,
-      };
-
-      if (texture.type === TextureType.subTexture) {
-        const props = (texture as SubTexture).props;
-        const { w: parentW = 0, h: parentH = 0 } = (texture as SubTexture)
-          .parentTexture.dimensions || { w: 0, h: 0 };
-        result.x1 = props.x / parentW;
-        result.x2 = result.x1 + props.w / parentW;
-        result.y1 = props.y / parentH;
-        result.y2 = result.y1 + props.h / parentH;
-      }
-
-      if (
-        texture.type === TextureType.image &&
-        textureOptions !== null &&
-        textureOptions.resizeMode !== undefined &&
-        texture.dimensions !== null
-      ) {
-        const resizeMode = textureOptions.resizeMode;
-        const dimensions = texture.dimensions;
-        if (resizeMode.type === 'cover') {
-          const scaleX = node.props.w / dimensions.w;
-          const scaleY = node.props.h / dimensions.h;
-          const scale = Math.max(scaleX, scaleY);
-          const precision = 1 / scale;
-          // Determine based on width
-          if (scaleX < scale) {
-            const desiredSize = precision * node.props.w;
-            result.x1 =
-              (1 - desiredSize / dimensions.w) * (resizeMode.clipX ?? 0.5);
-            result.x2 = result.x1 + desiredSize / dimensions.w;
-          }
-          // Determine based on height
-          if (scaleY < scale) {
-            const desiredSize = precision * node.props.h;
-            result.y1 =
-              (1 - desiredSize / dimensions.h) * (resizeMode.clipY ?? 0.5);
-            result.y2 = result.y1 + desiredSize / dimensions.h;
-          }
-        }
-      }
+      return (ctxTexture as WebGlCtxTexture).txCoords;
+    }
 
-      // Flip texture coordinates if dictated by texture options
-      let flipY = 0;
-      if (textureOptions !== null) {
-        if (textureOptions.flipX === true) {
-          [result.x1, result.x2] = [result.x2, result.x1];
-        }
+    let { x1, x2, y1, y2 } = (ctxTexture as WebGlCtxTexture).txCoords;
+    if (texture.type === TextureType.subTexture) {
+      const { w: parentW, h: parentH } = (texture as SubTexture).parentTexture
+        .dimensions!;
+      const { x, y, w, h } = (texture as SubTexture).props;
+      x1 = x / parentW;
+      y1 = y / parentH;
+      x2 = x1 + w / parentW;
+      y2 = y1 + h / parentH;
+    }
 
-        // convert to integer for bitwise operation below
-        flipY = +(textureOptions.flipY || false);
+    const resizeMode = textureOptions.resizeMode;
+    if (
+      resizeMode !== undefined &&
+      resizeMode.type === 'cover' &&
+      texture.dimensions !== null
+    ) {
+      const dimensions = texture.dimensions as Dimensions;
+      const w = node.props.w;
+      const h = node.props.h;
+      const scaleX = w / dimensions.w;
+      const scaleY = h / dimensions.h;
+      const scale = Math.max(scaleX, scaleY);
+      const precision = 1 / scale;
+
+      // Determine based on width
+      if (scaleX < scale) {
+        const desiredSize = precision * node.props.w;
+        x1 = (1 - desiredSize / dimensions.w) * (resizeMode.clipX ?? 0.5);
+        x2 = x1 + desiredSize / dimensions.w;
       }
-
-      // Eitherone should be true
-      if (flipY ^ +(texture.type === TextureType.renderToTexture)) {
-        [result.y1, result.y2] = [result.y2, result.y1];
+      // Determine based on height
+      if (scaleY < scale) {
+        const desiredSize = precision * node.props.h;
+        y1 = (1 - desiredSize / dimensions.h) * (resizeMode.clipY ?? 0.5);
+        y2 = y1 + desiredSize / dimensions.h;
       }
-      return result as TextureCoords;
     }
 
-    return this.defaultTextureCoords;
+    if (textureOptions.flipX === true) {
+      [x1, x2] = [x2, x1];
+    }
+    if (textureOptions.flipY === true) {
+      [y1, y2] = [y2, y1];
+    }
+    return {
+      x1,
+      y1,
+      x2,
+      y2,
+    };
   }
 
   /**

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

@@ -50,6 +50,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   protected lifecycle: Pick<WebGlShaderType, 'update' | 'canBatch'>;
   protected useSystemAlpha = false;
   protected useSystemDimensions = false;
+  protected useTimeValue = false;
   public isDestroyed = false;
   supportsIndexedTextures = false;
 
@@ -123,6 +124,10 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     this.useSystemAlpha = uniLocs['u_alpha'] !== undefined;
     this.useSystemDimensions = uniLocs['u_dimensions'] !== undefined;
 
+    this.useTimeValue =
+      this.glw.getUniformLocation(program, 'u_dimensions') !== null &&
+      config.time !== undefined;
+
     this.lifecycle = {
       update: config.update,
       canBatch: config.canBatch,
@@ -149,6 +154,12 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       return this.lifecycle.canBatch(incomingQuad, currentRenderOp);
     }
 
+    if (this.useTimeValue === true) {
+      if (incomingQuad.time !== currentRenderOp.time) {
+        return false;
+      }
+    }
+
     if (this.useSystemAlpha === true) {
       if (incomingQuad.alpha !== currentRenderOp.alpha) {
         return false;
@@ -169,6 +180,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     if (incomingQuad.shader !== null) {
       shaderPropsA = incomingQuad.shader.resolvedProps;
     }
+
     if (currentRenderOp.shader !== null) {
       shaderPropsB = currentRenderOp.shader.resolvedProps;
     }
@@ -221,6 +233,10 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       );
     }
 
+    if (this.useTimeValue === true) {
+      this.glw.uniform1f('u_time', renderOp.time as number);
+    }
+
     if (this.useSystemAlpha === true) {
       this.glw.uniform1f('u_alpha', renderOp.alpha);
     }

package/src/core/shaders/webgl/Rounded.ts

@@ -80,6 +80,7 @@ export const Rounded: WebGlShaderType<RoundedProps> = {
     uniform vec2 u_resolution;
     uniform vec2 u_dimensions;
     uniform float u_alpha;
+    uniform float u_pixelRatio;
     uniform sampler2D u_texture;
 
     //custom uniforms
@@ -103,7 +104,8 @@ export const Rounded: WebGlShaderType<RoundedProps> = {
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
       float boxDist = roundedBox(boxUv, halfDimensions, u_radius);
 
-      float roundedAlpha = 1.0 - smoothstep(0.0, 1.0, boxDist);
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float roundedAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, boxDist);
 
       vec4 resColor = vec4(0.0);
       resColor = mix(resColor, color, roundedAlpha);

package/src/core/shaders/webgl/RoundedWithBorder.ts

@@ -130,7 +130,8 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
       float outerDist = roundedBox(boxUv, v_halfDimensions, u_radius);
 
-      float outerAlpha = 1.0 - smoothstep(0.0, 1.0, outerDist);
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
 
       if(v_borderZero == 1.0) {
         gl_FragColor = mix(vec4(0.0), color, outerAlpha) * u_alpha;
@@ -141,7 +142,7 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
 
       float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
-      float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
+      float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
 
       vec4 resColor = mix(u_borderColor, color, innerAlpha);
       resColor = mix(vec4(0.0), resColor, outerAlpha);

package/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts

@@ -151,7 +151,8 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
       float outerDist = roundedBox(boxUv, v_halfDimensions - 1.0, u_radius);
 
-      float outerAlpha = 1.0 - smoothstep(0.0, 1.0, outerDist);
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
 
       float shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w, u_radius + u_shadow.z);
       vec4 shadow = mix(vec4(0.0), u_shadowColor, shadowAlpha);
@@ -165,7 +166,7 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
 
       float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
-      float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
+      float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
 
       vec4 resColor = mix(u_borderColor, color, innerAlpha);
       resColor = mix(shadow, resColor, outerAlpha);

package/src/core/shaders/webgl/RoundedWithShadow.ts

@@ -81,7 +81,8 @@ export const RoundedWithShadow: WebGlShaderType<RoundedWithShadowProps> = {
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - halfDimensions;
       float boxDist = roundedBox(boxUv, halfDimensions, u_radius);
 
-      float roundedAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, boxDist);
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float roundedAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, boxDist);
 
       float shadowAlpha = shadowBox(boxUv - u_shadow.xy, halfDimensions + u_shadow.w, u_radius + u_shadow.z);
 

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

@@ -326,7 +326,7 @@ export const loadFont = async (
         premultiplyAlpha: false,
       });
 
-      atlasTexture.setRenderableOwner(this, true);
+      atlasTexture.setRenderableOwner(fontFamily, true);
       atlasTexture.preventCleanup = true; // Prevent automatic cleanup
 
       if (atlasTexture.state === 'loaded') {

package/src/core/textures/ColorTexture.ts

@@ -49,9 +49,12 @@ export class ColorTexture extends Texture {
 
   props: Required<ColorTextureProps>;
 
-  constructor(txManager: CoreTextureManager, props?: ColorTextureProps) {
+  constructor(
+    txManager: CoreTextureManager,
+    props: Required<ColorTextureProps>,
+  ) {
     super(txManager);
-    this.props = ColorTexture.resolveDefaults(props || {});
+    this.props = props;
   }
 
   get color() {
@@ -86,8 +89,7 @@ export class ColorTexture extends Texture {
   }
 
   static override makeCacheKey(props: ColorTextureProps): string {
-    const resolvedProps = ColorTexture.resolveDefaults(props);
-    return `ColorTexture,${resolvedProps.color}`;
+    return `ColorTexture,${props.color}`;
   }
 
   static override resolveDefaults(

package/src/core/textures/ImageTexture.ts

@@ -109,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;
 }
 
 /**
@@ -131,11 +137,15 @@ export class ImageTexture extends Texture {
   public props: Required<ImageTextureProps>;
   public override type: TextureType = TextureType.image;
 
-  constructor(txManager: CoreTextureManager, props: ImageTextureProps) {
+  constructor(
+    txManager: CoreTextureManager,
+    props: Required<ImageTextureProps>,
+  ) {
     super(txManager);
 
     this.platform = txManager.platform;
-    this.props = ImageTexture.resolveDefaults(props);
+    this.props = props;
+    this.maxRetryCount = props.maxRetryCount as number;
   }
 
   hasAlphaChannel(mimeType: string) {
@@ -152,14 +162,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) {
@@ -253,17 +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);
 
-      // log error only in development
-      if (isProductionEnvironment === false) {
-        console.error('ImageTexture:', e);
-      }
-
       return {
         data: null,
       };
@@ -276,23 +286,6 @@ export class ImageTexture extends Texture {
       };
     }
 
-    let w, h;
-    // check if resp.data is typeof Uint8ClampedArray else
-    // use resp.data.width and resp.data.height
-    if (resp.data instanceof Uint8Array) {
-      w = this.props.w ?? 0;
-      h = this.props.h ?? 0;
-    } else {
-      w = resp.data?.width ?? (this.props.w || 0);
-      h = resp.data?.height ?? (this.props.h || 0);
-    }
-
-    // we're loaded!
-    this.setState('fetched', {
-      w,
-      h,
-    });
-
     return {
       data: resp.data,
       premultiplyAlpha: this.props.premultiplyAlpha ?? true,
@@ -375,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(
@@ -411,6 +403,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

@@ -58,9 +58,12 @@ 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> {
@@ -75,8 +78,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, w, h),
     };

package/src/core/textures/RenderTexture.ts

@@ -42,9 +42,12 @@ 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 w() {
@@ -64,8 +67,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,
       premultiplyAlpha: null,