javascript - 为什么我的简单 webgl 演示这么慢

Question

我一直在尝试使用 these awesome tutorials 来学习 Web GL 。我的目标是制作一个非常简单的2D游戏框架来取代基于canvas的jawsJS。

我基本上只是希望能够创建一堆 Sprite 并移动它们，然后可能是一些图 block 。

我制作了一个基本演示来执行此操作，但遇到了无法追踪的性能问题。一旦我在屏幕上看到大约 2000 个左右的 Sprite ，帧速率就会下降，我不明白为什么。与此相比demo of the pixi.js webgl framework ，在大约 30000 个兔子左右(在我的机器上)开始丢帧，我有点失望。

My demo ( framework source ) 有 5002 个 Sprite ，其中两个在移动，帧率在厕所里。

我尝试通过 pixi.js 框架来尝试找出它们的不同之处，但它有 500kloc，而且比我的多得多，所以我无法弄清楚。

我找到了this answer这基本上证实了我正在做的事情大致是正确的 - 我的算法与答案中的算法几乎相同，但肯定还有更多内容。

到目前为止，我已经尝试了一些事情 - 仅使用一个定义了单个形状的“帧缓冲区”，然后为每个 Sprite 翻译 5000 次。这确实对帧速率有所帮助，但与 pixi 演示相比没有任何帮助(这意味着所有 Sprite 必须具有相同的形状!)。我删除了所有不移动的矩阵数学，所以它也不是那样的。这一切似乎都归结于 drawArrays() 函数 - 它对我来说真的很慢，但仅限于我的演示!

我还尝试删除所有基于纹理的内容，将片段着色器替换为简单的 block 颜色。它几乎没有什么区别，所以我消除了狡猾的纹理处理作为罪魁祸首。

如果有人帮助我找出我做过的极其愚蠢的事情，我真的很感激!

编辑:我肯定误解了这里的一些关键内容。我将整个事情剥离回到基础，将顶点和片段着色器更改为 super 简单:

attribute vec2 a_position;

void main() {
    gl_Position = vec4(a_position, 0, 1);
}

和:

void main() {
    gl_FragColor = vec4(0,1,0,1);  // green
}

然后将 Sprite 设置为绘制到 (0,0)、(1,1)。

对于 5000 个 Sprite ，绘制一帧大约需要 5 秒。这是怎么回事？

Answer 1

查看使用 WebGLInspector 进行的框架调用或实验canvas inspector在 Chrome 中，显示了一个完全未优化的渲染循环。

您可以而且应该使用同一个顶点缓冲区来渲染所有几何体，这样您就可以保存 bindBuffer 以及 vertexAttribPointer 调用。当您重复重新绑定(bind)一个相同的纹理时，您还可以节省 99% 的纹理绑定(bind)。只要您不将其他东西绑定(bind)到同一个纹理单元，纹理就会保持绑定(bind)状态。

拥有状态缓存有助于避免绑定(bind)已经绑定(bind)的数据。

看看my answer here关于 GPU 作为状态机。

优化渲染循环后，您可以继续考虑以下事项:

• 使用 ANGLE_instanced_arrays 扩展
• 避免在渲染循环中构造数据。
• 使用交错顶点缓冲区。
• 在某些情况下不使用索引缓冲区也会增加性能。
• 检查是否可以在着色器中减少一些 GPU 周期
• 将对象分解为 block ，并在 CPU 端进行视锥体剔除。