如何有效地在WebGL中绘制许多相同的四边形?

最近我试图在过去的几个月里开发一个更为基本的“落砂”/“粉末游戏”风格的游戏( 见这里 ),然后在一个简单的canvas上进行原型devise,然后尝试使用PIXI.js,我决定尝试和推出我自己的基于WebGL的解决scheme,以便我可以控制整个管道。

目前,我只是遍历代表canvas(500×500)的像素的二维数组,然后调用glDrawElements在指定位置绘制像素大小的四元组。 很明显,在这样的游戏中,事情变得非常快,帧速率很快就会降低到不可用状态。

在OpenGLES / WebGl中,我无法在一个DrawTelements调用中find在不同位置绘制四边形批处理的示例,因为没有实例支持,但是人们似乎已经提到了它。 任何人都可以提供任何指针?

这是我非常简单的顶点着色器:

attribute vec2 position; uniform mat3 modelViewProjectionMatrix; void main() { gl_Position = vec4(modelViewProjectionMatrix * vec3(position, 1.0), 1.0); } 

这里是我的相关呈现代码JavaScript方面:

 this.setSandBuffers(); material = this.materials.sand; this.gl.vertexAttribPointer(this.positionAttribute, 2, this.gl.FLOAT, false, 0, 0); this.gl.uniform4fv(this.uColor, material.uColor); for (var x = 0; x < this.grid.length; x++) { for (var y = 0; y < this.grid[x].length; y++) { var cell = this.grid[x][y]; switch(cell) { case 0: break; case 1: this.mvTranslate(x, y); mvpMatrix = matrixMultiply(this.modelViewMatrix, this.projectionMatrix); this.gl.uniformMatrix3fv(this.uModelViewProjectionMatrix, false, mvpMatrix); this.gl.drawElements(this.gl.TRIANGLE_STRIP, 4, this.gl.UNSIGNED_SHORT, 0); break; default: break; } } } 

任何其他相关的代码在这里 。

谢谢

每个四方的个别平局并不是一个好主意。

尝试把所有的四边形放入一个Float32Array,并发出一个绘制调用。 就像这样,假设顶点数据只包含2D位置:

 var vertices = new Float32Array(500 * 500 * 2 * 6); var count = 0; for (var x = 0; x < this.grid.length; x++) { for (var y = 0; y < this.grid[x].length; y++) { var cell = this.grid[x][y]; switch(cell) { case 1: var offset = count * 2 * 6; vertices[offset + 0] = x; vertices[offset + 1] = y; vertices[offset + 2] = x + 1; vertices[offset + 3] = y; vertices[offset + 4] = x; vertices[offset + 5] = y + 1; vertices[offset + 6] = x; vertices[offset + 7] = y + 1; vertices[offset + 8] = x + 1; vertices[offset + 9] = y; vertices[offset + 10] = x + 1; vertices[offset + 11] = y + 1; count++; break; default: break; } } } gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 16, 0); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); gl.drawArrays(gl.TRIANGLES, 0, count * 6);