@lightningjs/renderer 3.0.0-beta18 → 3.0.0-beta19

package/src/core/TextureMemoryManager.ts

@@ -18,7 +18,7 @@
  */
 import { isProductionEnvironment } from '../utils.js';
 import type { Stage } from './Stage.js';
-import { Texture, TextureType, type TextureState } from './textures/Texture.js';
+import { Texture, TextureType } from './textures/Texture.js';
 import { bytesToMb } from './utils.js';
 
 export interface TextureMemoryManagerSettings {
@@ -115,7 +115,7 @@ export interface MemoryInfo {
  */
 export class TextureMemoryManager {
   private memUsed = 0;
-  private loadedTextures: Map<Texture, number> = new Map();
+  private loadedTextures: (Texture | null)[] = [];
   private orphanedTextures: Texture[] = [];
   private criticalThreshold: number = 124e6;
   private targetThreshold: number = 0.5;
@@ -126,12 +126,10 @@ export class TextureMemoryManager {
   private lastCleanupTime = 0;
   private baselineMemoryAllocation: number = 26e6;
 
+  private hasWarnedAboveCritical = false;
+
   public criticalCleanupRequested = false;
   public doNotExceedCriticalThreshold: boolean = false;
-  private originalSetTextureMemUse: (
-    texture: Texture,
-    byteSize: number,
-  ) => void;
 
   /**
    * The current frame time in milliseconds
@@ -144,8 +142,6 @@ export class TextureMemoryManager {
   public frameTime = 0;
 
   constructor(private stage: Stage, settings: TextureMemoryManagerSettings) {
-    this.originalSetTextureMemUse = this.setTextureMemUse;
-
     this.updateSettings(settings);
   }
 
@@ -185,17 +181,30 @@ export class TextureMemoryManager {
    * @param byteSize - The size of the texture in bytes
    */
   setTextureMemUse(texture: Texture, byteSize: number) {
-    if (this.loadedTextures.has(texture)) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      this.memUsed -= this.loadedTextures.get(texture)!;
-    }
+    // Update global memory counter by subtracting old value
+    this.memUsed -= texture.memUsed;
 
     if (byteSize === 0) {
-      this.loadedTextures.delete(texture);
+      // PERFORMANCE: Mark for deletion, slot will be reused later
+      const index = this.loadedTextures.indexOf(texture);
+      if (index !== -1) {
+        this.loadedTextures[index] = null;
+      }
+      texture.memUsed = 0;
       return;
     } else {
+      // Update texture memory and add to tracking if not already present
+      texture.memUsed = byteSize;
       this.memUsed += byteSize;
-      this.loadedTextures.set(texture, byteSize);
+      if (this.loadedTextures.indexOf(texture) === -1) {
+        // PERFORMANCE: Reuse empty slots before appending
+        const emptyIndex = this.loadedTextures.indexOf(null);
+        if (emptyIndex !== -1) {
+          this.loadedTextures[emptyIndex] = texture;
+        } else {
+          this.loadedTextures.push(texture);
+        }
+      }
     }
 
     if (this.memUsed > this.criticalThreshold) {
@@ -215,41 +224,6 @@ export class TextureMemoryManager {
     return this.memUsed > this.criticalThreshold;
   }
 
-  cleanupQuick(critical: boolean) {
-    // Free non-renderable textures until we reach the target threshold
-    const platform = this.stage.platform;
-    const memTarget = this.targetThreshold;
-    const timestamp = platform.getTimeStamp();
-
-    while (
-      this.memUsed >= memTarget &&
-      this.orphanedTextures.length > 0 &&
-      (critical || platform.getTimeStamp() - timestamp < 10)
-    ) {
-      const texture = this.orphanedTextures.shift();
-
-      if (texture === undefined) {
-        continue;
-      }
-
-      if (texture.renderable === true) {
-        // If the texture is renderable, we can't free it up
-        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.state === 'initial' ||
-        Texture.TRANSITIONAL_TEXTURE_STATES.includes(texture.state)
-      ) {
-        continue;
-      }
-
-      this.destroyTexture(texture);
-    }
-  }
-
   /**
    * Destroy a texture and remove it from the memory manager
    *
@@ -262,95 +236,92 @@ export class TextureMemoryManager {
       );
     }
 
+    // PERFORMANCE: Null out array position, slot will be reused later
+    const index = this.loadedTextures.indexOf(texture);
+    if (index !== -1) {
+      this.loadedTextures[index] = null;
+    }
+
+    // Destroy texture and update memory counters
     const txManager = this.stage.txManager;
-    txManager.removeTextureFromQueue(texture);
     txManager.removeTextureFromCache(texture);
 
     texture.destroy();
 
-    this.removeFromOrphanedTextures(texture);
-    this.loadedTextures.delete(texture);
+    // Update memory counters
+    this.memUsed -= texture.memUsed;
+    texture.memUsed = 0;
   }
-  cleanupDeep(critical: boolean) {
-    // Free non-renderable textures until we reach the target threshold
-    const memTarget = critical ? this.criticalThreshold : this.targetThreshold;
-
-    // Filter for textures that are candidates for cleanup
-    // note: This is an expensive operation, so we only do it in deep cleanup
-    const cleanupCandidates = [...this.loadedTextures.keys()].filter(
-      (texture) => {
-        return (
-          (texture.type === TextureType.image ||
-            texture.type === TextureType.noise ||
-            texture.type === TextureType.renderToTexture) &&
-          texture.renderable === false &&
-          texture.preventCleanup === false &&
-          texture.state !== 'initial' &&
-          !Texture.TRANSITIONAL_TEXTURE_STATES.includes(texture.state)
-        );
-      },
-    );
 
-    while (this.memUsed >= memTarget && cleanupCandidates.length > 0) {
-      const texture = cleanupCandidates.shift();
-      if (texture === undefined) {
-        continue;
-      }
-
-      this.destroyTexture(texture);
-    }
-  }
-
-  cleanup(aggressive: boolean = false) {
+  cleanup() {
     const critical = this.criticalCleanupRequested;
-    const criticalThreshold = this.criticalThreshold;
-    const memUsed = this.memUsed;
-    const stage = this.stage;
     this.lastCleanupTime = this.frameTime;
 
     if (critical === true) {
-      stage.queueFrameEvent('criticalCleanup', {
+      this.stage.queueFrameEvent('criticalCleanup', {
         memUsed: this.memUsed,
-        criticalThreshold: criticalThreshold,
+        criticalThreshold: this.criticalThreshold,
       });
     }
 
     if (this.debugLogging === true) {
       console.log(
-        `[TextureMemoryManager] Cleaning up textures. Critical: ${critical}. Aggressive: ${aggressive}`,
+        `[TextureMemoryManager] Cleaning up textures. Critical: ${critical}.`,
       );
     }
 
-    // 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);
-
-    // if we're still above the target threshold, do a deep cleanup
-    if (aggressive === true && memUsed >= criticalThreshold) {
-      this.cleanupDeep(critical);
+    // Free non-renderable textures until we reach the target threshold
+    const memTarget = critical ? this.criticalThreshold : this.targetThreshold;
+
+    // PERFORMANCE: Zero-overhead cleanup with null marking
+    // Skip null entries, mark cleaned textures as null for later defrag
+    let currentMemUsed = this.memUsed;
+
+    for (let i = 0; i < this.loadedTextures.length; i++) {
+      // Early exit: target memory reached
+      if (currentMemUsed < memTarget) {
+        break;
+      }
+
+      const texture = this.loadedTextures[i];
+      if (!texture) continue; // Skip null entries from previous deletions
+
+      // Fast type check for cleanable textures
+      const isCleanableType =
+        texture.type === TextureType.image ||
+        texture.type === TextureType.noise ||
+        texture.type === TextureType.renderToTexture;
+
+      // Immediate cleanup if eligible
+      if (isCleanableType && texture.canBeCleanedUp() === true) {
+        // Get memory before destroying
+        const textureMemory = texture.memUsed;
+
+        // Destroy texture (which will null out the array position)
+        this.destroyTexture(texture);
+        currentMemUsed -= textureMemory;
+      }
     }
 
-    if (memUsed >= criticalThreshold) {
-      stage.queueFrameEvent('criticalCleanupFailed', {
-        memUsed: memUsed,
-        criticalThreshold: criticalThreshold,
+    if (this.memUsed >= this.criticalThreshold) {
+      this.stage.queueFrameEvent('criticalCleanupFailed', {
+        memUsed: this.memUsed,
+        criticalThreshold: this.criticalThreshold,
       });
-
-      if (this.debugLogging === true || isProductionEnvironment === false) {
+      // Only emit the warning once per over-threshold period
+      if (
+        !this.hasWarnedAboveCritical &&
+        (this.debugLogging === true || isProductionEnvironment === false)
+      ) {
         console.warn(
-          `[TextureMemoryManager] Memory usage above critical threshold after cleanup: ${memUsed}`,
+          `[TextureMemoryManager] Memory usage above critical threshold after cleanup: ${this.memUsed}`,
         );
+
+        this.hasWarnedAboveCritical = true;
       }
     } else {
       this.criticalCleanupRequested = false;
+      this.hasWarnedAboveCritical = false;
     }
   }
 
@@ -363,15 +334,19 @@ export class TextureMemoryManager {
    */
   getMemoryInfo(): MemoryInfo {
     let renderableTexturesLoaded = 0;
-    const renderableMemUsed = [...this.loadedTextures.keys()].reduce(
-      (acc, texture) => {
-        renderableTexturesLoaded += texture.renderable ? 1 : 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,
-    );
+    let renderableMemUsed = this.baselineMemoryAllocation;
+
+    for (const texture of this.loadedTextures) {
+      if (texture && texture.renderable) {
+        renderableTexturesLoaded += 1;
+        renderableMemUsed += texture.memUsed;
+      }
+    }
+
+    // Count non-null entries for accurate loaded texture count
+    const actualLoadedTextures = this.loadedTextures.filter(
+      (t) => t !== null,
+    ).length;
 
     return {
       criticalThreshold: this.criticalThreshold,
@@ -379,7 +354,7 @@ export class TextureMemoryManager {
       renderableMemUsed,
       memUsed: this.memUsed,
       renderableTexturesLoaded,
-      loadedTextures: this.loadedTextures.size,
+      loadedTextures: actualLoadedTextures,
       baselineMemoryAllocation: this.baselineMemoryAllocation,
     };
   }
@@ -438,8 +413,6 @@ export class TextureMemoryManager {
     // setTextureMemUse method with a no-op function.
     if (criticalThreshold === 0) {
       this.setTextureMemUse = () => {};
-    } else {
-      this.setTextureMemUse = this.originalSetTextureMemUse;
     }
   }
 }

package/src/core/lib/WebGlContextWrapper.ts

@@ -73,6 +73,7 @@ export class WebGlContextWrapper {
   public readonly TEXTURE_WRAP_S;
   public readonly TEXTURE_WRAP_T;
   public readonly LINEAR;
+  public readonly LINEAR_MIPMAP_LINEAR;
   public readonly CLAMP_TO_EDGE;
   public readonly RGB;
   public readonly RGBA;
@@ -164,6 +165,7 @@ export class WebGlContextWrapper {
     this.TEXTURE_WRAP_S = gl.TEXTURE_WRAP_S;
     this.TEXTURE_WRAP_T = gl.TEXTURE_WRAP_T;
     this.LINEAR = gl.LINEAR;
+    this.LINEAR_MIPMAP_LINEAR = gl.LINEAR_MIPMAP_LINEAR;
     this.CLAMP_TO_EDGE = gl.CLAMP_TO_EDGE;
     this.RGB = gl.RGB;
     this.RGBA = gl.RGBA;
@@ -1327,6 +1329,44 @@ export class WebGlContextWrapper {
       (this.gl as WebGL2RenderingContext).deleteVertexArray(vertexArray);
     }
   }
+
+  /**
+   * Check for WebGL errors and return error information
+   * @param operation Description of the operation for error reporting
+   * @returns Object with error information or null if no error
+   */
+  checkError(
+    operation: string,
+  ): { error: number; errorName: string; message: string } | null {
+    const error = this.getError();
+    if (error !== 0) {
+      // 0 is GL_NO_ERROR
+      let errorName = 'UNKNOWN_ERROR';
+      switch (error) {
+        case this.INVALID_ENUM:
+          errorName = 'INVALID_ENUM';
+          break;
+        case 0x0501: // GL_INVALID_VALUE
+          errorName = 'INVALID_VALUE';
+          break;
+        case this.INVALID_OPERATION:
+          errorName = 'INVALID_OPERATION';
+          break;
+        case 0x0505: // GL_OUT_OF_MEMORY
+          errorName = 'OUT_OF_MEMORY';
+          break;
+        case 0x9242: // GL_CONTEXT_LOST_WEBGL
+          errorName = 'CONTEXT_LOST_WEBGL';
+          break;
+      }
+
+      const message = `WebGL ${errorName} (0x${error.toString(
+        16,
+      )}) during ${operation}`;
+      return { error, errorName, message };
+    }
+    return null;
+  }
 }
 
 // prettier-ignore

package/src/core/lib/collectionUtils.ts

@@ -0,0 +1,118 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { CoreNode } from '../CoreNode.js';
+
+//Bucket sort implementation for sorting CoreNode arrays by zIndex
+export const bucketSortByZIndex = (nodes: CoreNode[], min: number): void => {
+  const buckets: CoreNode[][] = [];
+  const bucketIndices: number[] = [];
+  //distribute nodes into buckets
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]!;
+    const index = node.props.zIndex - min;
+    //create bucket if it doesn't exist
+    if (buckets[index] === undefined) {
+      buckets[index] = [];
+      bucketIndices.push(index);
+    }
+    buckets[index]!.push(node);
+  }
+
+  //sort each bucket using insertion sort
+  for (let i = 1; i < bucketIndices.length; i++) {
+    const key = bucketIndices[i]!;
+    let j = i - 1;
+    while (j >= 0 && bucketIndices[j]! > key) {
+      bucketIndices[j + 1] = bucketIndices[j]!;
+      j--;
+    }
+    bucketIndices[j + 1] = key;
+  }
+
+  //flatten buckets
+  let idx = 0;
+  for (let i = 0; i < bucketIndices.length; i++) {
+    const bucket = buckets[bucketIndices[i]!]!;
+    for (let j = 0; j < bucket.length; j++) {
+      nodes[idx++] = bucket[j]!;
+    }
+  }
+
+  //clean up
+  buckets.length = 0;
+  bucketIndices.length = 0;
+};
+
+export const incrementalRepositionByZIndex = (
+  changedNodes: CoreNode[],
+  nodes: CoreNode[],
+): void => {
+  for (let i = 0; i < changedNodes.length; i++) {
+    const node = changedNodes[i]!;
+    const currentIndex = findChildIndexById(node, nodes);
+    if (currentIndex === -1) continue;
+
+    const targetZIndex = node.props.zIndex;
+
+    //binary search for correct insertion position
+    let left = 0;
+    let right = nodes.length;
+
+    while (left < right) {
+      const mid = (left + right) >>> 1;
+      if (nodes[mid]!.props.zIndex <= targetZIndex) {
+        left = mid + 1;
+      } else {
+        right = mid;
+      }
+    }
+
+    //adjust target position if it's after the current position
+    const targetIndex = left > currentIndex ? left - 1 : left;
+
+    //only reposition if target is different from current
+    if (targetIndex !== currentIndex) {
+      nodes.splice(currentIndex, 1);
+      nodes.splice(targetIndex, 0, node);
+    }
+  }
+};
+
+export const findChildIndexById = (
+  node: CoreNode,
+  children: CoreNode[],
+): number => {
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i]!;
+
+    // @ts-ignore - accessing protected property
+    if (child._id === node._id) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+export const removeChild = (node: CoreNode, children: CoreNode[]): void => {
+  const index = findChildIndexById(node, children);
+  if (index !== -1) {
+    children.splice(index, 1);
+  }
+};