2D opengl rotation causes sprite distortion

Question

I am quite new to using OpenGL ES 2.0. Also im using an iPhone and the GLM maths library. As I reference I have been using this tutorial a lot: http://tomdalling.com/blog/modern-opengl/03-matrices-depth-buffering-animation/ But I have found it difficult to find a 2D OpenGL tutorial.

I am trying to rotate a 2D sprite but the image is being distorted. For example at a rotation angle of 0 degrees: http://i.imgur.com/yBTN2ST.png and at a rotation angle of 45 degrees: http://i.imgur.com/cY5IJcg.png

In my sprite class

glm::mat4 projection = glm::ortho(0.0f, 480.0f, 0.0f, 320.0f);
glUniformMatrix4fv(projectionUniform, 1, GL_FALSE, glm::value_ptr(projection));

glm::mat4 newModel = glm::rotate(glm::mat4(), 0.0f, glm::vec3(0, 0, 1));
glUniformMatrix4fv(modelUniform, 1, GL_FALSE, value_ptr(newModel));

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

In my vertex shader

vec4 newPosition = vec4(position + offset, 0.0, 1.0);
gl_Position = model * projection * newPosition;

I think that part of the problem is that the image is being rotated without considering the aspect ratio im not really sure how to fix this.

Thanks

Answer 1

I think you are applying your transformations in the wrong order.

Instead of:

gl_Position = model * projection * newPosition;

try:

gl_Position = projection * model * newPosition;

Better still (to avoid multiplying two 4x4 matrices together):

gl_Position = projection * ( model * newPosition );

Even better: Multiply your matrices in your application and do a single matrix-vector multiplication in your shader. You should probably also include the translation in the matrix.