@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta21

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

@@ -18,13 +18,14 @@
  */
 
 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';
+import { isProductionEnvironment } from '../../../utils.js';
 
 const TRANSPARENT_TEXTURE_DATA = new Uint8Array([0, 0, 0, 0]);
 
@@ -44,6 +45,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 +60,35 @@ 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;
+    }
+
+    if (isProductionEnvironment === false) {
+      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 +109,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;
-        }
+    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';
-        this.textureSource.setState('failed', err);
-        this.textureSource.freeTextureData();
-        console.error(err);
-      });
+      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 +184,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);
 
@@ -153,29 +193,36 @@ export class WebGlCtxTexture extends CoreContextTexture {
     const format = glw.RGBA;
     const formatBytes = 4;
     const memoryPadding = 1.1; // Add padding to account for GPU Padding
+    const isImageBitmap =
+      typeof ImageBitmap !== 'undefined' && tdata instanceof ImageBitmap;
 
     // If textureData is null, the texture is empty (0, 0) and we don't need to
     // upload any data to the GPU.
     if (
-      (typeof ImageBitmap !== 'undefined' && tdata instanceof ImageBitmap) ||
+      isImageBitmap ||
       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,
-        !!textureData.premultiplyAlpha,
+        isImageBitmap ? false : !!textureData.premultiplyAlpha,
       );
 
       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 +238,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,28 +264,23 @@ 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);
+
+      // Check for errors after compressed texture operations
+      if (this.checkGLError() === true) {
+        return { w: 0, h: 0 };
+      }
 
-      this.setTextureMemUse(width * height * formatBytes);
+      this.setTextureMemUse(w * h * formatBytes);
     } else {
-      console.error(
+      throw new Error(
         `WebGlCoreCtxTexture.onLoadRequest: Unexpected textureData returned`,
-        textureData,
       );
     }
 
     return {
-      width,
-      height,
+      w,
+      h,
     };
   }
 
@@ -254,6 +296,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 +317,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 +345,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;
   }
 }