@lightningjs/renderer 3.0.0-beta8 → 3.0.0-beta9

package/src/core/TextureMemoryManager.ts

@@ -18,7 +18,7 @@
  */
 import { isProductionEnvironment } from '../utils.js';
 import type { Stage } from './Stage.js';
-import { TextureType, type Texture } from './textures/Texture.js';
+import { Texture, TextureType, type TextureState } from './textures/Texture.js';
 import { bytesToMb } from './utils.js';
 
 export interface TextureMemoryManagerSettings {
@@ -237,6 +237,12 @@ export class TextureMemoryManager {
         continue;
       }
 
+      // Skip textures that are in transitional states - we only want to clean up
+      // textures that are in a stable state (loaded, failed, or freed)
+      if (Texture.TRANSITIONAL_TEXTURE_STATES.includes(texture.state)) {
+        continue;
+      }
+
       this.destroyTexture(texture);
     }
   }
@@ -247,6 +253,12 @@ export class TextureMemoryManager {
    * @param texture - The texture to destroy
    */
   destroyTexture(texture: Texture) {
+    if (this.debugLogging === true) {
+      console.log(
+        `[TextureMemoryManager] Destroying texture. State: ${texture.state}`,
+      );
+    }
+
     const txManager = this.stage.txManager;
     txManager.removeTextureFromQueue(texture);
     txManager.removeTextureFromCache(texture);
@@ -296,6 +308,12 @@ export class TextureMemoryManager {
         break;
       }
 
+      // Skip textures that are in transitional states - we only want to clean up
+      // textures that are in a stable state (loaded, failed, or freed)
+      if (Texture.TRANSITIONAL_TEXTURE_STATES.includes(texture.state)) {
+        break;
+      }
+
       this.destroyTexture(texture);
     }
   }
@@ -320,6 +338,15 @@ export class TextureMemoryManager {
       );
     }
 
+    // Note: We skip textures in transitional states during cleanup:
+    // - 'initial': These textures haven't started loading yet
+    // - 'fetching': These textures are in the process of being fetched
+    // - 'fetched': These textures have been fetched but not yet uploaded to GPU
+    // - 'loading': These textures are being uploaded to the GPU
+    //
+    // For 'failed' and 'freed' states, we only remove them from the tracking
+    // arrays without trying to free GPU resources that don't exist.
+
     // try a quick cleanup first
     this.cleanupQuick(critical);
 
@@ -356,9 +383,9 @@ export class TextureMemoryManager {
     const renderableMemUsed = [...this.loadedTextures.keys()].reduce(
       (acc, texture) => {
         renderableTexturesLoaded += texture.renderable ? 1 : 0;
-        return (
-          acc + (texture.renderable ? this.loadedTextures.get(texture)! : 0)
-        );
+        // Get the memory used by the texture, defaulting to 0 if not found
+        const textureMemory = this.loadedTextures.get(texture) ?? 0;
+        return acc + (texture.renderable ? textureMemory : 0);
       },
       this.baselineMemoryAllocation,
     );

package/src/core/animations/CoreAnimationController.ts

@@ -125,7 +125,6 @@ export class CoreAnimationController
   }
 
   private onFinished(this: CoreAnimationController): void {
-    assertTruthy(this.stoppedResolve);
     // If the animation is looping, then we need to restart it.
     const { loop, stopMethod } = this.animation.settings;
 
@@ -143,8 +142,11 @@ export class CoreAnimationController
     this.unregisterAnimation();
 
     // resolve promise
-    this.stoppedResolve();
-    this.stoppedResolve = null;
+    if (this.stoppedResolve !== null) {
+      this.stoppedResolve();
+      this.stoppedResolve = null;
+    }
+
     this.emit('stopped', this);
     this.state = 'stopped';
   }

package/src/core/lib/WebGlContextWrapper.ts

