2D opengl 旋转导致精灵扭曲

Question

我对使用 OpenGL ES 2.0 还是很陌生。我也在使用 iPhone 和 GLM 数学库。正如我所引用的，我一直在使用本教程：http://tomdalling.com/blog/modern-opengl/03-matrices-depth-buffering-animation/ 但我发现很难找到 2D OpenGL 教程。

我正在尝试旋转 2D 精灵，但图像被扭曲了。 例如，旋转角度为 0 度：http://i.imgur.com/yBTN2ST.png，旋转角度为 45 度：http://i.imgur.com/cY5IJcg.png

在我的精灵类中

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);

在我的顶点着色器中

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

我认为部分问题在于图像在没有考虑纵横比的情况下被旋转，我不确定如何解决这个问题。

谢谢

Answer 1

我认为您以错误的顺序应用转换。

代替：

gl_Position = model * projection * newPosition;

尝试：

gl_Position = projection * model * newPosition;

更好（避免将两个 4x4 矩阵相乘）：

gl_Position = projection * ( model * newPosition );

更好：在应用程序中乘以矩阵，并在着色器中执行单个矩阵向量乘法。您可能还应该在矩阵中包含翻译。