UnityShaderUV动画讲解五:UV旋转

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
        }
    }
}

  • 14
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值