@@ -50,6 +50,7 @@ export class WebGlContextWrapper {
   private boundArrayBuffer: WebGLBuffer | null;
   private boundElementArrayBuffer: WebGLBuffer | null;
   private curProgram: WebGLProgram | null;
+  private curUniformLocations: Record<string, WebGLUniformLocation> = {};
   //#endregion Cached WebGL State
 
   //#region Canvas
@@ -689,16 +690,23 @@ export class WebGlContextWrapper {
    * @param program
    * @returns object with numbers
    */
-  getUniformLocations(program: WebGLProgram): Record<string, number> {
+  getUniformLocations(
+    program: WebGLProgram,
+  ): Record<string, WebGLUniformLocation> {
     const gl = this.gl;
     const length = gl.getProgramParameter(
       program,
       gl.ACTIVE_UNIFORMS,
     ) as number;
-    const result = {} as Record<string, number>;
+    const result = {} as Record<string, WebGLUniformLocation>;
     for (let i = 0; i < length; i++) {
-      const { name } = gl.getActiveUniform(program, i) as WebGLActiveInfo;
-      result[name] = i;
+      const info = gl.getActiveUniform(program, i) as WebGLActiveInfo;
+      //remove bracket + value from uniform name;
+      let name = info.name.replace(/\[.*?\]/g, '');
+      result[name] = gl.getUniformLocation(
+        program,
+        name,
+      ) as WebGLUniformLocation;
     }
     return result;
   }
@@ -730,12 +738,16 @@ export class WebGlContextWrapper {
    * @param program
    * @returns
    */
-  useProgram(program: WebGLProgram | null) {
+  useProgram(
+    program: WebGLProgram | null,
+    uniformLocations: Record<string, WebGLUniformLocation>,
+  ) {
     if (this.curProgram === program) {
       return;
     }
     this.gl.useProgram(program);
     this.curProgram = program;
+    this.curUniformLocations = uniformLocations;
   }
 
   /**
@@ -745,10 +757,7 @@ export class WebGlContextWrapper {
    * @param v0 - The value to set.
    */
   uniform1f(location: string, v0: number) {
-    this.gl.uniform1f(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-    );
+    this.gl.uniform1f(this.curUniformLocations[location] || null, v0);
   }
 
   /**
@@ -758,10 +767,7 @@ export class WebGlContextWrapper {
    * @param value - The array of values to set.
    */
   uniform1fv(location: string, value: Float32Array) {
-    this.gl.uniform1fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform1fv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -771,10 +777,7 @@ export class WebGlContextWrapper {
    * @param v0 - The value to set.
    */
   uniform1i(location: string, v0: number) {
-    this.gl.uniform1i(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-    );
+    this.gl.uniform1i(this.curUniformLocations[location] || null, v0);
   }
 
   /**
@@ -784,10 +787,7 @@ export class WebGlContextWrapper {
    * @param value - The array of values to set.
    */
   uniform1iv(location: string, value: Int32Array) {
-    this.gl.uniform1iv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform1iv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -798,11 +798,7 @@ export class WebGlContextWrapper {
    * @param v1 - The second component of the vector.
    */
   uniform2f(location: string, v0: number, v1: number) {
-    this.gl.uniform2f(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-      v1,
-    );
+    this.gl.uniform2f(this.curUniformLocations[location] || null, v0, v1);
   }
 
   /**
@@ -813,7 +809,7 @@ export class WebGlContextWrapper {
    */
   uniform2fa(location: string, value: Vec2) {
     this.gl.uniform2f(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       value[0],
       value[1],
     );
@@ -826,10 +822,7 @@ export class WebGlContextWrapper {
    * @param value - The array of vec2 values to set.
    */
   uniform2fv(location: string, value: Float32Array) {
-    this.gl.uniform2fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform2fv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -840,11 +833,7 @@ export class WebGlContextWrapper {
    * @param v1 - The second component of the vector.
    */
   uniform2i(location: string, v0: number, v1: number) {
-    this.gl.uniform2i(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-      v1,
-    );
+    this.gl.uniform2i(this.curUniformLocations[location] || null, v0, v1);
   }
 
   /**
@@ -854,10 +843,7 @@ export class WebGlContextWrapper {
    * @param value - The array of ivec2 values to set.
    */
   uniform2iv(location: string, value: Int32Array) {
-    this.gl.uniform2iv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform2iv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -869,12 +855,7 @@ export class WebGlContextWrapper {
    * @param v2 - The third component of the vector.
    */
   uniform3f(location: string, v0: number, v1: number, v2: number) {
-    this.gl.uniform3f(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-      v1,
-      v2,
-    );
+    this.gl.uniform3f(this.curUniformLocations[location] || null, v0, v1, v2);
   }
 
   /**
@@ -885,7 +866,7 @@ export class WebGlContextWrapper {
    */
   uniform3fa(location: string, value: Vec3) {
     this.gl.uniform3f(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       value[0],
       value[1],
       value[2],
@@ -899,10 +880,7 @@ export class WebGlContextWrapper {
    * @param value - The array of vec3 values to set.
    */
   uniform3fv(location: string, value: Float32Array) {
-    this.gl.uniform3fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform3fv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -914,12 +892,7 @@ export class WebGlContextWrapper {
    * @param v2 - The third component of the vector.
    */
   uniform3i(location: string, v0: number, v1: number, v2: number) {
-    this.gl.uniform3i(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      v0,
-      v1,
-      v2,
-    );
+    this.gl.uniform3i(this.curUniformLocations[location] || null, v0, v1, v2);
   }
 
   /**
@@ -929,10 +902,7 @@ export class WebGlContextWrapper {
    * @param value - The array of ivec3 values to set.
    */
   uniform3iv(location: string, value: Int32Array) {
-    this.gl.uniform3iv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform3iv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -946,7 +916,7 @@ export class WebGlContextWrapper {
    */
   uniform4f(location: string, v0: number, v1: number, v2: number, v3: number) {
     this.gl.uniform4f(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       v0,
       v1,
       v2,
@@ -962,7 +932,7 @@ export class WebGlContextWrapper {
    */
   uniform4fa(location: string, value: Vec4) {
     this.gl.uniform4f(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       value[0],
       value[1],
       value[2],
@@ -977,10 +947,7 @@ export class WebGlContextWrapper {
    * @param value - The array of vec4 values to set.
    */
   uniform4fv(location: string, value: Float32Array) {
-    this.gl.uniform4fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform4fv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -994,7 +961,7 @@ export class WebGlContextWrapper {
    */
   uniform4i(location: string, v0: number, v1: number, v2: number, v3: number) {
     this.gl.uniform4i(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       v0,
       v1,
       v2,
@@ -1009,10 +976,7 @@ export class WebGlContextWrapper {
    * @param value - The array of ivec4 values to set.
    */
   uniform4iv(location: string, value: Int32Array) {
-    this.gl.uniform4iv(
-      this.gl.getUniformLocation(this.curProgram!, location),
-      value,
-    );
+    this.gl.uniform4iv(this.curUniformLocations[location] || null, value);
   }
 
   /**
@@ -1024,7 +988,7 @@ export class WebGlContextWrapper {
    */
   uniformMatrix2fv(location: string, value: Float32Array) {
     this.gl.uniformMatrix2fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       false,
       value,
     );
@@ -1037,7 +1001,7 @@ export class WebGlContextWrapper {
    */
   uniformMatrix3fv(location: string, value: Float32Array) {
     this.gl.uniformMatrix3fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       false,
       value,
     );
@@ -1050,7 +1014,7 @@ export class WebGlContextWrapper {
    */
   uniformMatrix4fv(location: string, value: Float32Array) {
     this.gl.uniformMatrix4fv(
-      this.gl.getUniformLocation(this.curProgram!, location),
+      this.curUniformLocations[location] || null,
       false,
       value,
     );
@@ -1319,6 +1283,36 @@ export class WebGlContextWrapper {
   deleteShader(shader: WebGLShader) {
     this.gl.deleteShader(shader);
   }
+
+  /**
+   * ```
+   * gl.deleteBuffer(buffer);
+   * ```
+   *
+   * @param buffer - The buffer to delete
+   */
+  deleteBuffer(buffer: WebGLBuffer) {
+    const { gl } = this;
+    gl.deleteBuffer(buffer);
+
+    // Reset bound buffers if they match the deleted buffer
+    if (this.boundArrayBuffer === buffer) {
+      this.boundArrayBuffer = null;
+    }
+  }
+
+  /**
+   * ```
+   * gl.deleteVertexArray(vertexArray);
+   * ```
+   *
+   * @param vertexArray - The vertex array object to delete
+   */
+  deleteVertexArray(vertexArray: WebGLVertexArrayObject) {
+    if (this.isWebGl2()) {
+      (this.gl as WebGL2RenderingContext).deleteVertexArray(vertexArray);
+    }
+  }
 }
 
 // prettier-ignore

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

@@ -35,8 +35,7 @@ import {
 } from './internal/ShaderUtils.js';
 
 export class WebGlShaderProgram implements CoreShaderProgram {
-  protected boundBufferCollection: BufferCollection | null = null;
-  protected program: WebGLProgram;
+  protected program: WebGLProgram | null;
   /**
    * Vertex Array Object
    *
@@ -47,9 +46,11 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   protected renderer: WebGlRenderer;
   protected glw: WebGlContextWrapper;
   protected attributeLocations: Record<string, number>;
+  protected uniformLocations: Record<string, WebGLUniformLocation> | null;
   protected lifecycle: Pick<WebGlShaderType, 'update' | 'canBatch'>;
   protected useSystemAlpha = false;
   protected useSystemDimensions = false;
+  public isDestroyed = false;
   supportsIndexedTextures = false;
 
   constructor(
@@ -117,10 +118,10 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     this.program = program;
     this.attributeLocations = glw.getAttributeLocations(program);
 
-    this.useSystemAlpha =
-      this.glw.getUniformLocation(program, 'u_alpha') !== null;
-    this.useSystemDimensions =
-      this.glw.getUniformLocation(program, 'u_dimensions') !== null;
+    const uniLocs = (this.uniformLocations = glw.getUniformLocations(program));
+
+    this.useSystemAlpha = uniLocs['u_alpha'] !== undefined;
+    this.useSystemDimensions = uniLocs['u_dimensions'] !== undefined;
 
     this.lifecycle = {
       update: config.update,
@@ -133,7 +134,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   disableAttributes() {
-    const { glw } = this;
+    const glw = this.glw;
     const attribs = Object.keys(this.attributeLocations);
     const attribLen = attribs.length;
     for (let i = 0; i < attribLen; i++) {
@@ -221,13 +222,13 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       );
     }
 
-    // if (this.useSystemAlpha) {
-    this.glw.uniform1f('u_alpha', renderOp.alpha);
-    // }
+    if (this.useSystemAlpha === true) {
+      this.glw.uniform1f('u_alpha', renderOp.alpha);
+    }
 
-    // if (this.useSystemDimensions) {
-    this.glw.uniform2f('u_dimensions', renderOp.width, renderOp.height);
-    // }
+    if (this.useSystemDimensions === true) {
+      this.glw.uniform2f('u_dimensions', renderOp.width, renderOp.height);
+    }
 
     /**temporary fix to make sdf texts work */
     if (renderOp.sdfShaderProps !== undefined) {
@@ -306,7 +307,10 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   }
 
   attach(): void {
-    this.glw.useProgram(this.program);
+    if (this.isDestroyed === true) {
+      return;
+    }
+    this.glw.useProgram(this.program, this.uniformLocations!);
     if (this.glw.isWebGl2() && this.vao) {
       this.glw.bindVertexArray(this.vao);
     }
@@ -315,4 +319,23 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   detach(): void {
     this.disableAttributes();
   }
+
+  destroy() {
+    if (this.isDestroyed === true) {
+      return;
+    }
+    const glw = this.glw;
+
+    this.detach();
+
+    glw.deleteProgram(this.program!);
+    this.program = null;
+    this.uniformLocations = null;
+
+    const attribs = Object.keys(this.attributeLocations);
+    const attribLen = attribs.length;
+    for (let i = 0; i < attribLen; i++) {
+      this.glw.deleteBuffer(attribs[i]!);
+    }
+  }
 }

package/src/core/textures/Texture.ts

@@ -144,6 +144,12 @@ export abstract class Texture extends EventEmitter {
   private _dimensions: Dimensions | null = null;
   private _error: Error | null = null;
 
+  /**
+   * Texture states that are considered transitional and should be skipped during cleanup
+   */
+  public static readonly TRANSITIONAL_TEXTURE_STATES: readonly TextureState[] =
+    ['fetching', 'fetched', 'loading'];
+
   // aggregate state
   public state: TextureState = 'initial';
 
@@ -258,10 +264,13 @@ export abstract class Texture extends EventEmitter {
    * cleaned up.
    */
   destroy(): void {
-    this.removeAllListeners();
-    this.free();
+    // Only free GPU resources if we're in a state where they exist
+    if (this.state === 'loaded') {
+      this.free();
+    }
+
+    // Always free texture data regardless of state
     this.freeTextureData();
-    this.renderableOwners.clear();
   }
 
   /**