google-chrome - Chrome 中的 WebGL 性能问题

Question

为了试验 WebGL，我编写了一个脚本来在 Canvas 上渲染一堆 2D Sprite 。所有的 Sprite 都是有纹理的矩形。每个矩形上的纹理都是一样的。他们在每一帧中随机改变他们的位置。

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

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

这是我的渲染的工作原理:

我创建了三个 WebGL 缓冲区:用于顶点位置、纹理坐标和顶点索引。这些缓冲区中的每一个都有足够的空间来容纳 5000 个 Sprite 。我还创建了内存类型化数组来保存顶点位置、纹理坐标和索引(Float32Array 用于顶点和纹理坐标，Uint16Array 用于索引)。

在每一帧上，当添加一个 Sprite 时，我将顶点、纹理坐标和索引数据写入内存数组(此时，没有发生 WebGL 调用)。

在帧的末尾，我使用 bufferSubData 将内存数组中的数据上传到 WebGL 缓冲区中。并调用 drawElements .

难道我做错了什么？ 5k Sprite 的帧率不应该很高吗？最后，为什么 Chrome 中的帧率低于 Firefox？

Answer 1

我不认为您可以发布指向代码实时演示的链接？这将有助于确定性能问题所在。

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

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

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

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

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