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

Question

我一直在尝试使用这些很棒的教程来学习 Web GL 。我的目标是制作一个非常简单的 2D 游戏框架来替换基于画布的jawsJS。

我基本上只是希望能够创建一堆精灵并移动它们，然后也许可以创建一些瓷砖。

我整理了一个基本演示来执行此操作，但遇到了无法追踪的性能问题。一旦我在屏幕上看到大约 2000 个左右的精灵，帧率就会下降，我不知道为什么。与pixi.js webgl 框架的这个演示相比，它在大约 30000 个兔子左右（在我的机器上）开始丢失帧，我有点失望。

我的demo（框架源码）有5002个精灵，其中两个在移动，帧率在马桶里。

我已经尝试通过 pixi.js 框架来尝试找出它们的不同之处，但它是 500kloc 并且比我的要多得多，以至于我无法解决。

我发现这个答案基本上证实了我所做的大致正确 - 我的算法与答案中的算法几乎相同，但必须有更多。

到目前为止，我已经尝试了一些方法 - 只使用一个定义了单个形状的“帧缓冲区”，然后为每个精灵翻译 5000 次。这确实有助于提高帧速率，但没有什么能关闭 pixi 演示（这意味着所有精灵必须具有相同的形状！）。我删除了所有不动的矩阵数学，所以也不是那样。这一切似乎都归结为drawArrays()功能 - 它对我来说真的很慢，但仅限于我的演示！

我还尝试删除所有基于纹理的东西，用简单的块颜色替换片段着色器。它几乎没有任何区别，所以我消除了狡猾的纹理处理作为罪魁祸首。

我真的很感激能帮助我追查我所做的非常愚蠢的事情！

编辑：我绝对误解了这里的关键。我将整个事情剥离回到基础，将顶点和片段着色器更改为超级简单：

attribute vec2 a_position;

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

和：

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

然后将精灵设置为绘制到 (0,0), (1,1)。

使用 5000 个精灵，绘制一帧大约需要 5 秒。这里发生了什么？

Answer 1

使用WebGLInspector或chrome 中的实验性画布检查器查看帧调用会发现完全没有优化的渲染循环。

你可以和应该使用同一个vertexbuffer渲染所有的几何形状，这种方式可以节省bindBuffer藏汉作为vertexAttribPointer呼叫。您还可以节省 99% 的纹理绑定，因为您需要反复重新绑定一个相同的纹理。只要您不将其他内容绑定到同一纹理单元，纹理就会保持绑定状态。

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

看看我在这里关于 gpu 作为状态机的回答。

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

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