旋转时形状会被拉伸答案

【问题标题】：Shapes become stretched when rotated旋转时形状会被拉伸
【发布时间】：2014-12-26 23:34:04
【问题描述】：

我正在编写一个游戏引擎，它使用 box2d 来处理碰撞，然后使用矩阵和着色器将所有形状渲染到屏幕上。一切都很好，直到形状被旋转，此时它被拉伸。这意味着屏幕上的图形与 box2d 世界所处的状态不一致。

这是一个没有旋转方块的场景的屏幕截图，旁边是一个具有相同方块的旋转方块。

我不确定是什么导致了这些问题。我这样设置 gluPerspective：

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glMatrixMode(GL_MODELVIEW);

    float ratio = (float)WIDTH / (float)HEIGHT;
    gluPerspective(45, ratio, -1, 1);

我像这样将变换矩阵输入到着色器中：

float xTranslated = (e->body->GetPosition().x * 100 / SCREEN_WIDTH);
float yTranslated = (e->body->GetPosition().y * 100 / SCREEN_HEIGHT);
float rotated = e->body->GetAngle();

glm::mat4 transform;
transform = glm::translate(transform, glm::vec3(xTranslated, yTranslated, 0.0f));
transform = glm::rotate(transform, rotated, glm::vec3(0.0f, 0.0f, 1.0f));
transform = glm::scale(transform, glm::vec3(1.0f, 1.0f, 1.0f));

GLint transformLoc = glGetUniformLocation(shaderProgram, "trans");
glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(transform));

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

我初始化了我的形状顶点如下：

GLfloat * verts = vertices;
GLfloat floatArray[20] = {
    -0.5f * w, 0.5f* h, 1.0f, 0.0f, 1.0f, 
    0.5f * w, 0.5f* h, 1.0f, 0.0f, 1.0f, 
    0.5f * w, -0.5f* h, 1.0f, 0.0f, 1.0f, 
    -0.5f* w, -0.5f* h, 1.0f, 0.0f, 1.0f 
};
for (GLfloat f : floatArray){
    *verts++ = f;
}

这样的顶点着色器：

#version 150

in vec2 position;
in vec3 color;

out vec3 Color;

uniform mat4 trans;

void main() {
    Color = color;
    gl_Position = trans * vec4(position, 0.0, 1.0);
}

谁能发现可能导致这个问题的东西？

【问题讨论】：

你有方形像素吗？
我不知道你的着色器是什么样的。但似乎您正在为投影矩阵使用已弃用的矩阵堆栈，但使用一些统一矩阵进行变换。你不应该混合这些东西。但请发布着色器代码，以便有机会弄清楚发生了什么。
@derhass 抱歉忘记了。使用着色器代码编辑。
@user3162904：好吧。该着色器不使用您在已弃用的矩阵堆栈中设置的矩阵，您的 gluPerspective() 调用无效，并且您根本不纠正纵横比。奇怪的是，在未旋转的情况下，您的框显示为正方形。您是否在某些代码路径中使用不同的着色器/根本不使用着色器？
@user3162904：让我考虑其他/没有着色器的原因是您的形状在未旋转的情况下显示为正方形。我假设您在对象空间中将它们绘制为正方形。但情况可能并非如此。您使用的w 和h 参数的值是多少？

标签： c++ opengl 2d shader box2d

【解决方案1】：

我通过做一些事情设法解决了我的问题。

首先，我创建了一个投影矩阵，并将其与我的变换矩阵相乘：

glm::mat4 transform, projection, mvp;
transform = glm::translate(transform, glm::vec3(xTranslated, yTranslated, 0.0f));
transform = glm::rotate(transform, rotated, glm::vec3(0.0f, 0.0f, 1.0f));
transform = glm::scale(transform, glm::vec3(1.0f, 1.0f, 1.0f));

projection = glm::ortho(-ASPECT_RATIO, ASPECT_RATIO, -1.0f, 1.0f, -1.0f, 1.0f);

mvp = projection * transform ;

然后我将这个 mvp 矩阵传递给我的着色器。

我还将所有顶点的 x 坐标乘以屏幕的纵横比：

float xTranslated = (e->body->GetPosition().x * 100 / SCREEN_WIDTH) * ASPECT_RATIO;

当我创建顶点缓冲区时也这样做：

GLfloat floatArray[20] = {
    -0.5f * w * ASPECT_RATIO, 0.5f *h, 1.0f, 0.0f, 1.0f, // Top-left
    0.5f *w* ASPECT_RATIO, 0.5f *h, 1.0f, 0.0f, 1.0f, // Top-right
    0.5f *w* ASPECT_RATIO, -0.5f *h, 1.0f, 0.0f, 1.0f, // Bottom-right
    -0.5f *w* ASPECT_RATIO, -0.5f *h, 1.0f, 0.0f, 1.0f  // Bottom-left
};

还有多田：

【讨论】：