Shader踩坑笔记UV操作_shader uv-CSDN博客

本文链接：https://blog.csdn.net/u012863565/article/details/128682893

本文详细介绍了UV坐标的使用，包括其0-1范围和-0.5~0.5范围的设定，以及如何通过加减、乘除实现UV的移动和缩放。此外，还讨论了UV的旋转、复制和取反操作，特别提到了自定义旋转函数和利用step函数进行高效的计算。文章还提及了UV在图形处理中的应用，如创建棋盘格效果和使用旋转矩阵等未展开的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、UV坐标范围0-1

// 坐标范围 0-1，原点在画布左下角
vec2 uv = FRAGCOORD.xy / iResolution.xy;

有两个变量

1、FRAGCOORD是godot引擎自带的变量表示纹理坐标

2、iResolution我自定义的变量，输入画布尺寸

使用uniform关键词可以创建自定义变量

比如uniform vec3 iResolution;

二、UV坐标范围-0.5~0.5

//坐标范围-0.5,0.5，原点在画布中心
vec2 uv = (FRAGCOORD.xy - 0.5 * iResolution.xy) / iResolution.y;

当然也可以使用如下代码：

vec2 uv = FRAGCOORD.xy / iResolution.xy - 0.5;

因为0~1减去0.5就是-0.5~0.5

三、UV移动

通过加减运算可以移动UV

uv = uv + vec2(1.0, 0.0);

//或者单独对x进行移动
uv.x = uv.x + 1.0;

这样图像也会跟着移动

四、UV缩放

通过乘除运算可以缩放UV

uv = uv * vec2(1.0, 0.0);
uv = uv / vec2(1.0, 0.0);

//或者单独对x进行缩放
uv.x = uv.x * 1.0;
uv.x = uv.x / 1.0;

五、UV旋转

vec2 customRotator(vec2 UVs,vec2 RotationCenter,float RotationAngle){
    //自定义旋转
    //RotationAngle为旋转输入0-1个值。值为1等于360度转弯。
    //RotationCenter输入一个数字作为旋转中心点。
    //UVs插入uv，世界坐标或其他值来旋转。
    vec2 _uv = UVs + RotationCenter * -1.0;
    float angle_cos = cos(RotationAngle);
    float angle_sin = sin(RotationAngle);
    vec2 _a = vec2(angle_cos, angle_sin * -1.0);
    vec2 _b = vec2(angle_sin, angle_cos);

    return vec2(dot(_uv, _a), dot(_uv, _b)) + RotationCenter;
}

这个函数我参考UE4引擎的算法，可以对UV进行旋转

六、UV复制

原理：

0~1的UV乘以一个数n，变成0~n

然后向下取整，所以得到了多个整数，比如2

那么2~3的部分减去2就变成了0~1，所以就还原了之前的uv

uv.x *= 2.;
vec2 id = floor(uv);
vec2 uv2 = uv - id;

七、UV复制并取反

这里只是x方向操作，y方向不动。

原理：

保存y方向的值，只对x方向进行操作最后需要加上y方向。

上面六介绍了uv复制的原理

使用step函数替代if操作可以更好发挥GPU的计算优势

用1减的方法反转结果

// 坐标范围 0-1，原点在画布左下角
vec2 uv = FRAGCOORD.xy / iResolution.xy;
//不管后续如何计算Y方向是不变的
float y = uv.y;

//UV复制方法针对X方向进行复制得到uv2
uv.x *= 2.;
vec2 id = floor(uv);
vec2 uv2 = uv - id;
    
//创建左右两边uv，得到遮罩
vec2 _uv_left = step(uv,vec2(1.0,0.0));
vec2 _uv_right = _uv_left;
_uv_right.x = 1.-_uv_right.x;
    
//乘以遮罩会剔除不需要的部分
_uv_left = uv2 * _uv_left;
    
//反转uv的X方向
uv2.x = 1.- uv2.x;
_uv_right = uv2 * _uv_right;
    
//最后对两个uv进行合并
uv = _uv_left + _uv_right;
uv.y = y;
uv.x = 1. - uv.x;
uv.x = uv.x + offset;//offset为自定义变量控制位置

//确保图片不会有多余无用的像素
if (any(greaterThan(abs(uv - 0.5), vec2(0.5)))) discard;
//COLOR = texture(TEXTURE, uv);
COLOR = vec4(uv, 0.0, 1.0);