[UnityShader3]圆角与流光效果

参考链接：

http://blog.csdn.net/mobanchengshuang/article/details/38731035?utm_source=tuicool&utm_medium=referral

http://blog.csdn.net/stalendp/article/details/22720295

一.圆角效果

原理如下，对紫色区域进行特殊处理，如果大于半径，则剔除掉。而这个半径最大值为0.25，可以想象四个圆铺满了整个图形。

Shader "Custom/Fillet"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Radius ("Radius", Range(0, 0.25)) = 0.1//最大值为0.25，即铺满四个圆
	}
	SubShader
	{
		Tags { "Queue" = "Transparent" }
		Blend SrcAlpha OneMinusSrcAlpha

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

			sampler2D _MainTex;
			float4 _MainTex_ST;
			fixed _Radius;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);
				float r = 0.5 - _Radius;

				//将uv范围映射到(-0.5, 0.5)
				float2 uv = i.uv - float2(0.5, 0.5);
				//当ab都为1时，表示四个角的范围
				float a = step(r, abs(uv.x));
				float b = step(r, abs(uv.y));

				//当e为1时，表示处于圆角范围外
				float c = fmod(uv.x, r);
				float d = fmod(uv.y, r);
				float e = step(_Radius, length(half2(c, d)));

				return fixed4(col.rgb, 1 - a * b * e);
			}
			ENDCG
		}
	}
}

扫描二维码关注公众号，回复： 5486425 查看本文章

二.流光效果

流光效果，一般就是一条斜线横扫图片。这里我并没有使用贴图进行辅助，而是直接计算光线的区域，原来的uv范围为(0, 1)，然后我用一个绕z轴旋转矩阵将uv进行旋转，如下图，那么此时uv.y的绝对值就会从大到小再到大，从而形成一个光线的区域。

Shader "Custom/Streamer"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Radian ("Radian", Range(0, 3.14)) = 2.4
	}
	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;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			half _Radian;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);

				fixed cosV = cos(_Radian);
				fixed sinV = sin(_Radian);

				//绕z轴旋转的矩阵
				fixed4x4 rotMatrix = fixed4x4(cosV, -sinV, 0, 0,
											  sinV, cosV, 0, 0,
											  0, 0, 1, 0,
											  0, 0, 0, 1);
				float2 uv = mul(rotMatrix, float4(i.uv, 0, 0)).xy;

				return fixed4(abs(uv.y), abs(uv.y), abs(uv.y), 1);
			}
			ENDCG
		}
	}
}

然后我们对它进行小小的修饰，就可以了。

Shader "Custom/Streamer"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Radian ("Radian", Range(0, 3.14)) = 2.4
		_Color ("Color", Color) = (1, 1, 1, 1)
		_Width ("Width", Range(1, 10)) = 5
		_Speed ("Speed", Range(1, 10)) = 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;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			half _Radian;
			fixed4 _Color;
			half _Width;
			half _Speed;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed cosV = cos(_Radian);
				fixed sinV = sin(_Radian);

				//绕z轴旋转的矩阵
				fixed4x4 rotMatrix = fixed4x4(cosV, -sinV, 0, 0,
											  sinV, cosV, 0, 0,
											  0, 0, 1, 0,
											  0, 0, 0, 1);
				float2 uv = mul(rotMatrix, float4(i.uv, 0, 0)).xy;
				uv.y += cos(fmod(_Time.y * _Speed, 3.14)) * 2;

				//扩大差距，并防止除数为0
				float v = abs(uv.y) * _Width + 1;
				v = 1 / v;
				fixed4 lightCol = _Color * v;


				fixed4 col = tex2D(_MainTex, i.uv);
				return col + lightCol * v;
			}
			ENDCG
		}
	}
}

[UnityShader3]圆角与流光效果

猜你喜欢