OpenGL ES2.0 2D Review Matrices

Question

Migrating from OpenGL ES1.1 to 2.0 for 2D purposes (spelling), and I find it a bit difficult to figure out how to apply the transforms (matrix multiplication order). I only need rotation on the Z axis and scaling on X and Y, which is always the same value, so this should greatly simplify the situation. My current method (ES1.1), which works great, has a virtual camera located in the same absolute coordinate space as the objects.

At the beginning of each frame, I first do the camera transforms, causing

glRotatef(angle, 0.0f, 0.0f, 1.0f); glScalef(zoom, zoom, 0.0f); glTranslatef(-pos.x, -pos.y, 0.0f); // negative position to shift everything back to the center of the view 

For objects, it looks like this (excluding texture and drawing calls).

  glPushMatrix(); // to preserve camera transform glTranslatef(pos.x, pos.y, 0.0f); glScalef(scale, scale, 0.0f); glRotatef(angle, 0.0f, 0.0f, 1.0f); // drawing done here glPopMatrix(); 

I am trying to get the same functionality in ES2.0, but all matrix operations must be done manually.

From this link, I found that the correct multiplication order should be ((scaling * rotation) * Translation)

After that, I came up with a single matrix formula that combines all these functions, since 2D is much simpler. I also included a spelling projection matrix. For the test shader, I have the following:

  attribute vec4 position; attribute vec4 color; varying vec4 colorVarying; uniform vec2 translate; uniform float rotate; uniform float scale; uniform vec4 camera; // x, y, z = angle, w = zoom void main() { const float w = 3.2; const float h = 4.8; mat4 projection = mat4(1.0/w, 0.0, 0.0, 0.0, 0.0, 1.0/h, 0.0, 0.0, 0.0, 0.0, -1.0, 0.0, 0.0, 0.0, 0.0, 1.0); float s1 = scale * sin(rotate); float s2 = scale * cos(rotate); mat4 m = mat4(s2, s1, 0.0, 0.0, -s1, s2, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, translate.x, translate.y, 0.0, 1.0); gl_Position = projection * m * position; colorVarying = color; } 

Which works the same as intended for each degree of freedom. However, I cannot figure out how to turn on the camera. The order of matrix multiplication in the shader does not match the order of gl calls, so I'm not sure how to convert my camera calls to multiplication. At first, I also tried to calculate a separate transformation matrix for the camera and set the end position as follows:

  gl_Position = projection * cam * m * position; 

I do not think this is correct, regardless of the order of the camera matrix itself (I tried several methods, no one worked correctly). I believe that all transformations of the image of the camera and the object should be compiled into a single matrix for viewing the model (each matrix is ​​multiplied by the last, starting with the camera transforms, then the object, but, obviously, in a certain order). This order of operations is what I am confused about, especially since it does not match what works correctly in ES1.1.

Can someone explain the correct order and why are the gl calls different from the actual multiplication?

Answer 1

If this works for you in OpenGLES 1.1

 glRotatef(angle, 0.0f, 0.0f, 1.0f); //camera glScalef(zoom, zoom, 0.0f); //camera glTranslatef(-pos.x, -pos.y, 0.0f); //camera glTranslatef(pos.x, pos.y, 0.0f); //model glScalef(scale, scale, 0.0f); //model glRotatef(angle, 0.0f, 0.0f, 1.0f); //model 

Then the equivalent operation in OpenGLES 2.0 will be (all in one order):

 modelViewMatrix = camRotate * camScale * camTranslate * objTranslate * objScale * objRotate; 

To add a projection matrix to it, simply add it to the left:

 mvpMatrix = proj * modelViewMatrix; 

To convert a vertex, multiply it on the right:

 transformed = mvpMatrix * in_vert; 

Answer 2

After glPushMatrix, glTranslatef, glScalef, glRotatef, glPopMatrix you get a matrix that you pushed onto the stack. So he does nothing.

But in any case, if you need a matrix that will rewrite xforms executed in this order ( glTranslatef, glScalef, glRotatef ), you need to multiply in the same order (translation * scale) * rotation