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

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

顶点着色器

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