运行基于 webassembly 的 WebGL 程序的 CPU 使用率高

Posted 2023-02-22

【中文标题】运行基于 webassembly 的 WebGL 程序的 CPU 使用率高

【英文标题】：High CPU usage running webassembly based WebGL program

【发布时间】：2021-01-28 22:02:45

【问题描述】：

我正在使用 webassembly（C++ 和 emscripten）制作游戏，其中我使用 OpenGL 生成图形。我注意到我的游戏经常使用大量 CPU，通常为 200-300%。如果我有更大的 3D 模型或我的着色器更复杂，则此 CPU 使用率会更高。

这对于 webassembly 是否正常？还是我做错了什么？我有点担心我犯了一个错误，因为通常我不希望 CPU 使用率与 3D 模型的大小直接相关（我希望这主要会对显卡造成影响），但因为它是 webassembly可能会有所不同。

在运行 OpenGL 和 WebAssembly 时，有没有什么好的技巧可以减少 CPU 使用率？

编辑： 我开始工作的基本示例是 https://github.com/timhutton/opengl-canvas-wasm 现场演示 (https://timhutton.github.io/opengl-canvas-wasm/) 这已经在相当高的 CPU 上运行。该示例使其在如此高的 CPU 负载下运行有什么问题？不是glBufferData，即使是删除也会使CPU保持高位。

【问题讨论】：

也许您的浏览器使用了软件渲染后备？

不能告诉你没有代码你做错了什么，但here's a webassembly webgl app using opengl。如果它没有表现不好，那么问题就是你的代码。如果您使用的是 20 年前的固定函数 opengl (glVertex)，那么这将是性能不佳的运行原因。

不，我不使用旧的 opengl 函数渲染。您链接的示例表现良好，但如果我的顶点数很少，我的应用程序也会如此。我从这个例子开始开发：github.com/timhutton/opengl-canvas-wasm 另外，如果我直接拿那个例子，将顶点数增加到 10000+，我的 CPU 也会上升，所以似乎不是因为我所做的任何更改

"也许您的浏览器使用了软件渲染回退？"有可能以某种方式检查吗？

是的，所以我只是注意到这个简单的例子在这里也有一个现场演示：timhutton.github.io/opengl-canvas-wasm 对我来说已经以 50% 的 CPU 运行，所以也许这个例子本身就有问题？我编辑了帖子以添加更多详细信息

【参考方案1】：

您的浏览器可能由于某种原因使用了软件渲染，请检查您的浏览器 GPU 调试页面，看看是否有任何问题，在 Chrome 中是 chrome://gpu，在 Firefox 中是 about:support 中的 GPU 部分。