Question

我有一个带有纹理的旋转矩阵。当正交场景的宽高比为1：1时，如600px和600px，它可以完美旋转。但是，如果我将高度增加到1200，我会遇到一些问题。看起来好像矩阵的水平轴被缩放，好像它没有旋转一样。

假设我有一个600x1200的sscene，我的矩阵是30x30。如果矩阵不旋转，则x刻度应为0.05 * 600，即30px。如果我将矩阵旋转90度，则x刻度应为0.025 * 1200，即30px。但是我没有什么可以补偿这一点，并且矩阵比例始终相同，就好像它没有被旋转一样。

我该如何弥补这个？

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

void main()
{   

fragColor = vertColor;

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


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



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

}

我尝试使用Math.sin将角度接近90度和270度时减小x刻度，但它没有按预期工作。

Answer 1

通常，纵横比被编码为投影矩阵。投影矩阵是应用于顶点坐标的最后一个变换。

如果你想在顶点着色器中使用纵横比，它的工作原理如下：

方面矩阵：

float aspect = width / height;

mat4 aspect_mat = mat4(
    vec4(1.0/aspect, 0.0, 0.0, 0.0), 
    vec4(0.0,        1.0, 0.0, 0.0), 
    vec4(0.0,        0.0, 1.0, 0.0), 
    vec4(0.0,        0.0, 0.0, 1.0)); 

mat4 model_mat = 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));

mat4 worldPosTrans = aspect_mat * model_mat;

这导致：

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

当纵横比不是1：1时，如何在旋转时校正矩阵的缩放比例

1 个答案: