在GLSL ES中的片段着色器上旋转纹理

Question

我正在尝试在片段着色器中旋转纹理,而不是使用顶点着色器和矩阵变换.

旋转的枢轴位于中心.

当在具有方形形状的四边形中渲染时,该算法工作正常,但是当四边形具有矩形形状时,渲染结果变得混乱.有谁能发现问题？

谢谢

    varying vec2 v_texcoord;
    uniform sampler2D u_texture;
    uniform float u_angle;

    void main()
    {
        vec2 coord = v_texcoord;
        float sin_factor = sin(u_angle);
        float cos_factor = cos(u_angle);
        coord = (coord - 0.5) * mat2(cos_factor, sin_factor, -sin_factor, cos_factor);
        coord += 0.5;

        gl_FragColor = texture2D(u_texture, coord);
    }

Answer 1

问题中提供的以下代码行：

coord = vec2(coord.x - (0.5 * Resolution.x / Resolution.y), coord.y - 0.5) * mat2(cos_factor, sin_factor, -sin_factor, cos_factor);

不太对。有一些括号错误。

正确的版本是：

coord = vec2((coord.x - 0.5) * (Resolution.x / Resolution.y), coord.y - 0.5) * mat2(cos_factor, sin_factor, -sin_factor, cos_factor);

Answer 2

我自己还没有尝试过，但我的猜测是，由于您在矩形空间中使用纹理坐标，因此在没有某种因素来纠正它的情况下，它将导致旋转时变形。

您需要向其传递一个声明纹理宽度和高度的制服。这样，您可以应用纵横比来校正失真。

coord = (coord - 0.5) * mat2(cos_factor, sin_factor, -sin_factor, cos_factor);

可能会变成这样：

coord = vec2(coord.x - (0.5 * Resolution.x / Resolution.y), coord.y - 0.5) * mat2(cos_factor, sin_factor, -sin_factor, cos_factor);

就像我说的，我还没有尝试过，但我过去不得不为类似的着色器这样做。可能需要反转Resolution.x/Resolution.y。