@lightningjs/renderer 2.12.1 → 3.0.0-beta1

package/src/core/TextureMemoryManager.ts

@@ -19,7 +19,7 @@
 import { isProductionEnvironment } from '../utils.js';
 import { getTimeStamp } from './platform.js';
 import type { Stage } from './Stage.js';
-import type { Texture } from './textures/Texture.js';
+import { TextureType, type Texture } from './textures/Texture.js';
 import { bytesToMb } from './utils.js';
 
 export interface TextureMemoryManagerSettings {
@@ -53,13 +53,13 @@ export interface TextureMemoryManagerSettings {
   targetThresholdLevel: number;
 
   /**
-   * Interval between Texture Cleanups (in milliseconds)
+   * Interval between non-aggressive Texture Cleanups (in milliseconds)
    *
    * @remarks
-   * Texture Memory Manager will perform a Texture Cleanup no more
-   * frequently than this interval generally when the scene becomes idle.
+   * Texture Memory Manager will perform a non aggressive Texture Cleanup no more
+   * frequently than this interval when the scene becomes idle.
    *
-   * @defaultValue `30,000` (30 seconds)
+   * @defaultValue `5,000` (5 seconds)
    */
   cleanupInterval: number;
 
@@ -80,6 +80,13 @@ export interface TextureMemoryManagerSettings {
    * @defaultValue `25e6` (25 MB)
    */
   baselineMemoryAllocation: number;
+
+  /**
+   * Do not exceed critical threshold
+   *
+   * @defaultValue `false`
+   */
+  doNotExceedCriticalThreshold: boolean;
 }
 
 export interface MemoryInfo {
@@ -117,7 +124,10 @@ export class TextureMemoryManager {
   private debugLogging: boolean;
   private lastCleanupTime = 0;
   private baselineMemoryAllocation: number;
+
   public criticalCleanupRequested = false;
+  public doNotExceedCriticalThreshold: boolean;
+
   /**
    * The current frame time in milliseconds
    *
@@ -129,18 +139,22 @@ export class TextureMemoryManager {
   public frameTime = 0;
 
   constructor(private stage: Stage, settings: TextureMemoryManagerSettings) {
-    const { criticalThreshold } = settings;
+    const { criticalThreshold, doNotExceedCriticalThreshold } = settings;
+    this.doNotExceedCriticalThreshold = doNotExceedCriticalThreshold || false;
     this.criticalThreshold = Math.round(criticalThreshold);
     const targetFraction = Math.max(
       0,
       Math.min(1, settings.targetThresholdLevel),
     );
-    this.targetThreshold = Math.round(criticalThreshold * targetFraction);
     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);
 
     if (settings.debugLogging) {
@@ -229,24 +243,11 @@ export class TextureMemoryManager {
     );
   }
 
-  cleanup() {
-    const critical = this.criticalCleanupRequested;
-    this.lastCleanupTime = this.frameTime;
-    this.criticalCleanupRequested = false;
-
-    if (critical === true) {
-      this.stage.queueFrameEvent('criticalCleanup', {
-        memUsed: this.memUsed,
-        criticalThreshold: this.criticalThreshold,
-      });
-    }
-
-    if (this.debugLogging) {
-      console.log(
-        `[TextureMemoryManager] Cleaning up textures. Critical: ${critical}`,
-      );
-    }
+  checkCriticalCleanup() {
+    return this.memUsed > this.criticalThreshold;
+  }
 
+  cleanupQuick(critical: boolean) {
     // Free non-renderable textures until we reach the target threshold
     const memTarget = this.targetThreshold;
     const txManager = this.stage.txManager;
@@ -255,10 +256,13 @@ export class TextureMemoryManager {
     while (
       this.memUsed >= memTarget &&
       this.orphanedTextures.length > 0 &&
-      // if it a non-critical cleanup, we will only cleanup for 10ms
       (critical || getTimeStamp() - timestamp < 10)
     ) {
-      const texture = this.orphanedTextures.shift()!;
+      const texture = this.orphanedTextures.shift();
+
+      if (texture === undefined) {
+        continue;
+      }
 
       if (texture.renderable === true) {
         // If the texture is renderable, we can't free it up
@@ -268,6 +272,80 @@ export class TextureMemoryManager {
       texture.free();
       txManager.removeTextureFromCache(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);
+        }
+      }
+    }
+
+    while (this.memUsed >= memTarget && filteredAndSortedTextures.length > 0) {
+      const texture = filteredAndSortedTextures.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);
+    }
+  }
+
+  cleanup(aggressive: boolean = false) {
+    const critical = this.criticalCleanupRequested;
+    this.lastCleanupTime = this.frameTime;
+
+    if (critical === true) {
+      this.stage.queueFrameEvent('criticalCleanup', {
+        memUsed: this.memUsed,
+        criticalThreshold: this.criticalThreshold,
+      });
+    }
+
+    if (this.debugLogging === true) {
+      console.log(
+        `[TextureMemoryManager] Cleaning up textures. Critical: ${critical}. Aggressive: ${aggressive}`,
+      );
+    }
+
+    // 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) {
+      this.cleanupDeep(critical);
+    }
 
     if (this.memUsed >= this.criticalThreshold) {
       this.stage.queueFrameEvent('criticalCleanupFailed', {
@@ -280,6 +358,8 @@ export class TextureMemoryManager {
           `[TextureMemoryManager] Memory usage above critical threshold after cleanup: ${this.memUsed}`,
         );
       }
+    } else {
+      this.criticalCleanupRequested = false;
     }
   }
 
@@ -299,8 +379,9 @@ export class TextureMemoryManager {
           acc + (texture.renderable ? this.loadedTextures.get(texture)! : 0)
         );
       },
-      0,
+      this.baselineMemoryAllocation,
     );
+
     return {
       criticalThreshold: this.criticalThreshold,
       targetThreshold: this.targetThreshold,

package/src/core/animations/CoreAnimation.ts

@@ -46,7 +46,6 @@ export class CoreAnimation extends EventEmitter {
   private timingFunction: (t: number) => number | undefined;
 
   propValuesMap: PropValuesMap = {};
-  dynPropValuesMap: PropValuesMap | undefined = undefined;
 
   constructor(
     private node: CoreNode,
@@ -67,33 +66,18 @@ export class CoreAnimation extends EventEmitter {
             key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>
           ] as number,
         };
-      } else if (node.shader.type !== 'DynamicShader') {
+      } else if (key === 'shaderProps' && node.shader !== null) {
         this.propValuesMap['shaderProps'] = {};
         for (const key in props.shaderProps) {
+          let start = node.shader.props![key];
+          if (Array.isArray(start) === true) {
+            start = start[0];
+          }
           this.propValuesMap['shaderProps'][key] = {
-            start: node.shader.props[key] as number,
+            start,
             target: props.shaderProps[key] as number,
           };
         }
-      } else {
-        const shaderPropKeys = Object.keys(props.shaderProps!);
-        const spLength = shaderPropKeys.length;
-        this.dynPropValuesMap = {};
-        for (let j = 0; j < spLength; j++) {
-          const effectName = shaderPropKeys[j]!;
-          const effect = props.shaderProps![effectName]!;
-          this.dynPropValuesMap[effectName] = {};
-          const effectProps = Object.entries(effect);
-          const eLength = effectProps.length;
-
-          for (let k = 0; k < eLength; k++) {
-            const [key, value] = effectProps[k]!;
-            this.dynPropValuesMap[effectName]![key] = {
-              start: node.shader.props[effectName][key],
-              target: value,
-            };
-          }
-        }
       }
     }
 
@@ -142,24 +126,10 @@ export class CoreAnimation extends EventEmitter {
     }
     if (this.propValuesMap['shaderProps'] !== undefined) {
       this.restoreValues(
-        this.node.shader.props as Record<string, number>,
+        this.node.shader!.props as Record<string, number>,
         this.propValuesMap['shaderProps'],
       );
     }
-
-    if (this.dynPropValuesMap !== undefined) {
-      const dynEntries = Object.keys(this.dynPropValuesMap);
-      const dynEntriesL = dynEntries.length;
-      if (dynEntriesL > 0) {
-        for (let i = 0; i < dynEntriesL; i++) {
-          const key = dynEntries[i]!;
-          this.restoreValues(
-            this.node.shader.props[key],
-            this.dynPropValuesMap[key]!,
-          );
-        }
-      }
-    }
   }
 
   private reverseValues(valueMap: Record<string, PropValues>) {
@@ -185,17 +155,6 @@ export class CoreAnimation extends EventEmitter {
       this.reverseValues(this.propValuesMap['shaderProps']);
     }
 
-    if (this.dynPropValuesMap !== undefined) {
-      const dynEntries = Object.keys(this.dynPropValuesMap);
-      const dynEntriesL = dynEntries.length;
-      if (dynEntriesL > 0) {
-        for (let i = 0; i < dynEntriesL; i++) {
-          const key = dynEntries[i]!;
-          this.reverseValues(this.dynPropValuesMap[key]!);
-        }
-      }
-    }
-
     // restore stop method if we are not looping
     if (!this.settings.loop) {
       this.settings.stopMethod = false;
@@ -308,27 +267,12 @@ export class CoreAnimation extends EventEmitter {
     }
     if (this.propValuesMap['shaderProps'] !== undefined) {
       this.updateValues(
-        this.node.shader.props as Record<string, number>,
+        this.node.shader!.props as Record<string, number>,
         this.propValuesMap['shaderProps'],
         easing,
       );
     }
 
-    if (this.dynPropValuesMap !== undefined) {
-      const dynEntries = Object.keys(this.dynPropValuesMap);
-      const dynEntriesL = dynEntries.length;
-      if (dynEntriesL > 0) {
-        for (let i = 0; i < dynEntriesL; i++) {
-          const key = dynEntries[i]!;
-          this.updateValues(
-            this.node.shader.props[key],
-            this.dynPropValuesMap[key]!,
-            easing,
-          );
-        }
-      }
-    }
-
     if (this.progress < 1) {
       this.emit('tick', { progress: this.progress });
     }

package/src/core/lib/ImageWorker.ts

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import type { CreateImageBitmapSupport } from '../CoreTextureManager.js';
+import type { CreateImageBitmapSupport } from '../lib/validateImageBitmap.js';
 import { type TextureData } from '../textures/Texture.js';
 
 type MessageCallback = [(value: any) => void, (reason: any) => void];
@@ -102,12 +102,13 @@ function createImageWorker() {
               reject(error);
             });
           return;
-        } else if (supportsOptionsCreateImageBitmap === true) {
-          createImageBitmap(blob, {
-            premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
-            colorSpaceConversion: 'none',
-            imageOrientation: 'none',
-          })
+        } else if (
+          supportsOptionsCreateImageBitmap === false &&
+          supportsOptionsCreateImageBitmap === false
+        ) {
+          // Fallback for browsers that do not support createImageBitmap with options
+          // this is supported for Chrome v50 to v52/54 that doesn't support options
+          createImageBitmap(blob)
             .then(function (data) {
               resolve({ data, premultiplyAlpha: premultiplyAlpha });
             })
@@ -115,9 +116,11 @@ function createImageWorker() {
               reject(error);
             });
         } else {
-          // Fallback for browsers that do not support createImageBitmap with options
-          // this is supported for Chrome v50 to v52/54 that doesn't support options
-          createImageBitmap(blob)
+          createImageBitmap(blob, {
+            premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
+            colorSpaceConversion: 'none',
+            imageOrientation: 'none',
+          })
             .then(function (data) {
               resolve({ data, premultiplyAlpha: premultiplyAlpha });
             })
@@ -205,14 +208,19 @@ export class ImageWorkerManager {
     let workerCode = `(${createImageWorker.toString()})()`;
 
     // Replace placeholders with actual initialization values
-    if (createImageBitmapSupport.options) {
+    if (createImageBitmapSupport.options === true) {
       workerCode = workerCode.replace(
         'var supportsOptionsCreateImageBitmap = false;',
         'var supportsOptionsCreateImageBitmap = true;',
       );
     }
 
-    if (createImageBitmapSupport.full) {
+    if (createImageBitmapSupport.full === true) {
+      workerCode = workerCode.replace(
+        'var supportsOptionsCreateImageBitmap = false;',
+        'var supportsOptionsCreateImageBitmap = true;',
+      );
+
       workerCode = workerCode.replace(
         'var supportsFullCreateImageBitmap = false;',
         'var supportsFullCreateImageBitmap = true;',