一、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);
其中_uv_left和_uv_right的图片为上图
相加以后在叠加Y方向本来的值就得到了想要的效果,假如你有一张半边蝴蝶翅膀,可以复制出来一个完整的蝴蝶
八、UV棋盘格
待续
九、UV旋转矩阵
待续