Unity Shader 之 实现图片 局部动态 运动的简单效果

Unity Shader 之 实现图片局部动态运动的简单效果

 

目录

Unity Shader 之 实现图片局部动态运动的简单效果

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、实现步骤

六、关键代码

---

 

一、简单介绍

Shader Language的发展方向是设计出在便携性方面可以和C++、Java等相比的高级语言，“赋予程序员灵活而方便的编程方式”，并“尽可能的控制渲染过程”同时“利用图形硬件的并行性，提高算法效率”。

本文介绍，使用Shader，通过简单遮罩和扰动图，实现简单的局部动态效果。

 

二、实现原理

1、局部遮罩图

2、扰动图，时间上实时修改 UV 实现动态效果

 

三、注意事项

1、扰动图记得 Wrap Mode 设置为 Repeat，不然运动一会可能就不动了

2、遮罩周边可以羽化过渡一下

3、局部动态实现的方法很多，方法不唯一

 

四、效果预览

 

五、实现步骤

1、打开Unity，新建一个工程

 

2、在工程中，新建一个Shader，并新建对应材质，导入图片

 

3、编写shader，编译正确，给材质赋值上对应贴图

 

4、在场景中添加一个 Quad，并把材质给他

 

5、运行场景，效果如上

 

六、关键代码

Shader "Unlit/ShaderLocalDynamicEffect"
{
    Properties
	{
		_MainTex ("Main Texture", 2D) = "white" {}
		
		//局部动态遮罩
		_MaskTex ("Mask2 Texture", 2D) = "white" {}

		//动态扰动图
		_NoiseTex ("Noise Texture", 2D) = "white" {}

		// 根据情况微调动态效果
		_Scale ("调整动态效果", Range(-2,2)) =1

	}
	SubShader
	{
		Pass
		{
			CGPROGRAM

			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{			
				float4 vertex : SV_POSITION;
				float2 uv : TEXCOORD0;
				float2 uvMask : TEXCOORD1;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;

			sampler2D _MaskTex;
			sampler2D _NoiseTex;

			float _Scale;

			v2f vert (appdata v)
			{
				v2f o;
				// 为了避免报错没有完成初始化添加的(不添加也不影响脚本运行)
				// 初始化 o
				UNITY_INITIALIZE_OUTPUT(v2f, o);

				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);


				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				// 取得各个图的颜色
				fixed4 mainCol = tex2D(_MainTex, i.uv);
				fixed4 maskCol = tex2D(_MaskTex, i.uv);

				// 扰动图uv随时间变化实扰动
				fixed4 noiseCol = tex2D(_NoiseTex, i.uv + _Time.xx);


				//因为遮罩图是带有透明通道的，所以 a 大于 0 ，即可使用
				if(maskCol.a > 0)
				{
					//通过扰动图参数调整 UV 实现 MainTex 遮罩部分动态效果
					mainCol = tex2D(_MainTex, i.uv + (noiseCol.xy * 0.05 - 0.025)*_Scale);
					
				}

				// 颜色结果输出
				return mainCol;
			}
			ENDCG
		}
	}
}