I have recently been trying to develop a more basic one of those 'falling sand'/'powder game' style games (See here) the past few months, and after prototyping on a plain canvas, then trying PIXI.js, I decided to try and roll my own WebGL based solution so I could control the whole pipeline.
Currently I am just iterating over a 2D array representing the pixels of the canvas (500x500) then calling glDrawElements to draw a pixel sized quad at a specified location. Obviously things get pretty heavy pretty quickly in a game like this, and the frame rate drops to unusable very quickly.
I can't find examples online of drawing batches of quads in different locations with one DrawElements call in OpenGLES/WebGl, as there is no instancing support, but people seem to mention having done it. Can anyone give any pointers?
Here is my extremely simple vertex shader:
attribute vec2 position;
uniform mat3 modelViewProjectionMatrix;
void main() {
gl_Position = vec4(modelViewProjectionMatrix * vec3(position, 1.0), 1.0);
}
And here is my relevant rendering code Javascript side:
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;
}
}
}
Any other relevant code is here.
Thanks