5

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

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

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

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

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

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

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

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

4

1 回答 1

1

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

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

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

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

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

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

于 2013-08-26T21:03:13.620 回答