UV旋转动画Shader

博客地址:blog.liujunliang.com.cn

Shader效果图如下


写在前面

实现如上旋转效果可以将整个Texture改变Rotate进行旋转

本文通过编写Shader改变UV实现旋转效果

在编写Shader之前先补充一个图形学知识

一、矩阵乘法

·前提:只有第一个矩阵的列数(column)和第二个矩阵的行数(row)相同时才有意义

·定义


二、旋转矩阵

博主搜索了下旋转矩阵的公式

公式如下图:


其中这个x,y是纹理坐标

Shader代码

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Custom/Simple"
{
	Properties
	{
		_Color("Main Color", Color) = (1,1,1,1)
		_MainTex("Main Texture", 2D) = "white" {}
		_RotateSpeed("Rotate Speed", Range(1, 100)) = 20
	}
	
	SubShader
	{
		tags{"Queue" = "Transparent" "RenderType" = "Transparent" "IgnoreProjector" = "True"}
		Blend SrcAlpha OneMinusSrcAlpha
		
		Pass
		{
			Name "Simple"
			Cull off
			
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"
			
			float4 _Color;
			sampler2D _MainTex;
			float _RotateSpeed;
			
			struct v2f
			{
				float4 pos:POSITION;
				float4 uv:TEXCOORD0;
			};
			
			v2f vert(appdata_base v)
			{
				v2f o;
				//将物体坐标转化为剪裁坐标(顶点坐标转换:物体坐标->世界坐标->观察坐标->剪裁左边)
				o.pos = UnityObjectToClipPos(v.vertex);
				o.uv = v.texcoord;
				return o;
			}
			
			half4 frag(v2f i):COLOR
			{
				//以纹理中心为旋转中心
				float2 uv = i.uv.xy - float2(0.5, 0.5);

				//旋转矩阵公式
				uv = float2(uv.x * cos(_RotateSpeed * _Time.x) - uv.y * sin(_RotateSpeed * _Time.x),
							uv.x * sin(_RotateSpeed * _Time.x) + uv.y * cos(_RotateSpeed * _Time.x));
				
				//恢复纹理位置
				uv += float2(0.5, 0.5);
				
				half4 c = tex2D(_MainTex , uv) * _Color;
				return c;
			}
			
			ENDCG
		}
	}
}

最终效果会发现周围出现其他纹理

这时将Wrap Model切换为Clamp模式


问题解决,效果如文章开头显示!!

博客地址:blog.liujunliang.com.cn

猜你喜欢

转载自blog.csdn.net/qq_33747722/article/details/78648976