如何在Web Worker中使用Pixijs

Question

我需要使用pixijs在画布中显示一个相当复杂的2D形状，因此我想在单独的线程(Web Worker(中创建并定义所有图形元素阻止其余的UI。

问题是，当我像这样的Web Worker文件中导入Pixijs

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

它给了我一个错误，因为它访问了DOM元素(例如窗口和文档(，并且网络工作人员不允许使用此元素。我该如何解决？

这是错误：

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

好吧，我想你不能。Webworkers拥有自己的专用WorkerlobalsCope，无法访问DOM，窗口等。

工作人员和主线程无法共享对象。即使以下解释在技术上不是100％正确的说明，您也可以想象，如果您：

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

它将更像：

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

我想指出的是，您不能与工人和Vice Verca共享对象。

在这里找到一个正确的解释：

https://developer.mozilla.org/en-us/docs/web/web/web_workers_api/using_web_workers#transferring_data_data_to_do_from_from_from_worm_worm_worm_workers_further_details_details

菲利普在他的回答上是正确的，我只想从游戏和网络工人的观点中进一步详细说明。

根据我的经验，很难利用游戏中的网络工人。特别是如果您使用库来处理帆布/webGL，因为无论如何，大多数数字都在处理。如Philipp所述，Web工作人员的设计用于数字处理。并且在Web工作人员和主线程之间传递数据非常昂贵，因此通过数据并对它们进行微小的操作将不会有益。

没有提供直接链接，我已经很久以前就读到某些游戏引擎(我认为构造(使用了网络工人进行探路模块。因此，与直接图形处理无关，而是数值操作。

还提出了有可能在Web Works上下文中使用画布的建议，因此与其他人显然也是一个问题。如果我的记忆正确，我相信这是：https：//developer.mozilla.org/fi/docs/web/api/offscreencanvas

you can 在您的Web Worker中包含Pixijs，尽管您无法执行图形操作。

尽管其他两个答案在技术上是正确的，但是在工人的范围中包含Pixi代码的合法用例，而无需实际渲染图形。一个示例是使用Pixi的Point和Rectangle类。就我而言，我编写了几个模块，这些模块依赖于Pixi导出的定义并根据它们进行大量计算。

您遇到的错误是因为Pixi依赖Globals window和document来定义一些与图形相关的常数。为了允许Pixi完成加载，您可以为window和document提供模拟值，具有与Pixi使用的名称相同的空名称。

。

为例，使用Pixijs 4.8.6以下代码对我有用：

window = self
document = {
    createElement () {
        return {
            getContext () {
                return {
                    fillRect () {},
                    drawImage () {},
                    getImageData () {},
                }
            },
        }
    },
}
importScripts('pixi-4-8-6.js');
/* Web Worker code follows */
// ...

根据Pixi的版本，您可能需要调整此样板。另一种选择是尝试使用嘲笑document和Canvas的无头浏览器的软件包之一。我没有尝试过，因为上面的代码运行得很好。

Pixi 5最近出现了，它可能完全改变了这一点。我浏览了代码，看来他们删除了引起问题的常数定义，因此该新版本也有可能从开箱即用。我知道他们一直在考虑让人们更轻松地使用工人，并且他们一直在探索像Hachi所说的那样的屏幕范围。

pixi团队正在努力添加无头环境的支持，例如网络工人；请参阅https://github.com/pixijs/pixijs/issues/7123