Performance Webgl：低fps和约72%的空闲时间

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

该应用程序以大约7-8 fps的速度运行不佳，当我使用cpu配置文件时，我会得到以下结果：

从这一点来看，cpu花费了72%的时间做。。。没有什么为什么

requestAnimFrame

会给我那么低的fps？我的着色器非常简单（基本上是1行）

我的游戏循环本质上是

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

图形目前也非常简单。我还包括了应用程序的屏幕截图，以及

有人能解释一下空闲时间是由什么引起的吗

更新： 地图存储为一组“面”，其中每个面都是一个

gl.TRIANGLE\u FAN

。我不知道如何在一次调用

gl.drawerelements

中绘制多个

gl.TRIANGLE\u FAN

s（每个都有不同的“中心”元素）

我试图修改代码，以便将顶点上载到gpu一次，然后只将索引上载到顶点数组中，但这会导致gl.drawerElements绘制1个巨大的

gl.TRIANGLE\u FAN

，这是不正确的，因为所有

gl.TRIANGLE\u FAN

都不共享同一个“中心”顶点

我是否可以将

gl.TRIANGLE\u FAN

s转换为

gl.TRIANGLE

或

gl.TRIANGLE\u strip

---

我意识到OpenGL有一个与我不想做的完全相同的功能（让我们传入每个原语的大小），但它看起来在Webgl中不受支持。

查看您的配置文件，我注意到您在

缓冲数据方面花费了大量时间。这表明您正在每帧上传数据，而其他一些函数名表明您正在进行每曲面
drawArrays
调用

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

您应该只将几何体上载到GPU（
bufferData
）一次，而不是每帧上载一次（除非实际发生了变化，或向场景添加了新对象等），以及

您应该尽量减少每帧调用
DrawArray
的次数（多个顶点的几个批次，而不是多个顶点的多个批次）


您说过，限制条件是关卡数据由单个三角形风扇组成。您需要将这些三角形风扇转换为单个三角形，并将这些三角形合并到单个缓冲区中。WebGL中没有任何东西可以为您这样做，但是如果您有风扇的顶点
0 1 2 3 4…
，其中0是中心顶点，那么将它们转换为三角形只是按顺序指定顶点（通过索引缓冲区或复制顶点）

然后，您可以将多个粉丝合并到一个抽签通话中。
查看您的个人资料，我注意到您在
缓冲数据中花费了大量时间。这表明您正在每帧上传数据，而其他一些函数名表明您正在进行每曲面
drawArrays
调用

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

您应该只将几何体上载到GPU（
bufferData
）一次，而不是每帧上载一次（除非实际发生了变化，或向场景添加了新对象等），以及

您应该尽量减少每帧调用
DrawArray
的次数（多个顶点的几个批次，而不是多个顶点的多个批次）


您说过，限制条件是关卡数据由单个三角形风扇组成。您需要将这些三角形风扇转换为单个三角形，并将这些三角形合并到单个缓冲区中。WebGL中没有任何东西可以为您这样做，但是如果您有风扇的顶点
0 1 2 3 4…
，其中0是中心顶点，那么将它们转换为三角形只是按顺序指定顶点（通过索引缓冲区或复制顶点）

然后你可以把许多粉丝组合成一个抽签电话

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