【＃Unity Shader＃Amplify Shader Editor(ASE)_第九篇】

1.续第八篇ASE效果

流光Shader完整代码块和节点连接放在最前面！

为了方便观察，这里呈上第八篇ASE效果的完整节点连接。
下面展示的是 ASE第八篇的效果完整代码块。

Shader "Samples/Light Flow"
{
    
	Properties
	{
    
		//关键词枚举，0位X方向，1为Y方向。
		[KeywordEnum(x,y)] _Flow_Diretion("Flow_Diretion", Float) = 0
		_FlowSpeed("Flow Speed", Float) = 1
		
		_Tex("Tex", 2D) = "white" {
    }
		_Color("Color", Color) = (0,1,1,1)

	}

	SubShader
	{
    
		Tags {
     "RenderType"="Transparent" "Queue"="Transparent" }

		Blend One One
		Cull Off
		
		Pass
		{
    
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"
			//————————————————————————————————————————————————————————————————————
			//定义枚举关键词
			#pragma shader_feature_local _FLOW_DIRETION_X _FLOW_DIRETION_Y
			//————————————————————————————————————————————————————————————————————
			struct v2f
			{
    
				float4 vertex : SV_POSITION;
				float2 texcoord : TEXCOORD0;
			};

			sampler2D _Tex;
			float _FlowSpeed;
			float4 _Color;
			float4 _Tex_ST;

			
			v2f vert (appdata_base v)
			{
    
				v2f o;
				
				o.texcoord = TRANSFORM_TEX(v.texcoord,_Tex);
				o.vertex = UnityObjectToClipPos(v.vertex);
				
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
    
				float2 texcoord;

				//————————————————————————————————————————————————————————————————————
				//判断流动方向
				#if _DIRECTION_X
				texcoord = float2(i.texcoord.x + _Time.x * _Speed,
								i.texcoord.y);
				#elif _DIRECTION_Y
				texcoord = float2(i.texcoord.x,
								i.texcoord.y + _Time.x * _Speed,);
				#endif
				//————————————————————————————————————————————————————————————————————

				return tex2D(_Tex,texcoord) * _Color;
			}
			ENDCG
		}
	}
}

2.Shader代码块讲解

2.1.Properties代码块

• 关于Properties代码规则可以看前面的Properties介绍，不理解的地方 可以留言评论。

Shader "Samples/Light Flow"
{
    
	Properties
	{
    
		//关键词枚举，0位X方向，1为Y方向。
		[KeywordEnum(x,y)] _Flow_Diretion("Flow_Diretion", Float) = 0
		_FlowSpeed("Flow Speed", Float) = 1
		
		_Tex("Tex", 2D) = "white" {
    }
		_Color("Color", Color) = (0,1,1,1)

	}

1. 开放了流光效果的贴图属性 _Tex和颜色属性 _Color
2. 为了方便选择光束的流动方向，需要在属性_DIRECTION之前添加[KeywordEnum(x,y)]关键词枚举指令，这样就可以在材质面板上通过下啦选项进行选择了。
   也即：[KeywordEnum(x,y)] _Flow_Diretion("Flow_Diretion", Float) = 0
3. 添加_Speed用于调节光束的流动速度。

2.2.SubShader代码块

• 由于Shader效果需要使用Blending功能，因此需要在SubShader的标签中将渲染类型和渲染队列全部设置为“Transparent”。然后把混合模式设置为“Blend one one”，并且关闭几何体剔除功能。代码块如下：

	SubShader
	{
    
		Tags {
     "RenderType"="Transparent" "Queue"="Transparent" }

		Blend One One
		Cull Off

2.3.Pass 编译指令代码块

• 在编译指令中，添加shader_feature指令定义了流动方向X和Y的枚举关键词分别为
  _FLOW_DIRETION_X和 _FLOW_DIRETION_Y。如下：

		Pass
		{
    
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"
			//————————————————————————————————————————————————————————————————————
			//定义枚举关键词
			#pragma shader_feature_local _FLOW_DIRETION_X _FLOW_DIRETION_Y
			//————————————————————————————————————————————————————————————————————

除此之外，还可以用“multi_compile”指令。关于自定义材质面板内容，需要单独制作一篇。传送门------------------------------------------------

2.4.声明属性变量、获取数据代码块

• 相对容易，前面章节有详细介绍，例如Pass第三篇。

			struct v2f
			{
    
				float4 vertex : SV_POSITION;
				float2 texcoord : TEXCOORD0;
			};
			sampler2D _Tex;
			float _FlowSpeed;
			float4 _Color;
			float4 _Tex_ST;

2.5.顶点着色器代码块

• 介绍在代码块的注释里。

			v2f vert (appdata_base v)
			{
    
				v2f o;
				//用TRANSFORM_TEX()宏计算出光束的纹理坐标。
				o.texcoord = TRANSFORM_TEX(v.texcoord,_Tex);
				//使用UnityObjectToClipPos()函数得到裁切空间顶点坐标，然后传递给片段着色器。
				o.vertex = UnityObjectToClipPos(v.vertex);
				
				return o;
			}

2.6.片段着色器代码块

• 在片段着色器中，根据枚举关键词进行判断：
• 当流动方向为X时，时间变量会加到纹理坐标的X分量上；
• 当流动方向为Y时，时间变量会加到纹理坐标的Y分量上。
• 然后使用计算后的纹理坐标对光束纹理进行采样，
• 最终乘上颜色属性，返回到片段着色器。

			fixed4 frag (v2f i) : SV_Target
			{
    
				float2 texcoord;

				//————————————————————————————————————————————————————————————————————
				//判断流动方向
				#if _DIRECTION_X
				texcoord = float2(i.texcoord.x + _Time.x * _Speed,
								i.texcoord.y);
				#elif _DIRECTION_Y
				texcoord = float2(i.texcoord.x,
								i.texcoord.y + _Time.x * _Speed,);
				#endif
				//————————————————————————————————————————————————————————————————————

				return tex2D(_Tex,texcoord) * _Color;
			}
			ENDCG
		}
	}
}