Javascript 如何在webworker中使用PixiJS

我需要使用PixiJS在画布上显示一个相当复杂的2D形状，为此，我希望在一个单独的线程（web worker）中创建和定义所有图形元素，以避免阻塞UI的其余部分

问题是当我像这样在web worker文件中导入PixiJS时

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

它给了我一个错误，因为它访问DOM元素（如窗口和文档），而这在web workers中是不允许的。我怎样才能解决这个问题

这就是错误：

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

未捕获引用错误：未定义窗口
在Object.179../Math.sign（Object.assign.js:3）
在s（_prelude.js:1）
at_prelude.js:1
反对。（WebGLPrepare.js:101）
at Object.187../accessibility（index.js:44）
在s（_prelude.js:1）
在e（_prelude.js:1）
at_prelude.js:1
at_prelude.js:1
at_prelude.js:1

我想你不能。webworker拥有自己的权限，无法访问DOM、窗口等。如果您有繁重的计算，例如计算动画，您所能做的就是让webworker进行数字处理，由主线程进行渲染

辅助线程和主线程不能共享对象。即使以下解释在技术上并非100%正确，您也可以想象：

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

它将更像：

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

因此，我想指出，您不能与worker和vice verca共享对象

请在此处找到技术上正确的解释：

---

我想你不能。webworker拥有自己的权限，无法访问DOM、窗口等。如果您有繁重的计算，例如计算动画，您所能做的就是让webworker进行数字处理，由主线程进行渲染

辅助线程和主线程不能共享对象。即使以下解释在技术上并非100%正确，您也可以想象：

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

它将更像：

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

因此，我想指出，您不能与worker和vice verca共享对象

请在此处找到技术上正确的解释：

---

菲利普的回答是对的，我只想从游戏和网络工作者的角度进一步阐述一下

根据我的经验，在游戏中利用网络工作者往往比较困难。特别是如果您使用一个库来处理canvas/webGL，因为大部分的数字处理都是由它来完成的。正如philipp提到的，网络工作者是为数字处理而设计的。而且，在web worker和主线程之间传递数据是非常昂贵的，所以传递数据并对其执行微小操作将不会有好处

在没有提供直接链接的情况下，我很久以前就读到一些游戏引擎（我认为是构造）使用web workers作为他们的寻路模块。因此，与直接图形处理无关，而是与数值运算有关

---

此外，还有一项提议，建议在网络工作者的环境中使用画布，因此这显然也是其他人的问题。如果我没记错的话，我相信是这样的：

菲利普的回答是对的，我只想从游戏和网络工作者的角度进一步阐述一下

根据我的经验，在游戏中利用网络工作者往往比较困难。特别是如果您使用一个库来处理canvas/webGL，因为大部分的数字处理都是由它来完成的。正如philipp提到的，网络工作者是为数字处理而设计的。而且，在web worker和主线程之间传递数据是非常昂贵的，所以传递数据并对其执行微小操作将不会有好处

在没有提供直接链接的情况下，我很久以前就读到一些游戏引擎（我认为是构造）使用web workers作为他们的寻路模块。因此，与直接图形处理无关，而是与数值运算有关

---

此外，还有一项提议，建议在网络工作者的环境中使用画布，因此这显然也是其他人的问题。如果我没记错的话，我相信是这样的：

您可以在Web Worker中包含PixiJ，尽管您不能执行图形操作

尽管其他两个答案在技术上是正确的，但在没有实际渲染图形的情况下，将Pixi的代码包含在工作人员的范围内是合法的。例如，使用Pixi的

点

和

矩形

类。在我的例子中，我编写了几个模块，这些模块依赖于Pixi导出的定义，并基于这些定义执行大量计算

您所犯的错误是因为Pixi依赖全局

窗口

和

文档

来定义一些与图形相关的常量。为了允许Pixi完成加载，您可以使用与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最近推出，它可能已经彻底改变了这一点。我浏览了代码，看起来他们删除了导致问题的常量定义，所以这个新版本也可能是开箱即用的。我知道他们一直在考虑让人们更容易地使用Worker，并且他们一直在探索Hachi所说的Offscreencavas。

你可以在你的Web Worker中加入Pixij，尽管你不能执行图形操作

尽管其他两个答案在技术上是正确的，但在没有实际渲染图形的情况下，将Pixi的代码包含在工作人员的范围内是合法的。例如，使用Pixi的

点

和

矩形

类。在我的例子中，我编写了几个模块，这些模块依赖于Pixi导出的定义并执行繁重的计算