@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta20

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

@@ -18,9 +18,9 @@
  */
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
-import { assertTruthy } from '../../../utils.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { Bound } from '../../lib/utils.js';
 import type { RenderTexture } from '../../textures/RenderTexture.js';
 import { WebGlCtxTexture } from './WebGlCtxTexture.js';
 
@@ -29,6 +29,13 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture {
 
   public framebuffer: WebGLFramebuffer | null = null;
 
+  override txCoords: Bound = {
+    x1: 0,
+    y1: 1,
+    x2: 1,
+    y2: 0,
+  };
+
   constructor(
     glw: WebGlContextWrapper,
     memManager: TextureMemoryManager,
@@ -41,25 +48,21 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture {
     const { glw } = this;
     const nativeTexture = (this._nativeCtxTexture =
       this.createNativeCtxTexture());
-    const { width, height } = this.textureSource;
+
+    if (!nativeTexture) {
+      throw new Error('Failed to create native texture for RenderTexture');
+    }
+
+    const { w, h } = this.textureSource;
 
     // Create Framebuffer object
     this.framebuffer = glw.createFramebuffer();
 
     // Set the dimensions of the render texture
-    glw.texImage2D(
-      0,
-      glw.RGBA,
-      width,
-      height,
-      0,
-      glw.RGBA,
-      glw.UNSIGNED_BYTE,
-      null,
-    );
+    glw.texImage2D(0, glw.RGBA, w, h, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
 
     // Update the texture memory manager
-    this.setTextureMemUse(width * height * 4);
+    this.setTextureMemUse(w * h * 4);
 
     // Bind the framebuffer
     glw.bindFramebuffer(this.framebuffer);
@@ -71,8 +74,8 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture {
     glw.bindFramebuffer(null);
 
     return {
-      width,
-      height,
+      w,
+      h,
     };
   }
 

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

@@ -22,6 +22,8 @@ import { assertTruthy } from '../../../utils.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
 import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { SubTexture } from '../../textures/SubTexture.js';
+import type { SubTextureProps } from '../../textures/SubTexture.js';
+import type { CompressedData } from '../../textures/Texture.js';
 import { WebGlCtxTexture } from './WebGlCtxTexture.js';
 
 export class WebGlCtxSubTexture extends WebGlCtxTexture {
@@ -39,12 +41,55 @@ export class WebGlCtxSubTexture extends WebGlCtxTexture {
 
     if (props.data instanceof Uint8Array) {
       // its a 1x1 Color Texture
-      return { width: 1, height: 1 };
+      return { w: 1, h: 1 };
     }
 
-    return {
-      width: props.data?.width || 0,
-      height: props.data?.height || 0,
-    };
+    return this.extractDimensions(props.data);
+  }
+
+  /**
+   * Efficiently extracts width/height from polymorphic texture data
+   * Optimized for performance by using type guards and avoiding unnecessary property access
+   */
+  private extractDimensions(
+    data:
+      | ImageBitmap
+      | ImageData
+      | SubTextureProps
+      | CompressedData
+      | HTMLImageElement
+      | null,
+  ): Dimensions {
+    if (data === null) {
+      return { w: 0, h: 0 };
+    }
+
+    // Check for standard web API objects first (most common case)
+    // These use width/height properties: ImageBitmap, ImageData, HTMLImageElement
+    if (this.hasWidthHeight(data) === true) {
+      return { w: data.width, h: data.height };
+    }
+
+    // Check for internal objects that use w/h properties: SubTextureProps, CompressedData
+    if (this.hasWH(data) === true) {
+      return { w: data.w, h: data.h };
+    }
+
+    // Fallback
+    return { w: 0, h: 0 };
+  }
+
+  /**
+   * Type guard for objects with width/height properties
+   */
+  private hasWidthHeight(data: any): data is { width: number; height: number } {
+    return typeof data.width === 'number' && typeof data.height === 'number';
+  }
+
+  /**
+   * Type guard for objects with w/h properties
+   */
+  private hasWH(data: any): data is { w: number; h: number } {
+    return typeof data.w === 'number' && typeof data.h === 'number';
   }
 }

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

@@ -18,13 +18,13 @@
  */
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
-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 { 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]);
 
@@ -44,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,
@@ -52,12 +59,30 @@ 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();
       return null;
     }
-    assertTruthy(this._nativeCtxTexture);
     return this._nativeCtxTexture;
   }
 
@@ -78,54 +103,63 @@ export class WebGlCtxTexture extends CoreContextTexture {
    * to force the texture to be pre-loaded prior to accessing the ctxTexture
    * property.
    */
-  load() {
-    // If the texture is already loading or loaded, don't load it again.
+  async load(): Promise<void> {
+    // If the texture is already loading or loaded, return resolved promise
     if (this.state === 'loading' || this.state === 'loaded') {
-      return;
+      return Promise.resolve();
     }
 
     this.state = 'loading';
     this.textureSource.setState('loading');
+
+    // Await the native texture creation to ensure GPU buffer is fully allocated
     this._nativeCtxTexture = this.createNativeCtxTexture();
 
     if (this._nativeCtxTexture === null) {
       this.state = 'failed';
-      this.textureSource.setState(
-        'failed',
-        new Error('Could not create WebGL Texture'),
-      );
+      const error = new Error('Could not create WebGL Texture');
+      this.textureSource.setState('failed', error);
       console.error('Could not create WebGL Texture');
-      return;
+      throw error;
     }
 
-    this.onLoadRequest()
-      .then(({ width, height }) => {
-        // If the texture has been freed while loading, return early.
-        if (this.state === 'freed') {
-          return;
-        }
-
-        this.state = 'loaded';
-        this._w = width;
-        this._h = height;
-        // 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
-        this.textureSource.freeTextureData();
-      })
-      .catch((err) => {
-        // If the texture has been freed while loading, return early.
-        if (this.state === 'freed') {
-          return;
-        }
-
-        this.state = 'failed';
-        this.textureSource.setState('failed', err);
-        this.textureSource.freeTextureData();
-        console.error(err);
-      });
+    try {
+      const { w, h } = await this.onLoadRequest();
+
+      // If the texture has been freed while loading, return early.
+      // Type assertion needed because state could change during async operations
+      if ((this.state as string) === 'freed') {
+        return;
+      }
+
+      this.state = 'loaded';
+      this._w = w;
+      this._h = h;
+      // Update the texture source's width and height so that it can be used
+      // for rendering.
+      this.textureSource.setState('loaded', { w, h });
+
+      // 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.
+      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
+      if ((this.state as string) === 'freed') {
+        return;
+      }
+
+      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
+    }
   }
 
   /**
@@ -144,8 +178,8 @@ export class WebGlCtxTexture extends CoreContextTexture {
     glw.texImage2D(0, glw.RGBA, 1, 1, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
     this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
 
-    let width = 0;
-    let height = 0;
+    let w = 0;
+    let h = 0;
 
     glw.activeTexture(0);
 
@@ -159,11 +193,11 @@ export class WebGlCtxTexture extends CoreContextTexture {
     if (
       (typeof ImageBitmap !== 'undefined' && tdata instanceof ImageBitmap) ||
       tdata instanceof ImageData ||
-      // not using typeof HTMLImageElement due to web worker
-      isHTMLImageElement(tdata)
+      // not using typeof HTMLI mageElement due to web worker
+      isHTMLImageElement(tdata) === true
     ) {
-      width = tdata.width;
-      height = tdata.height;
+      w = tdata.width;
+      h = tdata.height;
       glw.bindTexture(this._nativeCtxTexture);
       glw.pixelStorei(
         glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL,
@@ -172,10 +206,15 @@ export class WebGlCtxTexture extends CoreContextTexture {
 
       glw.texImage2D(0, format, format, glw.UNSIGNED_BYTE, tdata);
 
-      this.setTextureMemUse(height * width * formatBytes * memoryPadding);
+      // 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) {
-      width = 0;
-      height = 0;
+      w = 0;
+      h = 0;
       // Reset to a 1x1 transparent texture
       glw.bindTexture(this._nativeCtxTexture);
 
@@ -191,25 +230,25 @@ export class WebGlCtxTexture extends CoreContextTexture {
       );
       this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
     } else if ('mipmaps' in tdata && tdata.mipmaps) {
-      const { mipmaps, width = 0, height = 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, width, height, 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
-      width = 1;
-      height = 1;
+      w = 1;
+      h = 1;
 
       glw.bindTexture(this._nativeCtxTexture);
       glw.pixelStorei(
@@ -217,18 +256,14 @@ export class WebGlCtxTexture extends CoreContextTexture {
         !!textureData.premultiplyAlpha,
       );
 
-      glw.texImage2D(
-        0,
-        format,
-        width,
-        height,
-        0,
-        format,
-        glw.UNSIGNED_BYTE,
-        tdata,
-      );
+      glw.texImage2D(0, format, w, h, 0, format, glw.UNSIGNED_BYTE, tdata);
 
-      this.setTextureMemUse(width * height * formatBytes);
+      // Check for errors after compressed texture operations
+      if (this.checkGLError() === true) {
+        return { w: 0, h: 0 };
+      }
+
+      this.setTextureMemUse(w * h * formatBytes);
     } else {
       console.error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,
@@ -237,8 +272,8 @@ export class WebGlCtxTexture extends CoreContextTexture {
     }
 
     return {
-      width,
-      height,
+      w,
+      h,
     };
   }
 
@@ -254,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;
 
@@ -268,17 +310,17 @@ export class WebGlCtxTexture extends CoreContextTexture {
   }
 
   /**
-   * Create native context texture
+   * Create native context texture asynchronously
    *
    * @remarks
-   * When this method returns the returned texture will be bound to the GL context state.
+   * When this method resolves, the returned texture will be bound to the GL context state
+   * and fully ready for use. This ensures proper GPU resource allocation timing.
    *
-   * @param width
-   * @param height
-   * @returns
+   * @returns Promise that resolves to the native WebGL texture or null on failure
    */
-  protected createNativeCtxTexture() {
+  protected createNativeCtxTexture(): WebGLTexture | null {
     const { glw } = this;
+
     const nativeTexture = glw.createTexture();
     if (!nativeTexture) {
       return null;
@@ -296,6 +338,7 @@ export class WebGlCtxTexture extends CoreContextTexture {
     // texture wrapping method
     glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
     glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
+
     return nativeTexture;
   }
 }

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>;
@@ -62,9 +63,10 @@ export class WebGlRenderOp extends CoreRenderOp {
   readonly clippingRect: RectWithValid;
   readonly rtt: boolean;
   readonly parentHasRenderTexture: boolean;
-  readonly framebufferDimensions?: Dimensions;
+  readonly framebufferDimensions: Dimensions | null;
   readonly alpha: number;
   readonly pixelRatio: number;
+  readonly time?: number | null;
 
   constructor(
     readonly renderer: WebGlRenderer,
@@ -78,11 +80,12 @@ export class WebGlRenderOp extends CoreRenderOp {
     this.height = quad.height;
     this.clippingRect = quad.clippingRect;
     this.parentHasRenderTexture = quad.parentHasRenderTexture;
-    this.framebufferDimensions = quad.framebufferDimensions;
+    this.framebufferDimensions = quad.framebufferDimensions || null;
     this.rtt = quad.rtt;
     this.alpha = quad.alpha;
     this.pixelRatio =
       this.parentHasRenderTexture === true ? 1 : renderer.stage.pixelRatio;
+    this.time = quad.time;
 
     /**
      * related to line 51
@@ -125,8 +128,6 @@ export class WebGlRenderOp extends CoreRenderOp {
     stage.shManager.useShader(this.shader.program);
     this.shader.program.bindRenderOp(this);
 
-    // TODO: Reduce calculations required
-    const quadIdx = (this.bufferIdx / 32) * 6 * 2;
     // Clipping
     if (this.clippingRect.valid === true) {
       const clipX = Math.round(this.clippingRect.x * this.pixelRatio);
@@ -141,7 +142,7 @@ export class WebGlRenderOp extends CoreRenderOp {
       // to be relative to the parent's framebuffer
       if (this.parentHasRenderTexture) {
         clipY = this.framebufferDimensions
-          ? this.framebufferDimensions.height - this.height
+          ? this.framebufferDimensions.h - this.height
           : 0;
       }
 
@@ -151,11 +152,19 @@ export class WebGlRenderOp extends CoreRenderOp {
       glw.setScissorTest(false);
     }
 
-    glw.drawElements(
-      glw.TRIANGLES,
-      6 * this.numQuads,
-      glw.UNSIGNED_SHORT,
-      quadIdx,
-    );
+    // Check if this is SDF rendering (has sdfBuffers)
+    if (this.sdfShaderProps !== undefined) {
+      // SDF rendering uses drawArrays with explicit triangle vertices (6 vertices per quad)
+      glw.drawArrays(glw.TRIANGLES, 0, 6 * this.numQuads);
+    } else {
+      // Regular rendering uses drawElements with index buffer (4 vertices per quad)
+      const quadIdx = (this.bufferIdx / 32) * 6 * 2;
+      glw.drawElements(
+        glw.TRIANGLES,
+        6 * this.numQuads,
+        glw.UNSIGNED_SHORT,
+        quadIdx,
+      );
+    }
   }
 }