具有不同高度/宽度的旋转顶点答案

【问题标题】：Rotating vertex with different height/width具有不同高度/宽度的旋转顶点
【发布时间】：2018-04-15 15:16:49
【问题描述】：

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

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

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

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 uniform从javascript发送到着色器。

【问题讨论】：

标签： matrix rotation webgl coordinate-transformation

【解决方案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，与您问题中的代码 sn-p 相比：

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

【讨论】：