Objective: I want to use a worker to read 16 bit image information and return it to the main thread. For this I need fast-png (a node module)
When i start something i have never done before, i like to start with the simplest possible code, because there are always challenges and so hurdles can be overcome one after the other. And here is my problem
export const texture_loader_threaded = (function() {
class _TextureLoader_Threaded {
constructor() {
this.TextureLoaderWorker = new Worker('src/texture-loader-threaded-worker.js', {type: 'module'});
this.TextureLoaderWorker.onmessage = (e) => {
this.result = e.data;
};
}//end constructor
}//end class
return {
TextureLoader_Threaded: _TextureLoader_Threaded
}
})();
//****************texture-loader-threaded-worker.js**********************
import { decode } from 'fast-png'; // <-- Here is my problem.
//fast-png is a node module. I can import it
//anywhere in the program but not here in the worker.
//But that's exactly where I need it.
//I would like to understand things.
//so I'm happy if someone can explain why I can't import it into a worker.
//There will be a solution for sure,
//but that assumes that one understand why it doesn't work normally.
//Does anyone have experience with integrating node
//modules into workers and an understanding
//of why it doesn't work with normal import?
async function imageLoader() {
const arrayBuffer = await(await fetch('./resources/textures/png/native.png')).arrayBuffer();
const data = await decode(arrayBuffer);
postMessage(data);
}
imageLoader();
I use webpack for bundling. Do I maybe have to change something in the configuration to integrate node modules in workers?
//webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js' },
};