@lightningjs/renderer 0.6.1 → 0.7.1

package/src/core/utils.ts

@@ -23,6 +23,8 @@
  * @module
  */
 
+import memo from 'memize';
+
 export const EPSILON = 0.000001;
 export let ARRAY_TYPE =
   typeof Float32Array !== 'undefined' ? Float32Array : Array;
@@ -119,97 +121,97 @@ const getTimingBezier = (
   };
 };
 
-export const getTimingFunction = (
-  str: string,
-): ((time: number) => number | undefined) => {
-  switch (str) {
-    case 'linear':
-      return function (time: number) {
-        return time;
-      };
-    case 'ease':
-      return getTimingBezier(0.25, 0.1, 0.25, 1.0);
-
-    case 'ease-in':
-      return getTimingBezier(0.42, 0, 1.0, 1.0);
-    case 'ease-out':
-      return getTimingBezier(0, 0, 0.58, 1.0);
-    case 'ease-in-out':
-      return getTimingBezier(0.42, 0, 0.58, 1.0);
-
-    case 'ease-in-sine':
-      return getTimingBezier(0.12, 0, 0.39, 0);
-    case 'ease-out-sine':
-      return getTimingBezier(0.12, 0, 0.39, 0);
-    case 'ease-in-out-sine':
-      return getTimingBezier(0.37, 0, 0.63, 1);
-
-    case 'ease-in-cubic':
-      return getTimingBezier(0.32, 0, 0.67, 0);
-    case 'ease-out-cubic':
-      return getTimingBezier(0.33, 1, 0.68, 1);
-    case 'ease-in-out-cubic':
-      return getTimingBezier(0.65, 0, 0.35, 1);
-
-    case 'ease-in-circ':
-      return getTimingBezier(0.55, 0, 1, 0.45);
-    case 'ease-out-circ':
-      return getTimingBezier(0, 0.55, 0.45, 1);
-    case 'ease-in-out-circ':
-      return getTimingBezier(0.85, 0, 0.15, 1);
-
-    case 'ease-in-back':
-      return getTimingBezier(0.36, 0, 0.66, -0.56);
-    case 'ease-out-back':
-      return getTimingBezier(0.34, 1.56, 0.64, 1);
-    case 'ease-in-out-back':
-      return getTimingBezier(0.68, -0.6, 0.32, 1.6);
-
-    case 'step-start':
-      return function () {
-        return 1;
-      };
-    case 'step-end':
-      return function (time: number) {
-        return time === 1 ? 1 : 0;
-      };
-    default:
-      // eslint-disable-next-line no-case-declarations
-      const s = 'cubic-bezier(';
-      if (str && str.indexOf(s) === 0) {
-        const parts = str
-          .substr(s.length, str.length - s.length - 1)
-          .split(',');
-        if (parts.length !== 4) {
+export const getTimingFunction = memo(
+  (str: string): ((time: number) => number | undefined) => {
+    switch (str) {
+      case 'linear':
+        return function (time: number) {
+          return time;
+        };
+      case 'ease':
+        return getTimingBezier(0.25, 0.1, 0.25, 1.0);
+
+      case 'ease-in':
+        return getTimingBezier(0.42, 0, 1.0, 1.0);
+      case 'ease-out':
+        return getTimingBezier(0, 0, 0.58, 1.0);
+      case 'ease-in-out':
+        return getTimingBezier(0.42, 0, 0.58, 1.0);
+
+      case 'ease-in-sine':
+        return getTimingBezier(0.12, 0, 0.39, 0);
+      case 'ease-out-sine':
+        return getTimingBezier(0.12, 0, 0.39, 0);
+      case 'ease-in-out-sine':
+        return getTimingBezier(0.37, 0, 0.63, 1);
+
+      case 'ease-in-cubic':
+        return getTimingBezier(0.32, 0, 0.67, 0);
+      case 'ease-out-cubic':
+        return getTimingBezier(0.33, 1, 0.68, 1);
+      case 'ease-in-out-cubic':
+        return getTimingBezier(0.65, 0, 0.35, 1);
+
+      case 'ease-in-circ':
+        return getTimingBezier(0.55, 0, 1, 0.45);
+      case 'ease-out-circ':
+        return getTimingBezier(0, 0.55, 0.45, 1);
+      case 'ease-in-out-circ':
+        return getTimingBezier(0.85, 0, 0.15, 1);
+
+      case 'ease-in-back':
+        return getTimingBezier(0.36, 0, 0.66, -0.56);
+      case 'ease-out-back':
+        return getTimingBezier(0.34, 1.56, 0.64, 1);
+      case 'ease-in-out-back':
+        return getTimingBezier(0.68, -0.6, 0.32, 1.6);
+
+      case 'step-start':
+        return function () {
+          return 1;
+        };
+      case 'step-end':
+        return function (time: number) {
+          return time === 1 ? 1 : 0;
+        };
+      default:
+        // eslint-disable-next-line no-case-declarations
+        const s = 'cubic-bezier(';
+        if (str && str.indexOf(s) === 0) {
+          const parts = str
+            .substr(s.length, str.length - s.length - 1)
+            .split(',');
+          if (parts.length !== 4) {
+            console.warn('Unknown timing function: ' + str);
+            // Fallback: use linear.
+            return function (time) {
+              return time;
+            };
+          }
+          const a = parseFloat(parts[0] || '0.42');
+          const b = parseFloat(parts[1] || '0');
+          const c = parseFloat(parts[2] || '1');
+          const d = parseFloat(parts[3] || '1');
+
+          if (isNaN(a) || isNaN(b) || isNaN(c) || isNaN(d)) {
+            console.warn(' Unknown timing function: ' + str);
+            // Fallback: use linear.
+            return function (time) {
+              return time;
+            };
+          }
+
+          return getTimingBezier(a, b, c, d);
+        } else {
           console.warn('Unknown timing function: ' + str);
           // Fallback: use linear.
           return function (time) {
             return time;
           };
         }
-        const a = parseFloat(parts[0] || '0.42');
-        const b = parseFloat(parts[1] || '0');
-        const c = parseFloat(parts[2] || '1');
-        const d = parseFloat(parts[3] || '1');
-
-        if (isNaN(a) || isNaN(b) || isNaN(c) || isNaN(d)) {
-          console.warn(' Unknown timing function: ' + str);
-          // Fallback: use linear.
-          return function (time) {
-            return time;
-          };
-        }
-
-        return getTimingBezier(a, b, c, d);
-      } else {
-        console.warn('Unknown timing function: ' + str);
-        // Fallback: use linear.
-        return function (time) {
-          return time;
-        };
-      }
-  }
-};
+    }
+  },
+);
 
 if (!Math.hypot)
   Math.hypot = (...args: number[]) => {

package/src/env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+  readonly PROD: boolean;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/src/main-api/ICoreDriver.ts

@@ -17,6 +17,7 @@
  * limitations under the License.
  */
 
+import type { FpsUpdatePayload } from '../common/CommonTypes.js';
 import type {
   INode,
   INodeWritableProps,
@@ -56,5 +57,5 @@ export interface ICoreDriver {
 
   onBeforeDestroyNode(node: INode): void;
 
-  onFpsUpdate(fps: number): void;
+  onFpsUpdate(fpsData: FpsUpdatePayload): void;
 }

package/src/main-api/RendererMain.ts

@@ -211,6 +211,33 @@ export interface RendererMainSettings {
    * @defaultValue `0` (disabled)
    */
   fpsUpdateInterval?: number;
+
+  /**
+   * Include context call (i.e. WebGL) information in FPS updates
+   *
+   * @remarks
+   * When enabled the number of calls to each context method over the
+   * `fpsUpdateInterval` will be included in the FPS update payload's
+   * `contextSpyData` property.
+   *
+   * Enabling the context spy has a serious impact on performance so only use it
+   * when you need to extract context call information.
+   *
+   * @defaultValue `false` (disabled)
+   */
+  enableContextSpy?: boolean;
+
+  /**
+   * Number or Image Workers to use
+   *
+   * @remarks
+   * On devices with multiple cores, this can be used to improve image loading
+   * as well as reduce the impact of image loading on the main thread.
+   * Set to 0 to disable image workers.
+   *
+   * @defaultValue `2`
+   */
+  numImageWorkers?: number;
 }
 
 /**
@@ -278,6 +305,9 @@ export class RendererMain extends EventEmitter {
         settings.experimental_FinalizationRegistryTextureUsageTracker ?? false,
       textureCleanupOptions: settings.textureCleanupOptions || {},
       fpsUpdateInterval: settings.fpsUpdateInterval || 0,
+      numImageWorkers:
+        settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
+      enableContextSpy: settings.enableContextSpy ?? false,
     };
     this.settings = resolvedSettings;
 
@@ -335,8 +365,8 @@ export class RendererMain extends EventEmitter {
       this.nodes.delete(node.id);
     };
 
-    driver.onFpsUpdate = (fps) => {
-      this.emit('fpsUpdate', fps);
+    driver.onFpsUpdate = (fpsData) => {
+      this.emit('fpsUpdate', fpsData);
     };
 
     targetEl.appendChild(canvas);
@@ -389,11 +419,12 @@ export class RendererMain extends EventEmitter {
    * @returns
    */
   createTextNode(props: Partial<ITextNodeWritableProps>): ITextNode {
-    return this.driver.createTextNode({
+    const fontSize = props.fontSize ?? 16;
+    const data = {
       ...this.resolveNodeDefaults(props),
       text: props.text ?? '',
       textRendererOverride: props.textRendererOverride ?? null,
-      fontSize: props.fontSize ?? 16,
+      fontSize,
       fontFamily: props.fontFamily ?? 'sans-serif',
       fontStyle: props.fontStyle ?? 'normal',
       fontWeight: props.fontWeight ?? 'normal',
@@ -404,8 +435,15 @@ export class RendererMain extends EventEmitter {
       scrollY: props.scrollY ?? 0,
       offsetY: props.offsetY ?? 0,
       letterSpacing: props.letterSpacing ?? 0,
+      lineHeight: props.lineHeight ?? fontSize,
+      maxLines: props.maxLines ?? 0,
+      textBaseline: props.textBaseline ?? 'alphabetic',
+      verticalAlign: props.verticalAlign ?? 'top',
+      overflowSuffix: props.overflowSuffix ?? '...',
       debug: props.debug ?? {},
-    });
+    };
+
+    return this.driver.createTextNode(data);
   }
 
   /**

package/src/render-drivers/main/MainCoreDriver.ts

@@ -25,13 +25,14 @@ import type {
   ITextNodeWritableProps,
 } from '../../main-api/INode.js';
 import { MainOnlyNode, getNewId } from './MainOnlyNode.js';
-import { Stage } from '../../core/Stage.js';
+import { Stage, type StageFpsUpdateHandler } from '../../core/Stage.js';
 import type {
   RendererMain,
   RendererMainSettings,
 } from '../../main-api/RendererMain.js';
 import { MainOnlyTextNode } from './MainOnlyTextNode.js';
 import { loadCoreExtension } from '../utils.js';
+import type { FpsUpdatePayload } from '../../common/CommonTypes.js';
 
 export class MainCoreDriver implements ICoreDriver {
   private root: MainOnlyNode | null = null;
@@ -52,6 +53,8 @@ export class MainCoreDriver implements ICoreDriver {
       clearColor: rendererSettings.clearColor,
       canvas,
       fpsUpdateInterval: rendererSettings.fpsUpdateInterval,
+      enableContextSpy: rendererSettings.enableContextSpy,
+      numImageWorkers: rendererSettings.numImageWorkers,
       debug: {
         monitorTextureCache: false,
       },
@@ -74,9 +77,9 @@ export class MainCoreDriver implements ICoreDriver {
     }
 
     // Forward fpsUpdate events from the stage to RendererMain
-    this.stage.on('fpsUpdate', (stage: Stage, fps: number) => {
-      this.onFpsUpdate(fps);
-    });
+    this.stage.on('fpsUpdate', ((stage, fpsData) => {
+      this.onFpsUpdate(fpsData);
+    }) satisfies StageFpsUpdateHandler);
   }
 
   createNode(props: INodeWritableProps): INode {
@@ -123,7 +126,7 @@ export class MainCoreDriver implements ICoreDriver {
     throw new Error('Method not implemented.');
   }
 
-  onFpsUpdate(fps: number) {
+  onFpsUpdate(fpsData: FpsUpdatePayload) {
     throw new Error('Method not implemented.');
   }
   //#endregion

package/src/render-drivers/main/MainOnlyTextNode.ts

@@ -81,8 +81,12 @@ export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
         scrollY: props.scrollY,
         offsetY: props.offsetY,
         textRendererOverride: props.textRendererOverride,
+        lineHeight: props.lineHeight,
+        maxLines: props.maxLines,
+        textBaseline: props.textBaseline,
+        verticalAlign: props.verticalAlign,
+        overflowSuffix: props.overflowSuffix,
         debug: props.debug,
-
         // These properties will get set appropriately in the base MainOnlyNode class
         parent: null,
         texture: null,
@@ -197,6 +201,56 @@ export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
     this.coreNode.letterSpacing = value;
   }
 
+  get lineHeight(): ITextNode['lineHeight'] {
+    return this.coreNode.lineHeight;
+  }
+
+  set lineHeight(value: ITextNode['lineHeight']) {
+    if (value) {
+      this.coreNode.lineHeight = value;
+    }
+  }
+
+  get maxLines(): ITextNode['maxLines'] {
+    return this.coreNode.maxLines;
+  }
+
+  set maxLines(value: ITextNode['maxLines']) {
+    if (value) {
+      this.coreNode.maxLines = value;
+    }
+  }
+
+  get textBaseline(): ITextNode['textBaseline'] {
+    return this.coreNode.textBaseline;
+  }
+
+  set textBaseline(value: ITextNode['textBaseline']) {
+    if (value) {
+      this.coreNode.textBaseline = value;
+    }
+  }
+
+  get verticalAlign(): ITextNode['verticalAlign'] {
+    return this.coreNode.verticalAlign;
+  }
+
+  set verticalAlign(value: ITextNode['verticalAlign']) {
+    if (value) {
+      this.coreNode.verticalAlign = value;
+    }
+  }
+
+  get overflowSuffix(): ITextNode['overflowSuffix'] {
+    return this.coreNode.overflowSuffix;
+  }
+
+  set overflowSuffix(value: ITextNode['overflowSuffix']) {
+    if (value) {
+      this.coreNode.overflowSuffix = value;
+    }
+  }
+
   get debug(): ITextNode['debug'] {
     return this.coreNode.debug;
   }

package/src/render-drivers/threadx/TextNodeStruct.ts

@@ -163,4 +163,49 @@ export class TextNodeStruct
   set letterSpacing(value: TextNodeStructWritableProps['letterSpacing']) {
     // Decorator will handle this
   }
+
+  @structProp('number')
+  get lineHeight(): TextNodeStructWritableProps['lineHeight'] {
+    return 0;
+  }
+
+  set lineHeight(value: TextNodeStructWritableProps['lineHeight']) {
+    // Decorator will handle this
+  }
+
+  @structProp('number')
+  get maxLines(): TextNodeStructWritableProps['maxLines'] {
+    return 0;
+  }
+
+  set maxLines(value: TextNodeStructWritableProps['maxLines']) {
+    // Decorator will handle this
+  }
+
+  @structProp('string')
+  get textBaseline(): TextNodeStructWritableProps['textBaseline'] {
+    return 'alphabetic';
+  }
+
+  set textBaseline(value: TextNodeStructWritableProps['textBaseline']) {
+    // Decorator will handle this
+  }
+
+  @structProp('string')
+  get verticalAlign(): TextNodeStructWritableProps['verticalAlign'] {
+    return 'middle';
+  }
+
+  set verticalAlign(value: TextNodeStructWritableProps['verticalAlign']) {
+    // Decorator will handle this
+  }
+
+  @structProp('string')
+  get overflowSuffix(): TextNodeStructWritableProps['overflowSuffix'] {
+    return '...';
+  }
+
+  set overflowSuffix(value: TextNodeStructWritableProps['overflowSuffix']) {
+    // Decorator will handle this
+  }
 }

package/src/render-drivers/threadx/ThreadXCoreDriver.ts

@@ -42,6 +42,7 @@ import {
   type TextNodeStructWritableProps,
 } from './TextNodeStruct.js';
 import { ThreadXMainTextNode } from './ThreadXMainTextNode.js';
+import type { FpsUpdatePayload } from '../../common/CommonTypes.js';
 
 export interface ThreadXRendererSettings {
   coreWorkerUrl: string;
@@ -79,7 +80,7 @@ export class ThreadXCoreDriver implements ICoreDriver {
       onMessage: async (message) => {
         // Forward fpsUpdate events from the renderer worker's Stage to RendererMain
         if (isThreadXRendererMessage('fpsUpdate', message)) {
-          this.onFpsUpdate(message.fps);
+          this.onFpsUpdate(message.fpsData);
         }
       },
     });
@@ -108,6 +109,8 @@ export class ThreadXCoreDriver implements ICoreDriver {
         clearColor: rendererSettings.clearColor,
         coreExtensionModule: rendererSettings.coreExtensionModule,
         fpsUpdateInterval: rendererSettings.fpsUpdateInterval,
+        enableContextSpy: rendererSettings.enableContextSpy,
+        numImageWorkers: rendererSettings.numImageWorkers,
       } satisfies ThreadXRendererInitMessage,
       [offscreenCanvas],
     )) as number;
@@ -215,8 +218,13 @@ export class ThreadXCoreDriver implements ICoreDriver {
       fontWeight: props.fontWeight,
       fontStretch: props.fontStretch,
       fontStyle: props.fontStyle,
+      lineHeight: props.lineHeight,
+      maxLines: props.maxLines,
+      textBaseline: props.textBaseline,
+      verticalAlign: props.verticalAlign,
       contain: props.contain,
       letterSpacing: props.letterSpacing,
+      overflowSuffix: props.overflowSuffix,
       offsetY: props.offsetY,
       textAlign: props.textAlign,
       scrollable: props.scrollable,
@@ -258,7 +266,7 @@ export class ThreadXCoreDriver implements ICoreDriver {
     throw new Error('Method not implemented.');
   }
 
-  onFpsUpdate(fps: number): void {
+  onFpsUpdate(fps: FpsUpdatePayload): void {
     throw new Error('Method not implemented.');
   }
   //#endregion

package/src/render-drivers/threadx/ThreadXMainTextNode.ts

@@ -38,12 +38,17 @@ export class ThreadXMainTextNode extends ThreadXMainNode implements ITextNode {
       fontStretch: sharedNodeStruct.fontStretch,
       fontStyle: sharedNodeStruct.fontStyle,
       fontWeight: sharedNodeStruct.fontWeight,
+      lineHeight: sharedNodeStruct.lineHeight,
+      maxLines: sharedNodeStruct.maxLines,
+      textBaseline: sharedNodeStruct.textBaseline,
+      verticalAlign: sharedNodeStruct.verticalAlign,
       contain: sharedNodeStruct.contain,
       letterSpacing: sharedNodeStruct.letterSpacing,
       offsetY: sharedNodeStruct.offsetY,
       scrollable: sharedNodeStruct.scrollable,
       scrollY: sharedNodeStruct.scrollY,
       textAlign: sharedNodeStruct.textAlign,
+      overflowSuffix: sharedNodeStruct.overflowSuffix,
     } satisfies Omit<TextNodeStructWritableProps, keyof NodeStructWritableProps>);
   }
 
@@ -54,12 +59,17 @@ export class ThreadXMainTextNode extends ThreadXMainNode implements ITextNode {
   declare fontStretch: ITextNode['fontStretch'];
   declare fontStyle: ITextNode['fontStyle'];
   declare fontWeight: ITextNode['fontWeight'];
+  declare lineHeight: ITextNode['lineHeight'];
+  declare maxLines: ITextNode['maxLines'];
+  declare textBaseline: ITextNode['textBaseline'];
+  declare verticalAlign: ITextNode['verticalAlign'];
   declare textAlign: ITextNode['textAlign'];
   declare contain: ITextNode['contain'];
   declare scrollable: ITextNode['scrollable'];
   declare scrollY: ITextNode['scrollY'];
   declare offsetY: ITextNode['offsetY'];
   declare letterSpacing: ITextNode['letterSpacing'];
+  declare overflowSuffix: ITextNode['overflowSuffix'];
 
   get debug(): ITextNode['debug'] {
     return this._debug;

package/src/render-drivers/threadx/ThreadXRendererMessage.ts

@@ -17,6 +17,8 @@
  * limitations under the License.
  */
 
+import type { FpsUpdatePayload } from '../../common/CommonTypes.js';
+
 /**
  * @module
  * @description
@@ -43,6 +45,8 @@ export interface ThreadXRendererInitMessage extends ThreadXRendererMessage {
   devicePhysicalPixelRatio: number;
   clearColor: number;
   fpsUpdateInterval: number;
+  enableContextSpy: boolean;
+  numImageWorkers: number;
   coreExtensionModule: string | null;
 }
 
@@ -62,7 +66,7 @@ export interface ThreadXRendererReleaseTextureMessage
 export interface ThreadXRendererFpsUpdateMessage
   extends ThreadXRendererMessage {
   type: 'fpsUpdate';
-  fps: number;
+  fpsData: FpsUpdatePayload;
 }
 
 /**

package/src/render-drivers/threadx/worker/ThreadXRendererTextNode.ts

@@ -85,6 +85,11 @@ export class ThreadXRendererTextNode extends ThreadXRendererNode {
         fontWeight: sharedNodeStruct.fontWeight,
         fontStretch: sharedNodeStruct.fontStretch,
         fontStyle: sharedNodeStruct.fontStyle,
+        lineHeight: sharedNodeStruct.lineHeight,
+        maxLines: sharedNodeStruct.maxLines,
+        textBaseline: sharedNodeStruct.textBaseline,
+        verticalAlign: sharedNodeStruct.verticalAlign,
+        overflowSuffix: sharedNodeStruct.overflowSuffix,
         contain: sharedNodeStruct.contain,
         letterSpacing: sharedNodeStruct.letterSpacing,
         offsetY: sharedNodeStruct.offsetY,
@@ -101,6 +106,11 @@ export class ThreadXRendererTextNode extends ThreadXRendererNode {
         fontWeight: sharedNodeStruct.fontWeight,
         fontStretch: sharedNodeStruct.fontStretch,
         fontStyle: sharedNodeStruct.fontStyle,
+        lineHeight: sharedNodeStruct.lineHeight,
+        maxLines: sharedNodeStruct.maxLines,
+        textBaseline: sharedNodeStruct.textBaseline,
+        verticalAlign: sharedNodeStruct.verticalAlign,
+        overflowSuffix: sharedNodeStruct.overflowSuffix,
         contain: sharedNodeStruct.contain,
         letterSpacing: sharedNodeStruct.letterSpacing,
         offsetY: sharedNodeStruct.offsetY,
@@ -125,6 +135,11 @@ export class ThreadXRendererTextNode extends ThreadXRendererNode {
   declare fontWeight: TextNodeStructWritableProps['fontWeight'];
   declare fontStretch: TextNodeStructWritableProps['fontStretch'];
   declare fontStyle: TextNodeStructWritableProps['fontStyle'];
+  declare lineHeight: TextNodeStructWritableProps['lineHeight'];
+  declare maxLines: TextNodeStructWritableProps['maxLines'];
+  declare textBaseline: TextNodeStructWritableProps['textBaseline'];
+  declare verticalAlign: TextNodeStructWritableProps['verticalAlign'];
+  declare overflowSuffix: TextNodeStructWritableProps['overflowSuffix'];
   declare contain: TextNodeStructWritableProps['contain'];
   declare letterSpacing: TextNodeStructWritableProps['letterSpacing'];
   declare offsetY: TextNodeStructWritableProps['offsetY'];

package/src/render-drivers/threadx/worker/renderer.ts

@@ -20,7 +20,7 @@
 import { ThreadX, BufferStruct } from '@lightningjs/threadx';
 import { NodeStruct, type NodeStructWritableProps } from '../NodeStruct.js';
 import { ThreadXRendererNode } from './ThreadXRendererNode.js';
-import { Stage } from '../../../core/Stage.js';
+import { Stage, type StageFpsUpdateHandler } from '../../../core/Stage.js';
 import { assertTruthy } from '../../../utils.js';
 import {
   isThreadXRendererMessage,
@@ -71,6 +71,8 @@ const threadx = ThreadX.init({
         clearColor: message.clearColor,
         canvas,
         fpsUpdateInterval: message.fpsUpdateInterval,
+        enableContextSpy: message.enableContextSpy,
+        numImageWorkers: message.numImageWorkers,
         debug: {
           monitorTextureCache: false,
         },
@@ -120,12 +122,12 @@ const threadx = ThreadX.init({
       }
 
       // Forward FPS updates to the main worker.
-      stage.on('fpsUpdate', (stage: Stage, fps: number) => {
+      stage.on('fpsUpdate', ((stage, fpsData) => {
         threadx.sendMessage('parent', {
           type: 'fpsUpdate',
-          fps,
+          fpsData: fpsData,
         } satisfies ThreadXRendererFpsUpdateMessage);
-      });
+      }) satisfies StageFpsUpdateHandler);
 
       // Return its ID so the main worker can retrieve it from the shared object
       // store.