How do I use @babylonjs/ktx2decoder properly?

Questions
19

Ahhh… Finally got it to work. needed to jump though some more hoops.
This is for Typescript + Webpack 5

msc_basis_transcoder.d.ts

declare module "@babylonjs/ktx2decoder/wasm/msc_basis_transcoder.wasm?arraybuffer" {
	const content: ArrayBuffer;
	export default content;
}

src/index.ts

...
import { KhronosTextureContainer2 } from "@babylonjs/core/Misc/khronosTextureContainer2";
import { AutoReleaseWorkerPool } from "@babylonjs/core/Misc/workerPool";
import { initializeWebWorker } from "@babylonjs/core/Misc/khronosTextureContainer2Worker";

import wasmMSCTranscoder from "@babylonjs/ktx2decoder/wasm/msc_basis_transcoder.wasm?arraybuffer";
import "@babylonjs/core/Materials/Textures/Loaders/ktxTextureLoader";

const agentPool = new AutoReleaseWorkerPool(4, () => {
	const worker = new Worker(new URL('./worker.js', import.meta.url), {type: 'module'});
	return initializeWebWorker(worker, { wasmMSCTranscoder: wasmMSCTranscoder });
});

const engine = new Engine(canvas, true);
const ktx2 = new KhronosTextureContainer2(engine, { workerPool: agentPool});

src/worker.js [Ignore webpack warning about MSC_TRANSCODER module has no exports]

import * as KTX2Decoder from "@babylonjs/ktx2decoder";
import { workerFunction } from "@babylonjs/core/Misc/khronosTextureContainer2Worker";
import mscTranscoderJsModule from "@babylonjs/ktx2decoder/wasm/msc_basis_transcoder";
import { MSCTranscoder as jsMSCTranscoder } from "@babylonjs/ktx2decoder/Transcoders/mscTranscoder";

globalThis.KTX2DECODER = KTX2Decoder;
globalThis.MSC_TRANSCODER = undefined;
jsMSCTranscoder.JSModule = mscTranscoderJsModule;
workerFunction(KTX2Decoder);

js.webpack.config.js || ts.webpack.config.js

modules.export = {
    experiments: {
        asyncWebAssembly: true,
        syncWebAssembly: true
    },
module: {
        rules: [
            {
                 test: /\.wasm$/,
                 type: "javascript/auto",
                 use: ["arraybuffer-loader"] // npm install arraybuffer-loader
            }
        ]
    }
}

Edit forgot tsconfig.
tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "moduleResolution": "node",

  }
}

Play around with the tsconfig settings. Im not 100% if changing the target, module to esnext and setting resolveJsonModule, esModuleInterop to true actually did anything.

2 Likes