在片段着色器中应用变换

Question

我知道我可以在顶点着色器中执行变换（旋转、缩放）。但是我想知道我是否可以在 fragment 着色器中做类似的事情。

shadertoy.com - transformation_in_fragment_shade

我试图通过乘以 uv 在片段着色器中应用变换，但对结果感到困惑。

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;
    uv = fract(uv * 2.);
    vec4 img = texture(iChannel0, uv);
    
    // Output to screen
    fragColor = img;
}

我以为图片会缩放2倍而不是缩小，我也对这里fract的意思感到困惑，为什么应用这个功能可以将图像分成4块。

所以问题是，我可以在这里的片段着色器中应用旋转或缩放吗？我应该使用不同的方法来进行旋转、缩放吗？

Answer 1

纹理坐标在 [0.0, 1.0] 范围内。 (0, 0) 是左下角，(1, 1) 是右上角。 texture 查找特定坐标处的纹理，returns 从该坐标查找颜色。如果将纹理坐标乘以 2，坐标将在 [0.0, 2.0] 范围内。 1.0到2.0的坐标不在贴图上，夹在1.0.
fract 函数跳过整数部分。例如，1.5 变为 0.5。所以uv = fract(uv * 2.)将区间[0.0,1.0]的坐标映射到2个区间[0.0,1.0],[0.0,1.0].
如果你想放大 (2x) 到中心你需要在视图中的坐标 (0.25, 0.25) 和 (0.75, 0.75) 之间投影纹理：

uv = uv / 2.0 + 0.25; // maps [0.0, 1.0] to [0.25, 0.75]

您可以对 3x3 矩阵执行相同的操作：

mat3 zoom = mat3(
    vec3(0.5, 0.0, 0.0),
    vec3(0.0, 0.5, 0.0),
    vec3(0.25, 0.25, 1.0));

uv = (zoom * vec3(uv, 1.0)).xy;

在片段着色器中应用变换

Apply transformation in a fragment shader

shader

glsl

webgl

fragment-shader