I'm trying to rescale a bunch of PIXI.js textures in a separate process, so render UI thread stays responsive. PIXI.js is unrelated to the question, but I want to provide a bit more context of what I'm doing.
Unfortunately, I can't make it work. At first I tried to spawn/fork a subprocess, but turned out I can share only JSON-encoded data between parent and a forked process. Bummer.
So, I decided to open a hidden browser window and repack them there.
Essentially, I do this in my render process:
// Start packing ... Say, urls.length > 1000, so it's quite a lot!
const textureArray = urls.map((url, i) => {
// get the texture (from cache, sync operation) + scale it
const texture = PIXI.Texture.fromImage(url, undefined, undefined, 0.3);
return texture;
});
// log data in the "hidden" window (I made it visible to access the logs, but it doesn't matter)
console.log("Done!")
console.log(textureArray)
// send to main process
ipcRenderer.send('textures', textureArray)
Main process plays ping-pong:
ipcMain.on('textures', (event, data) => {
console.log("Got textures in the main")
// sending data to another window
mainWindow.webContents.send("textures", data)
})
And just log the data upon receiving in the second renderer window (with main UI, which I'm trying to not block).
Now when I compare what I sent and what I receive I notice subtle changes: HTML elements are missing in the data I receive.
I understand why happens: the data I try to send contains the link to the DOM element, not the DOM element itself and it seems like IPC protocol doesn't know how to serialize it. (Just in case it matters: the data I tyr to send is not present in the DOM tree, but created with new Image() internally).
My question is, what is the way to exchange such data between electron windows, or, maybe, there's another way to solve my problem? I will appreciate any help!
