如何在 Web Worker 中使用 PixiJS

Question

I need to display a quite complex 2D shape in a canvas using PixiJS and to do so I'd like to create and define all graphic elements in a separate thread (web worker) to not block the rest of the UI.

The problem is that when I import PixiJS in the web worker file like this

importScripts('https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.2/pixi.js');

it gives me an error because it accesses DOM elements (like window and document) and this is not allowed in web workers. How can I solve this?

This is the error:

Uncaught ReferenceError: window is not defined
at Object.179../Math.sign (Object.assign.js:3)
at s (_prelude.js:1)
at _prelude.js:1
at Object.<anonymous> (WebGLPrepare.js:101)
at Object.187../accessibility (index.js:44)
at s (_prelude.js:1)
at e (_prelude.js:1)
at _prelude.js:1
at _prelude.js:1
at _prelude.js:1

Answer 1

Well I guess you cannot. Webworkers have their own DedicatedWorkerGlobalScope with no access to the DOM, window, etc. If you have heavy computations, for instance to calculate animations, all you can do is let the webworker do the number crunching and the main thread do the rendering.

The Worker and the main thread cannot share objects. Even if the following explanation is not 100% technically correct, you can imagine that if you:

var obj = { a: { b: 100 } };
worker.postMessage(obj);

It will be more like:

                   //really dirty object clone here
worker.postMessage(JSON.parse(JSON.stringify(obj)));

With that I want to point out, that you cannot share objects with the worker and vice verca.

Find a tecnically correct explaintion here:

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Transferring_data_to_and_from_workers_further_details

Answer 2

Philipp is right on his answer, I just want to elaborate this a bit further, from the games and web workers point-of-view.

In my experience, it is ofter hard to take advantage of web workers in games. Especially if you use a library to handle canvas / webGL, since that does most of the number crunching anyway. Web workers are designed for number crunching as philipp mentioned. And passing data between web worker and main thread is quite expensive, so passing data and doing tiny operations on them, will not be beneficial.

Without providing a direct link, I read already long while ago that some game engines (I think construct) used web workers for their pathfinding module. So nothing related to direct graphic handling, but numerical operations.

Also there is a proposal for possibility to use canvases in web worker contexts, so it is clearly an issue with others too. If my memory serves right, I believe it was this: https://developer.mozilla.org/fi/docs/Web/API/OffscreenCanvas

Answer 3

You can include PixiJS in your Web Worker, although you can not perform graphics operations.

Although the other two answers are technically correct, there are legitimate use cases for including Pixi's code in your Worker's scope without actually rendering graphics. An example is using Pixi's Point and Rectangle classes. In my case, I wrote several modules that rely on definitions exported by Pixi and perform heavy calculations based on them.

The errors you had were because Pixi relies on the globals window and document to define some graphics-related constants. In order to allow Pixi to finish loading you can provide mock values for window and document with empty methods with the same names as the ones used by Pixi.

As an example, while using PixiJS 4.8.6 the following code worked for me:

window = self
document = {
    createElement () {
        return {
            getContext () {
                return {
                    fillRect () {},
                    drawImage () {},
                    getImageData () {},
                }
            },
        }
    },
}

importScripts('pixi-4-8-6.js');

/* Web Worker code follows */
// ...

Depending on Pixi's version you may need to adjust this boilerplate. An alternative would be to try one of those packages that mock document and Canvas for headless browsers. I haven't tried that since the code above worked well enough.

Pixi 5 came out recently and it may have changed this completely. I skimmed the code and it looks like they removed the constant definition that was causing problems so it's also possible that this new version just works out of the box. I know they have been looking into letting people use Workers more easily and they have been exploring OffscreenCanvas like Hachi said.

Answer 4

pixi team is working on adding headless environments support like web workers; see https://github.com/pixijs/pixijs/issues/7123