为什么 WebGL 渲染速度如此不一致？

Question

在我的应用程序中，我使用 LINE_STRIP 标志对 WebGL 的绘图数组进行一次调用，绘制了大约 800 万个顶点。我实际上并不想要一根长线，我想要大约 200k 条短线，所以我用额外的顶点覆盖所有短线，并告诉顶点着色器将线帽“推”到负 z 以创建隐形桥。渲染是准静态的（用户可以单击触发重新渲染的各种内容），因此它不必非常快，但我真的希望在现代计算机上花费的时间少于 200 毫秒。

在我的笔记本电脑上 [更新：运行 Win7，使用一些 Intel i7 作为 CPU，并使用集成 HD Graphics 4000 作为 GPU] 我在 Chrome 中得到了大约 100 毫秒，这很好。但奇怪的是，Firefox 大约需要 1-2 秒。在我的三星 Chromebook 550 上，我得到的时间从 600 毫秒到 2 秒不等，通常启动很快，然后后续渲染速度变慢，但也可以变得更快。

问题：

• 是什么导致我的 Chromebook 上的渲染速度发生变化？
• 为什么我的笔记本电脑上的 Firefox 比 Chrome 慢很多？
• 是否值得花费大量时间试图让它运行得更快（即我可以期待很大的改进）吗？有小费吗？

笔记：

• 对于 Chromebook 重复渲染测试，渲染之间发生的唯一事情是更改统一以在调色板之间切换（实现为纹理）。Chrome开发工具似乎并不认为测试期间页面的内存使用情况有任何重大变化。

• 我使用 gl.finish 和 console.time 来查看渲染需要多长时间。

• 除了在调试期间之外，我都会渲染到一个孤立的画布，然后将结果的各个部分复制到页面UPDATE:使用drawImage（将 webgl 画布作为第一个参数）上的各个小画布。这可能确实需要一些时间，但是无论是否进行复制操作，以及是否将 webgl 画布附加到页面主体（并​​且可见），上面报告的数字似乎都没有太大变化。

• 更新：我的笔记本电脑一次性渲染的顶点数量是有限制的，但该限制似乎随时都会波动，如果超过限制，它就不会渲染任何东西。这个数字大约在 800 万大关左右，但有时超过 1100 万也令人高兴。我现在将其设置为一次批量 200 万个。有趣的是，这似乎让我的 Chromebook 运行得更快，但我不能确定，因为它非常不一致。

• 更新：我已经禁用了 DEPTH_TEST 和 BLEND，因为我不需要它们。我不相信这有什么不同。

• 更新：我尝试使用点而不是线进行渲染。在我的 Chromebook 上，0 点大小（即不渲染任何内容）似乎需要大约 1 秒，然后当我将点大小增加到 1,2 和 5 时大约需要 1.5-2 秒。

• 更新：将所有内容保留在 z=0 平面上似乎并没有太大改变速度，也许它会慢一点（我希望有更多的像素可以通过片段着色器，尽管片段着色器只是将变化直接汇集到 gl_FragColor 中）。

Answer 1

尽管通常（好的）建议是在每次绘制调用中渲染尽可能多的内容，但某些（至少是我所知道的）GPU 在处理顶点数据时会使用内部缓冲区。超过这些缓冲区的容量可能会使您的性能急剧下降。减小顶点批次的大小，直到您开始发现批次太小导致性能下降。