UnityShader入门精要——纹理动画(2)

滚动的背景

Shader "Unity Shaders Book/Chapter 11/Scrolling Background" {
	Properties {
		_MainTex ("Base Layer (RGB)", 2D) = "white" {}    //第一层(远)纹理背景
		_DetailTex ("2nd Layer (RGB)", 2D) = "white" {}    //第二层(近)纹理背景
		_ScrollX ("Base layer Scroll Speed", Float) = 1.0    //第一层滚动速度
		_Scroll2X ("2nd layer Scroll Speed", Float) = 1.0    //第二层滚动速度
		_Multiplier ("Layer Multiplier", Float) = 1    //控制纹理的整体亮度
	}
	SubShader {
		Tags { "RenderType"="Opaque" "Queue"="Geometry"}
		
		Pass { 
			Tags { "LightMode"="ForwardBase" }
			
			CGPROGRAM
			
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"
			
			sampler2D _MainTex;
			sampler2D _DetailTex;
			float4 _MainTex_ST;
			float4 _DetailTex_ST;
			float _ScrollX;
			float _Scroll2X;
			float _Multiplier;
			
			struct a2v {
				float4 vertex : POSITION;
				float4 texcoord : TEXCOORD0;
			};
			
			struct v2f {
				float4 pos : SV_POSITION;
				float4 uv : TEXCOORD0;
			};
			
			v2f vert (a2v v) {
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				//模型空间变换到裁剪空间
				o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex) + frac(float2(_ScrollX, 0.0) * _Time.y);    
				o.uv.zw = TRANSFORM_TEX(v.texcoord, _DetailTex) + frac(float2(_Scroll2X, 0.0) * _Time.y);
				
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target {
				fixed4 firstLayer = tex2D(_MainTex, i.uv.xy);
				fixed4 secondLayer = tex2D(_DetailTex, i.uv.zw);
				
				fixed4 c = lerp(firstLayer, secondLayer, secondLayer.a);
				c.rgb *= _Multiplier;
				
				return c;
			}
			
			ENDCG
		}
	}
	FallBack "VertexLit"
}

顶点着色器:

我们首先利用TRANSFORM TEX来得到初始的纹理坐标。然后,我们利用内置的_Time.y 变量在水平方向上对纹理坐标进行偏移,以此达到滚动的效果。我们把两张纹理的纹理坐标存储在同一个变量o.uv 中,以减少占用的插值寄存器空间。

片段着色器:

我们首先分别利用i.uv.xy 和i.uv.zw 对两张背景纹理进行采样。然后,使用第二层纹理的透明通道来混合两张纹理,这使用了CG的lerp函数。最后,我们使用_Multiplier 参数和输出颜色进行相乘,以调整背景亮度。

猜你喜欢

转载自blog.csdn.net/weixin_51327051/article/details/122951295