UV旋转运用的场景也比较广泛,在移动端尽量优化到能用shader处理的动画都会优先考虑shader ,而不是直接用动画控制器,粒子中运用动画控制器,实际在移动端,都采用的是UV变换坐标实现比如特效刀光,,旋转特效等等,老规矩,先看效果。
贴图资源素材:
核心实现方法:
fixed time = _Time.y;
fixed2 uvCenter = fixed2(_xCenter,_yCenter);
// 计算旋转矩阵
fixed rotateCos = cos(_speed*time);
fixed rotateSin = sin(_speed*time);
float2x2 rotate = float2x2(rotateCos,-rotateSin,rotateSin,rotateCos);
// 移动纹理位置,将旋转中心到(0,0)乘以旋转矩阵,再移回原来的位置
fixed2 uvNew = mul(i.uv-uvCenter,rotate)+uvCenter;
大家可以看看缩放如何实现呢?
float2x2 rotate = float2x2(rotateCos,rotateCos,-rotateCos,rotateCos);
最终源码:
Shader "Unlit/UV_RotationCenterCutOut"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
//沿中心点旋转
_xCenter("xCenter",float)=0.5
_yCenter("yCenter",float)=0.5
_speed("speed",float)=1 //播放速度
}
SubShader
{
Tags {
"RenderType"="Opaque"
}
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_fog
#include "UnityCG.cginc"
//顶点输入结构体 Input
struct a2v
{
half4 vertex : POSITION;
fixed2 uv : TEXCOORD0;
};
//顶点转片元输出结构体 output
struct v2f
{
fixed2 uv : TEXCOORD0;
UNITY_FOG_COORDS(1)
half4 vertex : SV_POSITION;
};
//顶点着色器;
v2f vert (a2v v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
sampler2D _MainTex;
fixed _xCenter;
fixed _yCenter;
fixed _speed ;
//片元着色器 返回为低精度(fixed4类型)
fixed4 frag (v2f i) : SV_Target
{
fixed time = _Time.y;
fixed2 uvCenter = fixed2(_xCenter,_yCenter);
// 计算旋转矩阵
fixed rotateCos = cos(_speed*time);
fixed rotateSin = sin(_speed*time);
float2x2 rotate = float2x2(rotateCos,-rotateSin,rotateSin,rotateCos);
/* 顺便扩展下缩放动画,看看有什么区别呢?
float2x2 rotate = float2x2(rotateCos,rotateCos,-rotateCos,rotateCos);
*/
// 移动纹理位置,将旋转中心到(0,0)乘以旋转矩阵,再移回原来的位置
fixed2 uvNew = mul(i.uv-uvCenter,rotate)+uvCenter;
fixed4 col = tex2D(_MainTex, uvNew);
UNITY_APPLY_FOG(i.fogCoord, col)
clip(col.a-0.5);
return col;
}
ENDCG
}
}
}
扩展下:特效几乎都是透明软裁剪,如何在这个代码基础上实现软裁剪呢?
核心实现如下:
1:修改选产层级,
Tags {
"IgnoreProjector"="True"
"Queue"="Transparent"
"RenderType"="Transparent"
}
二:在pass里面添加混合模式,关掉深度检测
Blend SrcAlpha OneMinusSrcAlpha
ZWrite Off
源码奉上:
Shader "Unlit/UV_RotationCenterTransparent"
{
Properties
{
_MainTex ("Texture", 2D) = "white" {}
//沿中心点旋转
_xCenter("xCenter",float)=0.5
_yCenter("yCenter",float)=0.5
_speed("speed",float)=1 //播放速度
}
SubShader
{
Tags {
"IgnoreProjector"="True"
"Queue"="Transparent"
"RenderType"="Transparent"
}
Pass
{
Blend SrcAlpha OneMinusSrcAlpha
ZWrite Off
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_fog
#include "UnityCG.cginc"
//顶点输入结构体 Input
struct a2v
{
half4 vertex : POSITION;
fixed2 uv : TEXCOORD0;
};
//顶点转片元输出结构体 output
struct v2f
{
fixed2 uv : TEXCOORD0;
UNITY_FOG_COORDS(1)
half4 vertex : SV_POSITION;
};
//顶点着色器;
v2f vert (a2v v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = v.uv;
return o;
}
sampler2D _MainTex;
fixed _xCenter;
fixed _yCenter;
fixed _speed ;
//片元着色器 返回为低精度(fixed4类型)
fixed4 frag (v2f i) : SV_Target
{
fixed time = _Time.y;
//fixed speed = 1.0;
fixed2 uvCenter = fixed2(_xCenter,_yCenter);
// 计算旋转矩阵
fixed rotateCos = cos(_speed*time);
fixed rotateSin = sin(_speed*time);
float2x2 rotate = float2x2(rotateCos,-rotateSin,rotateSin,rotateCos);
/* 顺便扩展下缩放动画,看看有什么区别呢?
float2x2 rotate = float2x2(rotateCos,rotateCos,-rotateCos,rotateCos);
*/
// 移动纹理位置,将旋转中心到(0,0)乘以旋转矩阵,再移回原来的位置
fixed2 uvNew = mul(i.uv-uvCenter,rotate)+uvCenter;
fixed4 col = tex2D(_MainTex, uvNew);
UNITY_APPLY_FOG(i.fogCoord, col)
return col;
}
ENDCG
}
}
}