@lightningjs/renderer 3.0.0-beta1 → 3.0.0-beta11

package/src/core/TextureMemoryManager.ts

@@ -17,9 +17,8 @@
  * limitations under the License.
  */
 import { isProductionEnvironment } from '../utils.js';
-import { getTimeStamp } from './platform.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 {
@@ -118,15 +117,21 @@ export class TextureMemoryManager {
   private memUsed = 0;
   private loadedTextures: Map<Texture, number> = new Map();
   private orphanedTextures: Texture[] = [];
-  private criticalThreshold: number;
-  private targetThreshold: number;
-  private cleanupInterval: number;
-  private debugLogging: boolean;
+  private criticalThreshold: number = 124e6;
+  private targetThreshold: number = 0.5;
+  private cleanupInterval: number = 5000;
+  private debugLogging: boolean = false;
+  private loggingID: ReturnType<typeof setInterval> =
+    0 as unknown as ReturnType<typeof setInterval>;
   private lastCleanupTime = 0;
-  private baselineMemoryAllocation: number;
+  private baselineMemoryAllocation: number = 26e6;
 
   public criticalCleanupRequested = false;
-  public doNotExceedCriticalThreshold: boolean;
+  public doNotExceedCriticalThreshold: boolean = false;
+  private originalSetTextureMemUse: (
+    texture: Texture,
+    byteSize: number,
+  ) => void;
 
   /**
    * The current frame time in milliseconds
@@ -139,46 +144,9 @@ export class TextureMemoryManager {
   public frameTime = 0;
 
   constructor(private stage: Stage, settings: TextureMemoryManagerSettings) {
-    const { criticalThreshold, doNotExceedCriticalThreshold } = settings;
-    this.doNotExceedCriticalThreshold = doNotExceedCriticalThreshold || false;
-    this.criticalThreshold = Math.round(criticalThreshold);
-    const targetFraction = Math.max(
-      0,
-      Math.min(1, settings.targetThresholdLevel),
-    );
-    this.cleanupInterval = settings.cleanupInterval;
-    this.debugLogging = settings.debugLogging;
-    this.baselineMemoryAllocation = Math.round(
-      settings.baselineMemoryAllocation,
-    );
-    this.targetThreshold = Math.max(
-      Math.round(criticalThreshold * targetFraction),
-      this.baselineMemoryAllocation,
-    );
-    this.memUsed = Math.round(settings.baselineMemoryAllocation);
+    this.originalSetTextureMemUse = this.setTextureMemUse;
 
-    if (settings.debugLogging) {
-      let lastMemUse = 0;
-      setInterval(() => {
-        if (lastMemUse !== this.memUsed) {
-          lastMemUse = this.memUsed;
-          console.log(
-            `[TextureMemoryManager] Memory used: ${bytesToMb(
-              this.memUsed,
-            )} mb / ${bytesToMb(this.criticalThreshold)} mb (${(
-              (this.memUsed / this.criticalThreshold) *
-              100
-            ).toFixed(1)}%)`,
-          );
-        }
-      }, 1000);
-    }
-
-    // If the threshold is 0, we disable the memory manager by replacing the
-    // setTextureMemUse method with a no-op function.
-    if (criticalThreshold === 0) {
-      this.setTextureMemUse = () => {};
-    }
+    this.updateSettings(settings);
   }
 
   /**
@@ -249,14 +217,14 @@ export class TextureMemoryManager {
 
   cleanupQuick(critical: boolean) {
     // Free non-renderable textures until we reach the target threshold
+    const platform = this.stage.platform;
     const memTarget = this.targetThreshold;
-    const txManager = this.stage.txManager;
-    const timestamp = getTimeStamp();
+    const timestamp = platform.getTimeStamp();
 
     while (
       this.memUsed >= memTarget &&
       this.orphanedTextures.length > 0 &&
-      (critical || getTimeStamp() - timestamp < 10)
+      (critical || platform.getTimeStamp() - timestamp < 10)
     ) {
       const texture = this.orphanedTextures.shift();
 
@@ -269,67 +237,81 @@ export class TextureMemoryManager {
         continue;
       }
 
-      texture.free();
-      txManager.removeTextureFromCache(texture);
+      // 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
+   *
+   * @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);
+
+    texture.destroy();
+
+    this.removeFromOrphanedTextures(texture);
+    this.loadedTextures.delete(texture);
+  }
   cleanupDeep(critical: boolean) {
     // Free non-renderable textures until we reach the target threshold
     const memTarget = critical ? this.criticalThreshold : this.targetThreshold;
-    const txManager = this.stage.txManager;
 
-    // sort by renderability
-    const filteredAndSortedTextures: Texture[] = [];
-    const textures = [...this.loadedTextures.keys()];
-    for (let i = 0; i < textures.length; i++) {
-      const texture = textures[i];
-      if (texture === undefined) {
-        continue;
-      }
-
-      if (
-        texture.type === TextureType.image ||
-        texture.type === TextureType.noise ||
-        texture.type === TextureType.renderToTexture
-      ) {
-        if (texture.renderable === true) {
-          filteredAndSortedTextures.push(texture);
-        } else {
-          filteredAndSortedTextures.unshift(texture);
-        }
-      }
-    }
+    // 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 && filteredAndSortedTextures.length > 0) {
-      const texture = filteredAndSortedTextures.shift();
+    while (this.memUsed >= memTarget && cleanupCandidates.length > 0) {
+      const texture = cleanupCandidates.shift();
       if (texture === undefined) {
         continue;
       }
 
-      if (texture.preventCleanup === true) {
-        continue;
-      }
-
-      if (texture.renderable === true) {
-        break;
-      }
-
-      texture.free();
-      this.removeFromOrphanedTextures(texture);
-      txManager.removeTextureFromCache(texture);
-      txManager.removeTextureFromQueue(texture);
+      this.destroyTexture(texture);
     }
   }
 
   cleanup(aggressive: boolean = false) {
     const critical = this.criticalCleanupRequested;
+    const criticalThreshold = this.criticalThreshold;
+    const memUsed = this.memUsed;
+    const stage = this.stage;
     this.lastCleanupTime = this.frameTime;
 
     if (critical === true) {
-      this.stage.queueFrameEvent('criticalCleanup', {
+      stage.queueFrameEvent('criticalCleanup', {
         memUsed: this.memUsed,
-        criticalThreshold: this.criticalThreshold,
+        criticalThreshold: criticalThreshold,
       });
     }
 
@@ -339,23 +321,32 @@ 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);
 
     // if we're still above the target threshold, do a deep cleanup
-    if (aggressive === true && this.memUsed >= this.criticalThreshold) {
+    if (aggressive === true && memUsed >= criticalThreshold) {
       this.cleanupDeep(critical);
     }
 
-    if (this.memUsed >= this.criticalThreshold) {
-      this.stage.queueFrameEvent('criticalCleanupFailed', {
-        memUsed: this.memUsed,
-        criticalThreshold: this.criticalThreshold,
+    if (memUsed >= criticalThreshold) {
+      stage.queueFrameEvent('criticalCleanupFailed', {
+        memUsed: memUsed,
+        criticalThreshold: criticalThreshold,
       });
 
-      if (this.debugLogging === true || isProductionEnvironment() === false) {
+      if (this.debugLogging === true || isProductionEnvironment === false) {
         console.warn(
-          `[TextureMemoryManager] Memory usage above critical threshold after cleanup: ${this.memUsed}`,
+          `[TextureMemoryManager] Memory usage above critical threshold after cleanup: ${memUsed}`,
         );
       }
     } else {
@@ -375,9 +366,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,
     );
@@ -392,4 +383,63 @@ export class TextureMemoryManager {
       baselineMemoryAllocation: this.baselineMemoryAllocation,
     };
   }
+
+  public updateSettings(settings: TextureMemoryManagerSettings): void {
+    const { criticalThreshold, doNotExceedCriticalThreshold } = settings;
+
+    this.doNotExceedCriticalThreshold = doNotExceedCriticalThreshold || false;
+    this.criticalThreshold = Math.round(criticalThreshold);
+
+    if (this.memUsed === 0) {
+      this.memUsed = Math.round(settings.baselineMemoryAllocation);
+    } else {
+      const memUsedExBaseline = this.memUsed - this.baselineMemoryAllocation;
+      this.memUsed = Math.round(
+        settings.baselineMemoryAllocation + memUsedExBaseline,
+      );
+    }
+    this.baselineMemoryAllocation = Math.round(
+      settings.baselineMemoryAllocation,
+    );
+    const targetFraction = Math.max(
+      0,
+      Math.min(1, settings.targetThresholdLevel),
+    );
+    this.targetThreshold = Math.max(
+      Math.round(criticalThreshold * targetFraction),
+      this.baselineMemoryAllocation,
+    );
+
+    this.cleanupInterval = settings.cleanupInterval;
+    this.debugLogging = settings.debugLogging;
+
+    if (this.loggingID && !settings.debugLogging) {
+      clearInterval(this.loggingID);
+      this.loggingID = 0 as unknown as ReturnType<typeof setInterval>;
+    }
+    if (settings.debugLogging && !this.loggingID) {
+      let lastMemUse = 0;
+      this.loggingID = setInterval(() => {
+        if (lastMemUse !== this.memUsed) {
+          lastMemUse = this.memUsed;
+          console.log(
+            `[TextureMemoryManager] Memory used: ${bytesToMb(
+              this.memUsed,
+            )} mb / ${bytesToMb(this.criticalThreshold)} mb (${(
+              (this.memUsed / this.criticalThreshold) *
+              100
+            ).toFixed(1)}%)`,
+          );
+        }
+      }, 1000);
+    }
+
+    // If the threshold is 0, we disable the memory manager by replacing the
+    // setTextureMemUse method with a no-op function.
+    if (criticalThreshold === 0) {
+      this.setTextureMemUse = () => {};
+    } else {
+      this.setTextureMemUse = this.originalSetTextureMemUse;
+    }
+  }
 }

package/src/core/animations/CoreAnimation.ts

@@ -215,6 +215,13 @@ export class CoreAnimation extends EventEmitter {
   update(dt: number) {
     const { duration, loop, easing, stopMethod } = this.settings;
     const { delayFor } = this;
+
+    if (this.node.destroyed) {
+      // cleanup
+      this.emit('destroyed', {});
+      return;
+    }
+
     if (duration === 0 && delayFor === 0) {
       this.emit('finished', {});
       return;

package/src/core/animations/CoreAnimationController.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/unbound-method */
 /*
  * If not stated otherwise in this file or this component's LICENSE file the
  * following copyright and licenses apply:
@@ -52,6 +51,7 @@ export class CoreAnimationController
     this.onAnimating = this.onAnimating.bind(this);
     this.onFinished = this.onFinished.bind(this);
     this.onTick = this.onTick.bind(this);
+    this.onDestroy = this.onDestroy.bind(this);
   }
 
   start(): IAnimationController {
@@ -96,6 +96,7 @@ export class CoreAnimationController
     this.animation.once('finished', this.onFinished);
     this.animation.on('animating', this.onAnimating);
     this.animation.on('tick', this.onTick);
+    this.animation.on('destroyed', this.onDestroy);
     // Then register the animation
     this.manager.registerAnimation(this.animation);
   }
@@ -107,6 +108,7 @@ export class CoreAnimationController
     this.animation.off('finished', this.onFinished);
     this.animation.off('animating', this.onAnimating);
     this.animation.off('tick', this.onTick);
+    this.animation.off('destroy', this.onDestroy);
   }
 
   private makeStoppedPromise(): void {
@@ -117,8 +119,12 @@ export class CoreAnimationController
     }
   }
 
+  private onDestroy(this: CoreAnimationController): void {
+    this.unregisterAnimation();
+    this.state = 'stopped';
+  }
+
   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;
 
@@ -136,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/ImageWorker.ts

@@ -75,7 +75,13 @@ function createImageWorker() {
       xhr.onload = function () {
         // On most devices like WebOS and Tizen, the file protocol returns 0 while http(s) protocol returns 200
         if (xhr.status !== 200 && xhr.status !== 0) {
-          return reject(new Error('Failed to load image: ' + xhr.statusText));
+          return reject(
+            new Error(
+              `Image loading failed. HTTP status code: ${
+                xhr.status || 'N/A'
+              }. URL: ${src}`,
+            ),
+          );
         }
 
         var blob = xhr.response;
@@ -158,7 +164,8 @@ function createImageWorker() {
       supportsFullCreateImageBitmap,
     })
       .then(function (data) {
-        self.postMessage({ id: id, src: src, data: data });
+        // @ts-ignore ts has wrong postMessage signature
+        self.postMessage({ id: id, src: src, data: data }, [data.data]);
       })
       .catch(function (error) {
         self.postMessage({ id: id, src: src, error: error.message });

package/src/core/lib/RenderCoords.ts

@@ -1,33 +1,50 @@
-const rx1 = 0;
-const rx2 = 2;
-const rx3 = 4;
-const rx4 = 6;
-const ry1 = 1;
-const ry2 = 3;
-const ry3 = 5;
-const ry4 = 7;
-
+/*
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
 export class RenderCoords {
-  public data: Float32Array;
+  public x1: number;
+  public y1: number;
+  public x2: number;
+  public y2: number;
+  public x3: number;
+  public y3: number;
+  public x4: number;
+  public y4: number;
+
   constructor(
-    entries?:
-      | [number, number, number, number, number, number, number, number]
-      | Float32Array,
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    x3: number,
+    y3: number,
+    x4: number,
+    y4: number,
   ) {
-    this.data = new Float32Array(8);
-    if (entries) {
-      this.data[rx1] = entries[rx1];
-      this.data[rx2] = entries[rx2];
-      this.data[rx3] = entries[rx3];
-      this.data[rx4] = entries[rx4];
-      this.data[ry1] = entries[ry1];
-      this.data[ry2] = entries[ry2];
-      this.data[ry3] = entries[ry3];
-      this.data[ry4] = entries[ry4];
-    }
+    this.x1 = x1;
+    this.y1 = y1;
+    this.x2 = x2;
+    this.y2 = y2;
+    this.x3 = x3;
+    this.y3 = y3;
+    this.x4 = x4;
+    this.y4 = y4;
   }
 
-  public static translate(
+  static translate(
     x1: number,
     y1: number,
     x2: number,
@@ -38,49 +55,17 @@ export class RenderCoords {
     y4: number,
     out?: RenderCoords,
   ): RenderCoords {
-    if (!out) {
-      out = new RenderCoords();
+    if (out === undefined) {
+      return new RenderCoords(x1, y1, x2, y2, x3, y3, x4, y4);
     }
-    out.data[rx1] = x1;
-    out.data[rx2] = x2;
-    out.data[rx3] = x3;
-    out.data[rx4] = x4;
-    out.data[ry1] = y1;
-    out.data[ry2] = y2;
-    out.data[ry3] = y3;
-    out.data[ry4] = y4;
+    out.x1 = x1;
+    out.y1 = y1;
+    out.x2 = x2;
+    out.y2 = y2;
+    out.x3 = x3;
+    out.y3 = y3;
+    out.x4 = x4;
+    out.y4 = y4;
     return out;
   }
-
-  get x1(): number {
-    return this.data[rx1]!;
-  }
-
-  get x2(): number {
-    return this.data[rx2]!;
-  }
-
-  get x3(): number {
-    return this.data[rx3]!;
-  }
-
-  get x4(): number {
-    return this.data[rx4]!;
-  }
-
-  get y1(): number {
-    return this.data[ry1]!;
-  }
-
-  get y2(): number {
-    return this.data[ry2]!;
-  }
-
-  get y3(): number {
-    return this.data[ry3]!;
-  }
-
-  get y4(): number {
-    return this.data[ry4]!;
-  }
 }