I'm creating a first person shooter in Webgl and currently debugging an early version in Chrome 31.0.1650.57
The application is running poorly at about 7-8 fps, and when I cpu profile I get the following:
And from that it looks like the cpu is spending 72% time doing... nothing? How come requestAnimFrame
is giving me that low fps then? My shaders are really really simple (basically 1 liners)
My game loop is essentially
function drawScene() {
requestAnimFrame(drawScene);
map.render(playerPosition);
}
The graphics are also currently very simple. I've included a screenshot of the application as well, along with the full .cpuprofile file.
Can anyone explain what the idle time could be caused by?
UPDATE:
The map is stored as a bunch of "faces", where each face is a gl.TRIANGLE_FAN
. I'm not sure how I can draw multiple gl.TRIANGLE_FAN
s (each with a different "center" element) in 1 call to gl.drawElements
.
I tried to modify the code so that I upload the vertices to the gpu once, and then just upload indices into the array of vertices, but this causes the gl.drawElements to draw 1 giant gl.TRIANGLE_FAN
, which is not correct since all the gl.TRIANGLE_FAN
s don't share the same "center" vertex.
Can I somehow convert the gl.TRIANGLE_FAN
s into gl.TRIANGLES
or gl.TRIANGLE_STRIPS
?
I realise that OpenGL has a glMultiDrawElements which does exactly what I wan't (Let's you pass in the size of each primitive), but it doesn't look like it's supported in Webgl.