Question

I am having some performance problems with OpenGL. I essentially want to create a grid of squares. I first tried to implement it where each square I would translate to where I want a square, then multiply the model and view matrix, pass it into the shader program and draw the square. I would do this for each square. After creating about 50 squares the frame rate would start to drop to less than what I desire.

I then tried a VBO method where I basically would generate a vertex buffer each time the squares change location. Frame rate increased dramatically with this approach, but I have too much latency when something changes because it has to regenerate all the vertex locations.

What I think I need is a matrix stack… I used opengl 1.1 before and would use push/pop. I don’t really understand the concepts of what that was doing though and how to reproduce it. Does anyone know where a good example of a matrix stack is that I can use as an example? Or possibly just a good explanation for one?

Answer 1

You can check this tutorial, is basically doing the same you want to achieve, but with cubes instead of squares. It uses a VBO as well:

http://www.learnopengles.com/android-lesson-seven-an-introduction-to-vertex-buffer-objects-vbos/

About the matrices, in OpenGL ES 2.0 you don’t have any matrix related functions anymore, but you can use the glmath library, which does the same (and much more):

http://glm.g-truc.net/

It’s a header library, so you just need to copy it somewhere and include it where you need it.

I’m not sure if I completely understand your objective, but I guess you could copy the data of one square in the grapic card (using a VBO) and then repeatedly update the model matrix for every square.

The concept of a matrix stack makes sense if your squares have some kind of hierarchy between them (for instance, if one of them moves, the one to its left has to move accordingly).

You can imagine it as a skeleton made out of squares. If the shoulder moves, all the pieces in the arm will move as well (hands, fingers, and so on).
You can emulate that by using a matrix stack. You can create some kind of tree with all your squares, so that every square has a list of “descendants”, which will apply the same transformation as the parent. then you can render recursively all the squares like that:

1. Apply transform to the root square(s)
2. Push the transform in a queue
3. Call the same render function for every child
4. Every child reads the matrix on the top of the queue, multiplies
   it by its own transformation, push the new matrix on the queue and
   calls the children
5. After that every child pops out the matrix they pushed before

Using the glmath is quite easy, you just need to create a queue (std:vector in this case) of matrices:

std::vector<glm::mat4> matrixStack;

And then for every child:

glm::mat4 modelMatrix = matrixStack.back();
glm::mat4 nodeTransform = /*apply your transform here*/
glm::mat4 new = modelMatrix * nodeTransform;
matrixStack.push_back(new);
/*Pass in the new matrix to the shader and call to glDrawArrays or whatever to render your square*/

for (every child) {
    render();
}
matrixStack.pop_back();

For the drawing part, I guess you could bind the vertex array with the square vertices, and then update the model matrix in the shader for every child, before calling glDrawArrays.