Load the wasm files from the main thread

src/Misc/KTX2/LiteTranscoder.ts

@@ -18,11 +18,7 @@ export class LiteTranscoder extends Transcoder {
         }
 
         this._modulePromise = new Promise((resolve) => {
-            fetch(this._modulePath).
-            then((response) => {
-                return response.arrayBuffer();
-            }).
-            then((wasmBinary: string | ArrayBuffer) => {
+            WASMMemoryManager.LoadWASM(this._modulePath).then((wasmBinary) => {
                 WebAssembly.instantiate(wasmBinary as ArrayBuffer, { env: { memory: this._memoryManager.wasmMemory } }).then((moduleWrapper) => {
                     resolve({ module: moduleWrapper.instance.exports });
                 });

src/Misc/KTX2/khronosTextureContainer2.ts

@@ -7,6 +7,7 @@ import { Nullable } from '../../types';
 import { IMipmap } from "./KTX2WorkerThread";
 import { workerFunc } from "./KTX2WorkerThreadJS";
 import { KTX2FileReader } from './KTX2FileReader';
+import { Tools } from '../tools';
 
 //const RGB_S3TC_DXT1_Format = 33776;
 //const RGBA_S3TC_DXT5_Format = 33779;
@@ -38,7 +39,24 @@ export class KhronosTextureContainer2 {
                             res(this._Worker!);
                         }
                     };
+
+                    const loadWASMHandler = (msg: any) => {
+                        const cache: { [path: string]: Promise<ArrayBuffer | string> } = {};
+                        if (msg.data.action === "loadWASM") {
+                            let promise = cache[msg.data.path];
+                            if (!promise) {
+                                promise = Tools.LoadFileAsync(msg.data.path);
+                                cache[msg.data.path] = promise;
+                            }
+                            promise.then((wasmBinary) => {
+                                this._Worker!.postMessage({ action: "wasmLoaded", wasmBinary: wasmBinary, id: msg.data.id });
+                                return wasmBinary;
+                            });
+                        }
+                    };
+
                     this._Worker.addEventListener("message", initHandler);
+                    this._Worker.addEventListener("message", loadWASMHandler);
                     this._Worker.postMessage({ action: "init" });
                 }
             });

src/Misc/KTX2/mscTranscoder.ts

@@ -1,6 +1,7 @@
 import { Nullable } from '../../types';
 import { Transcoder, sourceTextureFormat, transcodeTarget } from './transcoder';
 import { KTX2FileReader, IKTX2_ImageDesc } from './KTX2FileReader';
+import { WASMMemoryManager } from './wasmMemoryManager';
 
 declare var MSC_TRANSCODER: any;
 
@@ -10,6 +11,14 @@ declare function importScripts(...urls: string[]): void;
  * @hidden
  */
 export class MSCTranscoder extends Transcoder {
+    /**
+     * URL to use when loading the MSC transcoder
+     */
+    public static JSModuleURL = "https://preview.babylonjs.com/ktx2Transcoders/msc_basis_transcoder.js";
+    /**
+     * URL to use when loading the wasm module for the transcoder
+     */
+    public static WasmModuleURL = "https://preview.babylonjs.com/ktx2Transcoders/msc_basis_transcoder.wasm";
 
     private _mscBasisTranscoderPromise: Promise<any>;
     private _mscBasisModule: any;
@@ -20,11 +29,13 @@ export class MSCTranscoder extends Transcoder {
         }
 
         this._mscBasisTranscoderPromise = new Promise((resolve) => {
-            importScripts("https://preview.babylonjs.com/ktx2Transcoders/msc_basis_transcoder.js");
-            MSC_TRANSCODER().then((basisModule: any) => {
-                basisModule.initTranscoders();
-                this._mscBasisModule = basisModule;
-                resolve();
+            importScripts(MSCTranscoder.JSModuleURL);
+            WASMMemoryManager.LoadWASM(MSCTranscoder.WasmModuleURL).then((wasmBinary) => {
+                MSC_TRANSCODER({ wasmBinary }).then((basisModule: any) => {
+                    basisModule.initTranscoders();
+                    this._mscBasisModule = basisModule;
+                    resolve();
+                });
             });
         });
 

src/Misc/KTX2/wasmMemoryManager.ts

@@ -1,8 +1,29 @@
+declare function postMessage(message: any, transfer?: any[]): void;
+
 /**
  * @hidden
  */
 export class WASMMemoryManager {
 
+    private static _RequestId = 0;
+
+    public static LoadWASM(path: string): Promise<ArrayBuffer> {
+        return new Promise((resolve) => {
+            const id = this._RequestId++;
+
+            const wasmLoadedHandler = (msg: any) => {
+                if (msg.data.action === "wasmLoaded" && msg.data.id === id) {
+                    self.removeEventListener("message", wasmLoadedHandler);
+                    resolve(msg.data.wasmBinary);
+                }
+            };
+
+            self.addEventListener("message", wasmLoadedHandler);
+
+            postMessage({ action: "loadWASM", path: path, id: id });
+        });
+    }
+
     private _memory: WebAssembly.Memory;
     private _numPages: number;
     private _memoryView: Uint8Array;
@@ -26,14 +47,12 @@ export class WASMMemoryManager {
         byteLength = byteLength ?? numPages << 16;
 
         if (this._numPages < numPages) {
-            console.log("grow memory", this._numPages, numPages);
             this._memory.grow(numPages - this._numPages);
             this._numPages = numPages;
             this._memoryView = new Uint8Array(this._memory.buffer, offset, byteLength);
             this._memoryViewByteLength = byteLength;
             this._memoryViewOffset = offset;
         } else {
-            console.log("recreate view", this._memoryViewByteLength, byteLength, this._memoryViewOffset, offset);
             this._memoryView = new Uint8Array(this._memory.buffer, offset, byteLength);
             this._memoryViewByteLength = byteLength;
             this._memoryViewOffset = offset;