Chrome 中的 WebGL 性能问题答案

【问题标题】：WebGL performance issue in ChromeChrome 中的 WebGL 性能问题
【发布时间】：2023-03-19 19:59:02
【问题描述】：

为了试验 WebGL，我编写了一个在画布上渲染一堆 2D 精灵的脚本。所有的精灵都只是纹理矩形。每个矩形上的纹理都是相同的。它们在每一帧中随机改变位置。

我在 Windows 上看到一个奇怪的问题：在 Chrome 中，帧速率几乎比 Firefox 低 2 倍（在 Mac 上，Chrome 和 Firefox 具有相似的帧速率）。 Chrome 的 Windows 版本中是否存在影响 WebGL 性能的已知问题？

另一个问题是，当我将精灵计数从大约 500 增加到 5000 时，帧速率从几乎每秒 60 帧下降到每秒 20-30 帧。如果我错了，请纠正我，但是对于现代显卡来说，渲染 5000 个纹理四边形不应该是一个相对较轻的工作量吗？以 30 fps 运行的现代游戏的多边形数量可能要高得多。

我的渲染是这样工作的：

我创建了三个 WebGL 缓冲区：用于顶点位置、纹理坐标和顶点索引。这些缓冲区中的每一个都有足够的空间来容纳 5000 个精灵。我还创建内存类型数组来保存顶点位置、纹理坐标和索引（Float32Array 用于顶点和纹理坐标，Uint16Array 用于索引）。
在每一帧上，添加精灵时，我将顶点、纹理坐标和索引数据写入内存数组（此时，不会发生 WebGL 调用）。
在帧结束时，我使用bufferSubData 将内存数组中的数据上传到WebGL 缓冲区并调用drawElements。

我做错了吗？ 5k精灵的帧率不应该很高吗？最后，为什么 Chrome 的帧率比 Firefox 低？

【问题讨论】：

标签： google-chrome firefox graphics webgl

【解决方案1】：

我不认为你可以发布一个链接到你的代码的现场演示？这将有助于确定性能问题所在。

至于 Chrome 和 Firefox 之间的区别，它可以是任意数量的东西，但其中一种可能是 TypedArrays 的性能。 Firefox 和 Chrome 在 TypedArray 构造/使用方面具有不同的性能特征，如果您大量使用它们（听起来像您），这可能会导致您看到的一些性能差异。还应该注意的是，每帧向 GPU 上传约 0.5Mb 的顶点和索引数据（根据您的描述估计）并不是世界上最快的事情。不应该太慢，但不会很快。

我的建议是尝试一一排除可能的问题：首先尝试渲染 5000 个静态纹理四边形，而不更新每一帧的顶点数据。性能还是不一样吗？那么它可能是您的顶点格式或着色器的一些怪癖。

如果它们执行相同，请尝试重新启用更新步骤，但只构建内存数组，不要上传它们。如果现在存在性能差异，那么您应该寻找减少缓冲区流失的方法。（即：如果您是，请不要每帧创建一个新缓冲区等）

如果性能仍然没有不同，则可能是上传步骤造成的。解决这个问题比较棘手（您应该提交一个 Chrome 错误来描述这种情况以及它比 Firefox 慢的地方）但是您可以通过查看instancing 或使用统一数组而不是更新位置的顶点来潜在地减少缓冲区上传量/纹理。

希望这可以帮助您找到瓶颈！

【讨论】：