webgl 旋转四边形看起来不正确

Question

我正在 dart 中编写一些 webgl 代码，并在屏幕上渲染一些精灵。

我有一个四边形，我重复使用它来渲染所有精灵。我有一个投影、视图和模型矩阵。我使用相机的视图矩阵，我认为它是正确的，但必须在投影矩阵上进行旋转，因为旋转视图矩阵会产生不正确的结果。

我希望单独旋转四边形。我所有的尝试都导致了错误的结果。

这是没有应用任何旋转的场景

这是一个场景的 gif，随着时间的推移应用了以下代码的旋转。

旋转看起来不错，但如果我们移动到两侧，

我们可以很清楚地看到 z 轴似乎被忽略了或类似的东西。

这是我的四边形类渲染方法中的对象矩阵

objectMatrix.setIdentity();
objectMatrix.translate(pos.x - w / 2.0, pos.y - h * 1.0, pos.z * 1.0);
objectMatrix.scale(w * 1.0, h * 1.0, 0.0);
objectMatrix.rotateY(tick * PI/180); // rotate over time
gl.uniformMatrix4fv(objectMatrixLocation, false, objectMatrix.storage);

每次渲染场景时，tick 变量都会递增

顶点着色器

precision highp float;

attribute vec3 a_pos;

uniform mat4 u_projectMatrix;
uniform mat4 u_viewMatrix;
uniform mat4 u_objectMatrix;
uniform mat4 u_textureMatrix;

varying vec2 v_texcoord;
varying float v_dist;
varying vec4 v_pos;

void main() {
    v_texcoord = (u_textureMatrix * vec4(a_pos, 1.0)).xy;
    v_pos = vec4(u_projectMatrix * u_viewMatrix * vec4(a_pos, 1.0));
    vec4 pos = u_projectMatrix * u_viewMatrix * u_objectMatrix * vec4(a_pos, 1.0);
    v_dist = 1.0 - pos.z / 2.75; //for fragment shader's fade in the back stuff
    gl_Position = pos;
}

Answer 1

问题似乎是我将模型矩阵的 Z 分量缩放了 0

objectMatrix.scale(w * 1.0, h * 1.0, 0.0);