在片段着色器中无失真地使用OpenGL ES旋转纹理 [英] OpenGL ES - Rotating texture in fragment shader without distortion

问题描述

我正在使用Android的GPUImage库来对位图应用一些效果。本质上，GPUImage接受位图并使用OpenGL ES，将1x1立方体渲染到位图大小的帧缓冲区中。用户可以编写自定义片段着色器来控制输出。

我正在尝试编写一个片段着色器，它在给定旋转角度的情况下旋转位图。以下是我到目前为止的情况：

varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
uniform vec2 inputImageTextureSize;
uniform float angle;

const vec2 HALF = vec2(0.5);

void main()
{
    float aSin = sin(angle);
    float aCos = cos(angle);

    vec2 tc = textureCoordinate;
    tc -= HALF.xy;
    tc *= mat2(aCos, aSin, -aSin, aCos);
    tc += HALF.xy;

    vec3 tex = texture2D(inputImageTexture, tc).rgb;
    gl_FragColor = vec4(tex, 1.0);
}

它可以工作，但会明显扭曲位图(因为GPUImage视口设置为将1 x 1立方体映射到实际位图大小)。我想不出怎样才能消除歪曲。我应该根据角度和inputImageTextureSize应用一些额外的缩放转换，但是我无法获得正确的等式。StackOverflow上的所有答案都不适用于我的情况。请帮帮忙！

谢谢！

推荐答案

您必须考虑视口(窗口)的纵横比。
如果窗口与图像具有相同的纵横比，则可以根据图像的大小计算纵横比：

float aspect = inputImageTextureSize.x / inputImageTextureSize.y;

旋转前纹理坐标的u分量按长宽比缩放(* aspect)，旋转后按倒数长宽比缩放(* 1.0/aspect)：

tc -= HALF.xy;
tc.x *= aspect;
tc *= mat2(aCos, aSin, -aSin, aCos);
tc.x *= 1.0/aspect;
tc += HALF.xy;

---

要阐明行为，同样可以用矩阵运算来表示：

float aSin = sin(angle);
float aCos = cos(angle);

float aspect = u_resolution.x / u_resolution.y;

mat2 rotMat      = mat2(aCos, -aSin, aSin, aCos);
mat2 scaleMat    = mat2(aspect, 0.0, 0.0, 1.0);
mat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);

tc -= HALF.xy;
tc = scaleMatInv * rotMat * scaleMat * tc;
tc += HALF.xy;

这篇关于在片段着色器中无失真地使用OpenGL ES旋转纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！