旋转顶点不同 height/width

Question

我正在尝试在 webgl 中旋转图像。如果纹理的宽度与高度相同，则没有问题，但如果宽度为 256px，高度仅为 32px，则图像会倾斜。

好像只有纹理在旋转，顶点没有。然而，通常当只有纹理在旋转时，它的角在移动到顶点之外时会被剪掉。这不会发生在这里，所以我有点困惑。

这是我的顶点着色器代码：

precision lowp float;

attribute vec3 vertPosition;
attribute vec3 vertColor;
attribute vec2 aTextureCoord;
varying vec3 fragColor;
varying lowp vec2 vTextureCoord;

varying lowp vec2 vTextureCoordBg;
uniform vec2 uvOffsetBg;
uniform vec2 uvScaleBg;

uniform mat4 uPMatrix;

uniform vec2 uvOffset;
uniform vec2 uvScale;

uniform vec3 translation;
uniform vec3 scale;
uniform float rotateZ;
uniform vec2 vertPosFixAfterRotate;

void main()
{       
    fragColor = vertColor;

    vTextureCoord = (vec4(aTextureCoord.x, aTextureCoord.y, 0, 1)).xy * uvScale + uvOffset;
    vTextureCoordBg = (vec4(aTextureCoord, 0, 1)).xy * uvScaleBg + uvOffsetBg;

    mat4 worldPosTrans = mat4(
        vec4(scale.x*cos(rotateZ),  scale.y*-sin(rotateZ),  0,              0), 
        vec4(scale.x*sin(rotateZ),  scale.y*cos(rotateZ),   0,              0), 
        vec4(0,                     0,                      scale.z,        0), 
        vec4(translation.x,         translation.y,          translation.z,  1));

    gl_Position = (uPMatrix * worldPosTrans) * vec4(vertPosition.x + vertPosFixAfterRotate.x, vertPosition.y + vertPosFixAfterRotate.y, vertPosition.z, 1.0);
}

旋转通过 rotateZ 统一从 javascript 发送到着色器。

Answer 1

您必须在旋转之前进行缩放：

比例矩阵：

mat4 sm = mat4(
    vec4(scale.x, 0.0,     0.0,     0.0), 
    vec4(0.0,     scale.y, 0.0,     0.0), 
    vec4(0.0,     0.0,     scale.z, 0.0), 
    vec4(0.0,     0.0,     0.0,     1.0));

旋转矩阵：

mat4 rm = mat4(
    vec4(cos(rotateZ), -sin(rotateZ),  0.0, 0.0), 
    vec4(sin(rotateZ), cos(rotateZ),   0.0, 0.0), 
    vec4(0.0,          0.0,            1.0, 0.0), 
    vec4(0.0,          0.0,            0.0, 1.0));

平移矩阵：

mat4 tm = mat4(
    vec4(1.0,           0.0,           0.0,           0.0), 
    vec4(0.0,           1.0,           0.0,           0.0), 
    vec4(0.0,           0.0,           0.0,           0.0), 
    vec4(translation.x, translation.y, translation.z, 1.0));

模型转换：

mat4 worldPosTrans = tm * rm * sm;

查看结果并关注 scale.x 和 scale.y，与您问题中的代码片段进行比较：

mat4 worldPosTrans = mat4(
    vec4(scale.x * cos(rotateZ), scale.x * -sin(rotateZ),  0.0,            0.0), 
    vec4(scale.y * sin(rotateZ), scale.y * cos(rotateZ),   0.0,            0.0), 
    vec4(0.0,                    0.0,                      scale.z,        0.0), 
    vec4(translation.x,          translation.y,            translation.z,  1.0));

旋转顶点不同 height/width

Rotating vertex with different height/width

rotation

matrix

webgl

coordinate-transformation