Google chrome Chrome中的WebGL性能问题

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

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

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

以下是我的渲染工作原理：

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

Float32Array

用于顶点和纹理坐标，

Uint16Array

用于索引）

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

在帧的末尾，我使用

bufferSubData

并调用

drawerelements

将数据从内存阵列上传到WebGL缓冲区

---

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

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

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

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

如果它们执行相同的操作，请尝试重新启用更新步骤，但只构建内存中的阵列，而不上载它们。如果现在存在性能差异，那么您应该寻找减少缓冲区搅动的方法。（即：如果需要，不要每帧创建一个新缓冲区，等等）

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

希望这能帮助你找到你的瓶颈