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

Question

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

应用程序在大约7-8 fps下运行不佳，当我cpu profile时，我得到以下内容：

从那以后看起来cpu花了72％的时间做...什么都没有？为什么requestAnimFrame给我那个低fps呢？我的着色器非常简单（基本上是1个衬垫）

我的游戏循环基本上是

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

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

任何人都可以解释一下空闲时间是由什么引起的？

更新 地图存储为一堆＆＃34;面＆＃34;，其中每个面都是gl.TRIANGLE_FAN。我不确定如何在gl.TRIANGLE_FAN的1次调用中绘制多个gl.drawElements s（每个gl.TRIANGLE_FAN个不同的＆＃34;中心＆＃34;元素。

我试图使得我上传的顶点到GPU一次，然后只需上传入索引的顶点的阵列修改代码，但是这会导致gl.drawElements绘制1个巨gl.TRIANGLE_FAN，这是不正确，因为所有gl.TRIANGLE_FAN都没有共享同一个＆＃34;中心＆＃34;顶点。

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

我知道的OpenGL具有glMultiDrawElements这不正是我湾＆＃39; T（让＆＃39; S你在每个基元的尺寸通过），但它不＆＃39;吨像它＆ Webgl支持＃39;

Answer 1

查看您的个人资料，我发现您在bufferData花了很多时间。这表明您每帧重新上传数据，其余一些函数名称建议您进行每个表面drawArrays调用。

这两件事都不利于表现。我怀疑你错过的时间是GPU-CPU同步和数据传输，而不是GPU计算时间或CPU计算时间（最后一个是你的配置文件测量）。

1. 您应该只将一次几何体上传到GPU（bufferData）而不是每一帧（除非某些内容实际上是更改，或者将新对象添加到场景中等等） 。），和

2. 你应该尽量减少每帧drawArrays个调用的次数（少数几个顶点批次，而不是很多批次的几个顶点）。

---

您已经说过，约束条件是您的关卡数据由单个三角形粉丝组成。您需要将这些三角形扇形转换为单个三角形，并将这些三角形组合成一个缓冲区。 WebGL中没有任何内容可以为您执行此操作，但如果您有扇形0 1 2 3 4 ...的顶点，其中0是中心顶点，则将它们转换为三角形只是指定顶点（通过索引缓冲区，或通过按顺序复制顶点）

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

然后你可以将很多粉丝组合成一个平局电话。