您的位置:首页 > 移动开发 > Unity3D

UV旋转动画Shader

2017-11-27 21:23 1366 查看

博客地址: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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息