Fragment shader---UV動畫2

本文转载自 nicolelili1 查看原文 2018-01-08 25 shader

利用uv的連續的偏移，就可以形成一個動畫

1、通過時間的不斷變化

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity總是會幫我們傳遞這樣一個值
		float4 _MainTex_ST;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			IN.uv.x+=_Time.x;
			fixed4 color = tex2D(_MainTex,IN.uv);
			return color;
		}
			ENDCG
	}
	}
}

2、得到水波盪漾的效果

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity總是會幫我們傳遞這樣一個值
		float4 _MainTex_ST;
		float _F;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			fixed4 color = tex2D(_MainTex,IN.uv);
			return color;
		}
		ENDCG
	}
	}
}

3、通過添加顏色可以看到確實出現了圓形水波，但是是從外向內

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
		_A("A",range(0,0.1)) = 0.01
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity總是會幫我們傳遞這樣一個值
		float4 _MainTex_ST;
		float _F;
		float _A;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			//IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			//IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			float2 uv = IN.uv;
			float dis = distance(uv,float2(0.5,0.5));
			float scale = _A*sin(dis*3.14*_F + _Time.y);
			uv = uv + uv*scale;

			fixed4 color = tex2D(_MainTex,uv)+fixed4(1,1,1,1)*saturate(scale)*100;
			return color;
		}
		ENDCG
	}
	}
}

解決辦法：

4、水波改為由內向外

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
		_A("A",range(0,0.1)) = 0.01
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity總是會幫我們傳遞這樣一個值
		float4 _MainTex_ST;
		float _F;
		float _A;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			//IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			//IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			float2 uv = IN.uv;
			float dis = distance(uv,float2(0.5,0.5));
			float scale = _A*sin(-dis*3.14*_F + _Time.y);
			uv = uv + uv*scale;

			fixed4 color = tex2D(_MainTex,uv)+fixed4(1,1,1,1)*saturate(scale)*100;
			return color;
		}
		ENDCG
	}
	}
}

5、通過變量_R控制波紋的大小

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
		_A("A",range(0,0.1)) = 0.01
		_R("R",range(0,1))=0
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity總是會幫我們傳遞這樣一個值
		float4 _MainTex_ST;
		float _F;
		float _A;
		float _R;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			//IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			//IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			float2 uv = IN.uv;
			float dis = distance(uv,float2(0.5,0.5));
			float scale=0;
			if (dis < _R) {
				scale = _A*sin(-dis*3.14*_F + _Time.y);
				uv = uv + uv*scale;
			}

			fixed4 color = tex2D(_MainTex,uv)+fixed4(1,1,1,1)*saturate(scale)*100;
			return color;
		}
		ENDCG
	}
	}
}

6、水波效果

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
		_A("A",range(0,0.1)) = 0.01
		_R("R",range(0,1))=0
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity總是會幫我們傳遞這樣一個值
		float4 _MainTex_ST;
		float _F;
		float _A;
		float _R;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			//IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			//IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			float2 uv = IN.uv;
			float dis = distance(uv,float2(0.5,0.5));
			float scale=0;
			
			//擴散的幅度
			_A *= saturate(1-dis / _R);
			scale = _A*sin(-dis*3.14*_F + _Time.y);
			uv = uv + uv*scale;
			
			fixed4 color = tex2D(_MainTex, uv) ;
			//fixed4 color = tex2D(_MainTex,uv)+fixed4(1,1,1,1)*saturate(scale)*100;
			return color;
		}
		ENDCG
	}
	}
}

7、波光粼粼的效果

Shader "Custom/s_uv_animation1" {

	Properties{
		_MainTex("MainTex", 2D) = ""{}
		_F("F",range(1,30))=10
		_A("A",range(0,0.1)) = 0.01
		_R("R",range(0,1))=0
	}
		SubShader{
		pass {
		CGPROGRAM
		#pragma vertex vert
		#pragma fragment frag
		#include "unitycg.cginc"


		float tiling_x;
		float tiling_y;
		float offset_x;
		float offset_y;

		sampler2D _MainTex;
		//unity總是會幫我們傳遞這樣一個值
		float4 _MainTex_ST;
		float _F;
		float _A;
		float _R;

		struct v2f {
			float4 pos:POSITION;
			float2 uv:TEXCOORD0;
		};


		v2f vert(appdata_base v) {
			v2f o;
			o.pos = mul(UNITY_MATRIX_MVP,v.vertex);

			o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
			return o;
		}

		fixed4 frag(v2f IN) :COLOR{
			//IN.uv.x+=0.01*sin(IN.uv.x*3.14*_F+_Time.y);
			//IN.uv.y += 0.01*sin(IN.uv.x*3.14*_F + _Time.y);
			IN.uv+= 0.005*sin(IN.uv*3.14*_F + _Time.y);
			float2 uv = IN.uv;
			float dis = distance(uv,float2(0.5,0.5));
			float scale=0;
			
			//擴散的幅度
			_A *= saturate(1-dis / _R);
			scale = _A*sin(-dis*3.14*_F + _Time.y);
			uv = uv + uv*scale;
			
			fixed4 color = tex2D(_MainTex, uv) ;
			return color;
		}
		ENDCG
	}
	}
}

注意！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。

Fragment shader---UV動畫3 Cg入門23： Fragment shader – UV動畫（序列幀） [置頂] Cg入門24： Fragment shader – UV動畫（波紋） [置頂] Cg入門25： Fragment shader – UV動畫（模糊） Unity Shader 之 uv動畫 unity UV 序列動畫 shader Shader動畫之UV動畫與頂點動畫 [置頂] Cg入門23： Fragment shader – UV動畫（序列幀）【貓貓的Unity Shader之旅】之UV動畫【貓貓的Unity Shader之旅】之UV動畫