refactor: update texture processing to use time limit instead of count

Author: wouterlucas

src/core/CoreTextureManager.ts

@@ -26,6 +26,7 @@ import { SubTexture } from './textures/SubTexture.js';
 import { RenderTexture } from './textures/RenderTexture.js';
 import type { Texture } from './textures/Texture.js';
 import { EventEmitter } from '../common/EventEmitter.js';
+import { getTimeStamp } from './platform.js';
 
 /**
  * Augmentable map of texture class types
@@ -437,40 +438,38 @@ export class CoreTextureManager extends EventEmitter {
    *
    * @param maxItems - The maximum number of items to process
    */
-  processSome(maxItems = 0): void {
+  processSome(maxProcessingTime: number): void {
     if (this.initialized === false) {
       return;
     }
 
-    let itemsProcessed = 0;
+    const startTime = getTimeStamp();
 
     // Process priority queue
     while (
       this.priorityQueue.length > 0 &&
-      (maxItems === 0 || itemsProcessed < maxItems)
+      performance.now() - startTime < maxProcessingTime
     ) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const texture = this.priorityQueue.shift()!;
       texture.getTextureData().then(() => {
         this.uploadTexture(texture);
       });
-      itemsProcessed++;
     }
 
     // Process uploads
     while (
       this.uploadTextureQueue.length > 0 &&
-      (maxItems === 0 || itemsProcessed < maxItems)
+      performance.now() - startTime < maxProcessingTime
     ) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       this.uploadTexture(this.uploadTextureQueue.shift()!);
-      itemsProcessed++;
     }
 
     // Process downloads
     while (
       this.downloadTextureSourceQueue.length > 0 &&
-      (maxItems === 0 || itemsProcessed < maxItems)
+      performance.now() - startTime < maxProcessingTime
     ) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const texture = this.downloadTextureSourceQueue.shift()!;
@@ -479,8 +478,6 @@ export class CoreTextureManager extends EventEmitter {
           this.enqueueUploadTexture(texture);
         });
       });
-
-      itemsProcessed++;
     }
   }
 

src/core/Stage.ts

@@ -75,7 +75,7 @@ export interface StageOptions {
   fontEngines: (typeof CanvasTextRenderer | typeof SdfTextRenderer)[];
   inspector: boolean;
   strictBounds: boolean;
-  textureProcessingLimit: number;
+  textureProcessingTimeLimit: number;
 }
 
 export type StageFpsUpdateHandler = (
@@ -365,7 +365,7 @@ export class Stage {
 
     // Process some textures
     // TODO this should have a configurable amount
-    this.txManager.processSome(this.options.textureProcessingLimit);
+    this.txManager.processSome(this.options.textureProcessingTimeLimit);
 
     // Reset render operations and clear the canvas
     renderer.reset();

src/main-api/Renderer.ts

@@ -269,15 +269,16 @@ export interface RendererMainSettings {
   strictBounds?: boolean;
 
   /**
-   * Texture Processing Limit
+   * Texture Processing Limit (in milliseconds)
    *
    * @remarks
-   * The maximum number of textures to process in a single frame. This is used to
-   * prevent the renderer from processing too many textures in a single frame.
+   * The maximum amount of time the renderer is allowed to process textures in a
+   * single frame. If the processing time exceeds this limit, the renderer will
+   * skip processing the remaining textures and continue rendering the frame.
    *
-   * @defaultValue `0`
+   * @defaultValue `10`
    */
-  textureProcessingLimit?: number;
+  textureProcessingTimeLimit?: number;
 
   /**
    * Canvas object to use for rendering
@@ -378,7 +379,7 @@ export class RendererMain extends EventEmitter {
       quadBufferSize: settings.quadBufferSize ?? 4 * 1024 * 1024,
       fontEngines: settings.fontEngines,
       strictBounds: settings.strictBounds ?? true,
-      textureProcessingLimit: settings.textureProcessingLimit || 0,
+      textureProcessingTimeLimit: settings.textureProcessingTimeLimit || 10,
       canvas: settings.canvas || document.createElement('canvas'),
     };
     this.settings = resolvedSettings;
@@ -422,7 +423,7 @@ export class RendererMain extends EventEmitter {
       fontEngines: this.settings.fontEngines,
       inspector: this.settings.inspector !== null,
       strictBounds: this.settings.strictBounds,
-      textureProcessingLimit: this.settings.textureProcessingLimit,
+      textureProcessingTimeLimit: this.settings.textureProcessingTimeLimit,
     });
 
     // Extract the root node