performance - Webgl:低 fps 和约 72% 的空闲时间

Question

我正在 Webgl 中创建第一人称射击游戏，目前正在 Chrome 31.0.1650.57 中调试早期版本

该应用程序运行不佳，大约为 7-8 fps，当我分析 cpu 配置文件时，我得到以下信息:

从上面看，CPU 花费了 72% 的时间……什么都不做？为什么 requestAnimFrame 给我的 fps 这么低？我的着色器真的非常简单(基本上是 1 个衬垫)

我的游戏循环本质上是

function drawScene() {
    requestAnimFrame(drawScene);
    map.render(playerPosition);
}

目前的图形也非常简单。我还提供了该应用程序的屏幕截图以及 full .cpuprofile file .

谁能解释一下空闲时间可能是由什么引起的？

更新: map 存储为一堆“面”，其中每个面都是一个 gl.TRIANGLE_FAN。我不确定如何在一次调用 gl.drawElements 中绘制多个 gl.TRIANGLE_FAN(每个都有不同的“中心”元素)。

我尝试修改代码，以便将顶点上传到 GPU 一次，然后将索引上传到顶点数组中，但这会导致 gl.drawElements 绘制 1 个巨大的 gl.TRIANGLE_FAN，这是不正确的，因为所有 gl.TRIANGLE_FAN 并不共享相同的“中心”顶点。

我可以以某种方式将 gl.TRIANGLE_FAN 转换为 gl.TRIANGLES 或 gl.TRIANGLE_STRIPS 吗？

我意识到OpenGL有一个glMultiDrawElements这正是我想要的(让我们传入每个基元的大小)，但它看起来在 Webgl 中不受支持。

Answer 1

查看您的个人资料，我发现您在 bufferData 上花费了大量时间。这表明您每帧都重新上传数据，而其余一些函数名称表明您正在执行每表面 drawArrays 调用。

这两件事都不利于性能。我怀疑您丢失的时间用于 GPU-CPU 同步和数据传输，而不是 GPU 计算时间或 CPU 计算时间(最后一个是您的配置文件测量的时间)。

1. 您应该仅将几何图形上传到 GPU (bufferData) 一次，而不是每一帧(除非某些内容实际上发生变化，或者将新对象添加到 GPU 中)场景等)，以及

2. 您应该尝试尽量减少每帧的 drawArrays 调用次数(少量批处理的多个顶点，而不是大量批处理的少量顶点)。

---

您说过，限制是您的关卡数据由各个三角形扇形组成。您需要将这些三角形扇形转换为单独的三角形，并将这些三角形组合成一个缓冲区。 WebGL 中没有任何东西可以为您执行此操作，但如果您有扇形 0 1 2 3 4 ... 的顶点，其中 0 是中心顶点，那么将它们转换为三角形只是指定按顺序排列顶点(通过索引缓冲区，或通过复制顶点)

0 1 2 0 2 3 0 3 4 ...

然后您可以将许多粉丝合并到一个抽奖中。