Feat/image worker

src/core/CoreTextureManager.ts

@@ -18,6 +18,7 @@
  */
 
 import { assertTruthy } from '../utils.js';
+import ImageWorkerManager from './lib/ImageWorker.js';
 import type { CoreContextTexture } from './renderers/CoreContextTexture.js';
 import type { CoreRenderer } from './renderers/CoreRenderer.js';
 import { ColorTexture } from './textures/ColorTexture.js';
@@ -144,7 +145,7 @@ export class CoreTextureManager {
     Texture,
     { cacheKey: string | false; count: number }
   > = new WeakMap();
-
+  imageWorkerManager: ImageWorkerManager;
   /**
    * Renderer that this texture manager is associated with
    *
@@ -154,8 +155,9 @@ export class CoreTextureManager {
    */
   renderer!: CoreRenderer;
 
-  constructor() {
+  constructor(numImageWorkers: number) {
     // Register default known texture types
+    this.imageWorkerManager = new ImageWorkerManager(numImageWorkers);
     this.registerTextureType('ImageTexture', ImageTexture);
     this.registerTextureType('ColorTexture', ColorTexture);
     this.registerTextureType('NoiseTexture', NoiseTexture);

src/core/Stage.ts

@@ -45,6 +45,7 @@ export interface StageOptions {
   clearColor: number;
   fpsUpdateInterval: number;
   enableContextSpy: boolean;
+  numImageWorkers: number;
 
   debug?: {
     monitorTextureCache?: boolean;
@@ -93,8 +94,10 @@ export class Stage extends EventEmitter {
       appWidth,
       appHeight,
       enableContextSpy,
+      numImageWorkers,
     } = options;
-    this.txManager = new CoreTextureManager();
+
+    this.txManager = new CoreTextureManager(numImageWorkers);
     this.shManager = new CoreShaderManager();
     this.animationManager = new AnimationManager();
     this.contextSpy = enableContextSpy ? new ContextSpy() : null;

src/core/lib/ImageWorker.ts

@@ -0,0 +1,128 @@
+/*
+ * 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 TextureData } from '../textures/Texture.js';
+
+type MessageCallback = [(value: any) => void, (reason: any) => void];
+
+class ImageWorkerManager {
+  isWorkerSupported = !!window.Worker;
+  imageWorkersEnabled = true;
+  messageManager: Record<string, MessageCallback> = {};
+  workers: Worker[] = [];
+  workerIndex = 0;
+  anchor = document.createElement('a');
+
+  constructor(numImageWorkers: number) {
+    if (this.isWorkerSupported && numImageWorkers > 0) {
+      this.workers = this.createWorkers(numImageWorkers);
+      this.workers.forEach((worker) => {
+        worker.onmessage = this.handleMessage.bind(this);
+      });
+    } else {
+      this.imageWorkersEnabled = false;
+    }
+  }
+
+  private handleMessage(event: MessageEvent) {
+    const { src, data, error } = event.data as {
+      src: string;
+      data?: any;
+      error?: string;
+    };
+    const msg = this.messageManager[src];
+    if (msg) {
+      const [resolve, reject] = msg;
+      delete this.messageManager[src];
+      if (error) {
+        reject(new Error(error));
+      } else {
+        resolve(data);
+      }
+    }
+  }
+
+  private createWorkers(numWorkers = 1): Worker[] {
+    const workerCode = `
+      async function getImage(src, premultiplyAlpha) {
+        const response = await fetch(src);
+        const blob = await response.blob();
+        const data = await createImageBitmap(blob, {
+          premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        });
+        return { data };
+      }
+
+      self.onmessage = async (event) => {
+        const { src, premultiplyAlpha } = event.data;
+
+        try {
+          const data = await getImage(src, premultiplyAlpha);
+          self.postMessage({ src, data });
+        } catch (error) {
+          self.postMessage({ src, error: error.message });
+        }
+      };
+    `;
+
+    const blob: Blob = new Blob([workerCode.replace('"use strict";', '')], {
+      type: 'application/javascript',
+    });
+    const blobURL: string = (window.URL ? URL : webkitURL).createObjectURL(
+      blob,
+    );
+    const workers: Worker[] = [];
+    for (let i = 0; i < numWorkers; i++) {
+      workers.push(new Worker(blobURL));
+    }
+    return workers;
+  }
+
+  private getNextWorker(): Worker {
+    const worker = this.workers[this.workerIndex];
+    this.workerIndex = (this.workerIndex + 1) % this.workers.length;
+    return worker!;
+  }
+
+  private convertUrlToAbsolute(url: string): string {
+    this.anchor.href = url;
+    return this.anchor.href;
+  }
+
+  getImage(src: string, premultiplyAlpha: boolean): Promise<TextureData> {
+    return new Promise((resolve, reject) => {
+      try {
+        if (this.workers) {
+          const absoluteSrcUrl = this.convertUrlToAbsolute(src);
+          this.messageManager[absoluteSrcUrl] = [resolve, reject];
+          this.getNextWorker().postMessage({
+            src: absoluteSrcUrl,
+            premultiplyAlpha,
+          });
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+}
+
+export default ImageWorkerManager;

src/core/textures/ImageTexture.ts

@@ -83,15 +83,23 @@ export class ImageTexture extends Texture {
         premultiplyAlpha,
       };
     }
-    const response = await fetch(src);
-    const blob = await response.blob();
-    return {
-      data: await createImageBitmap(blob, {
-        premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
-        colorSpaceConversion: 'none',
-        imageOrientation: 'none',
-      }),
-    };
+
+    if (this.txManager.imageWorkerManager.imageWorkersEnabled) {
+      return await this.txManager.imageWorkerManager.getImage(
+        src,
+        premultiplyAlpha,
+      );
+    } else {
+      const response = await fetch(src);
+      const blob = await response.blob();
+      return {
+        data: await createImageBitmap(blob, {
+          premultiplyAlpha: premultiplyAlpha ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        }),
+      };
+    }
   }
 
   static override makeCacheKey(props: ImageTextureProps): string | false {

src/main-api/RendererMain.ts

@@ -226,6 +226,18 @@ export interface RendererMainSettings {
    * @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;
 }
 
 /**
@@ -293,6 +305,8 @@ 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;

src/render-drivers/main/MainCoreDriver.ts

@@ -54,6 +54,7 @@ export class MainCoreDriver implements ICoreDriver {
       canvas,
       fpsUpdateInterval: rendererSettings.fpsUpdateInterval,
       enableContextSpy: rendererSettings.enableContextSpy,
+      numImageWorkers: rendererSettings.numImageWorkers,
       debug: {
         monitorTextureCache: false,
       },

src/render-drivers/threadx/ThreadXCoreDriver.ts

@@ -110,6 +110,7 @@ export class ThreadXCoreDriver implements ICoreDriver {
         coreExtensionModule: rendererSettings.coreExtensionModule,
         fpsUpdateInterval: rendererSettings.fpsUpdateInterval,
         enableContextSpy: rendererSettings.enableContextSpy,
+        numImageWorkers: rendererSettings.numImageWorkers,
       } satisfies ThreadXRendererInitMessage,
       [offscreenCanvas],
     )) as number;

src/render-drivers/threadx/ThreadXRendererMessage.ts

@@ -46,6 +46,7 @@ export interface ThreadXRendererInitMessage extends ThreadXRendererMessage {
   clearColor: number;
   fpsUpdateInterval: number;
   enableContextSpy: boolean;
+  numImageWorkers: number;
   coreExtensionModule: string | null;
 }
 

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

@@ -72,6 +72,7 @@ const threadx = ThreadX.init({
         canvas,
         fpsUpdateInterval: message.fpsUpdateInterval,
         enableContextSpy: message.enableContextSpy,
+        numImageWorkers: message.numImageWorkers,
         debug: {
           monitorTextureCache: false,
         },