Question

我需要使用PixiJS在画布中显示相当复杂的2D形状，并且这样做我想在单独的线程（Web worker）中创建和定义所有图形元素，以便不阻止UI的其余部分。

问题在于，当我像这样

在Web工作文件中导入PixiJS时

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

它给我一个错误，因为它访问DOM元素（如窗口和文档），这在Web worker中是不允许的。我该如何解决这个问题？

这是错误：

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

嗯，我想你不能。 Web工作者有自己的DedicatedWorkerGlobalScope，无法访问DOM，窗口等。如果你有大量计算，例如计算动画，你所能做的就是让webworker进行数字运算，主线程执行渲染。

Worker和主线程无法共享对象。即使以下说明在技术上并非100％正确，您也可以想象如果您：

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

更像是：

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

我希望指出，你不能与工人和副verca分享对象。

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

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

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

根据我的经验，在游戏中利用网络工作者是很困难的。特别是如果你使用一个库来处理canvas / webGL，那么无论如何都要进行大部分的数字运算。正如philipp所提到的那样，网络工作者是为数字运算而设计的。并且在Web worker和主线程之间传递数据非常昂贵，因此传递数据并对它们执行微小操作将不会有益。

在没有提供直接链接的情况下，我很久以前就读到了一些游戏引擎（我认为构造）使用了web worker作为其寻路模块。所以没有任何东西与直接图形处理相关，而是数值运算。

此外，还有一项建议可以在网络工作者环境中使用画布，因此这显然也是其他人的问题。如果我的记忆正确，我相信就是这样：https://developer.mozilla.org/fi/docs/Web/API/OffscreenCanvas

Answer 3

尽管您无法执行图形操作，但您可以将PixiJS包含在Web Worker中。

尽管其他两个答案在技术上都是正确的，但仍有一些合理的用例将Pixi的代码包括在Worker的作用域中，而无需实际渲染图形。一个示例是使用Pixi的Point和Rectangle类。就我而言，我编写了几个模块，这些模块依赖于Pixi导出的定义并基于它们进行大量计算。

您遇到的错误是因为Pixi依赖于全局变量window和document来定义一些与图形相关的常量。为了使Pixi完成加载，您可以使用与Pixi使用的名称相同的空方法为window和document提供模拟值。

例如，在使用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最近问世，可能已经完全改变了这一点。我浏览了一下代码，看起来好像他们删除了引起问题的常量定义，因此，这个新版本也可能开箱即用。我知道他们一直在寻找让人们更轻松地使用Workers的方式，并且他们像Hachi所说的那样一直在探索OffscreenCanvas。

Answer 4

pixi 团队正在努力添加无头环境支持，如网络工作者；见https://github.com/pixijs/pixijs/issues/7123

如何在web worker中使用PixiJS

4 个答案: