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

Posted 2021-04-17

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

旋转的枢轴位于中心。

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

谢谢

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

答案

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

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

另一答案

我自己没试过，但我的猜测是因为你在矩形空间中使用纹理坐标，它会在旋转时引起扭曲而没有一些因素来纠正它。

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

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。