@lightningjs/renderer 3.0.0-beta17 → 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/canvas/RadialGradient.ts

@@ -52,7 +52,7 @@ export const RadialGradient: CanvasShaderType<
       pivotY: props.pivot[1] * node.h,
       scaleX,
       scaleY,
-      size: Math.min(pWidth, pHeight) * 0.5,
+      size: Math.min(pWidth, pHeight),
       colors: props.colors.map((value) => this.toColorString(value)),
     };
   },

package/src/core/shaders/templates/RadialGradientTemplate.ts

@@ -32,13 +32,15 @@ export interface RadialGradientProps {
    */
   stops: number[];
   /**
-   * Width of the RadialGradientEffect
+   * radial width of the RadialGradientEffect
+   *
+   * @remarks from the center to the outer edge of the gradient
    */
   w: number;
   /**
-   * height of the RadialGradientEffect
-   *
-   * @remarks if not defined uses the width value
+   * radial height of the RadialGradientEffect
+   * if not defined uses the width value
+   * @remarks from the center to the outer edge of the gradient
    */
   h: number;
   /**

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

@@ -98,7 +98,8 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
       vec2 gradVec = t - f;
       float dist = dot(v_textureCoords.xy * u_dimensions - f, gradVec) / dot(gradVec, gradVec);
       vec4 colorOut = getGradientColor(dist);
-      gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+      vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
+      gl_FragColor = vec4(blendedRGB, color.a);
     }
   `;
   },

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

@@ -33,7 +33,7 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
       props.pivot[0] * node.w,
       props.pivot[1] * node.h,
     );
-    this.uniform2f('u_size', props.w * 0.5, props.h * 0.5);
+    this.uniform2f('u_size', props.w, props.h);
     this.uniform1fv('u_stops', new Float32Array(props.stops));
     const colors: number[] = [];
     for (let i = 0; i < props.colors.length; i++) {
@@ -63,15 +63,13 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
 
       uniform vec2 u_projection;
       uniform vec2 u_size;
+
       uniform float u_stops[MAX_STOPS];
       uniform vec4 u_colors[MAX_STOPS];
 
       varying vec4 v_color;
       varying vec2 v_textureCoords;
-
-      vec2 calcPoint(float d, float angle) {
-        return d * vec2(cos(angle), sin(angle)) + (u_dimensions * 0.5);
-      }
+      varying vec2 v_nodeCoords;
 
       vec4 getGradientColor(float dist) {
         dist = clamp(dist, 0.0, 1.0);
@@ -92,15 +90,18 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
             return mix(u_colors[i], u_colors[i + 1], lDist);
           }
         }
+
+        return u_colors[LAST_STOP];
       }
 
       void main() {
         vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-        vec2 point = v_textureCoords.xy * u_dimensions;
+        vec2 point = v_nodeCoords.xy * u_dimensions;
         float dist = length((point - u_projection) / u_size);
 
         vec4 colorOut = getGradientColor(dist);
-        gl_FragColor = mix(color, colorOut, clamp(colorOut.a, 0.0, 1.0));
+        vec3 blendedRGB = mix(color.rgb, colorOut.rgb, clamp(colorOut.a, 0.0, 1.0));
+        gl_FragColor = vec4(blendedRGB, color.a);
       }
     `;
   },

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/CanvasTextRenderer.ts

@@ -56,7 +56,7 @@ const layoutCache = new Map<
 
 // Initialize the Text Renderer
 const init = (stage: Stage): void => {
-  const dpr = window.devicePixelRatio || 1;
+  const dpr = stage.options.devicePhysicalPixelRatio;
 
   // Drawing canvas and context
   canvas = stage.platform.createCanvas() as HTMLCanvasElement | OffscreenCanvas;

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(