Question

我在WebGL中使用片段着色器中的纹理时遇到问题。该纹理在x和y两个方向上被夹紧到片段坐标（0到1）。我想在这个纹理上应用一个转换。使用缩放从屏幕中心旋转并在[-1,1]中进行平移。

着色器类似于：gl_FragColor = texture2D( texture, transform );

转换是vec2。我有浮动的弧度角。我有x和y的比例因子最后，我有一个翻译矢量。

当我测试它时，纹理会向所有方向传递但从未以正确的方式传递。你能给我一个最好的矩阵来逐步解释我吗？

我已经在 Kick.js

进行了测试

这是使用的顶点着色器：

attribute vec3 vertex;
void main(void) {
    gl_Position = vec4(vertex.xy, 0.0, 1.0);
}

片段着色器：

precision highp float;

uniform vec2 resolution;

uniform float angleInDegrees;
uniform vec2 scale;
uniform vec2 translate;

uniform sampler2D texture;

void main(void)
{
    vec3 coordinates;
         coordinates.x = gl_FragCoord.x / resolution.x;
         coordinates.y = gl_FragCoord.y / resolution.y;
         coordinates.z = 1.0;

    float angle = radians( angleInDegrees );

    mat3 transform; 
         transform = mat3(   scale.x * cos( angle ), scale.x * sin( angle ), 0.0,
                           - scale.y * sin( angle ), scale.y * cos( angle ), 0.0,

                          - 0.5 * scale.x * cos( angle ) + 0.5 * scale.y * sin( angle ) - 0.5 * translate.x + 0.5,  - 0.5 * scale.x * sin( angle ) - 0.5 * scale.y * cos( angle ) - 0.5 * translate.y + 0.5, 1.0);

    gl_FragColor = texture2D( texture, (  transform * coordinates ).xy );
}

问题是当我旋转它没有从纹理的中心旋转时，当我缩放纹理的位置时看起来不正确！希望有人可以提供帮助

WebGL GLSL着色器纹理变换2d

0 个答案: