效果
思路
1、取样时,随着时间不断移动uv的x轴,形成动画效果。
2、两张图片,前置图片带有透明通道,后置不带,然后按alpha权重进行取样。
实现
Shader "Custom/ScrollingBackground" {
Properties{
_MainTex("BaseLayer",2D) = "white" {}
_DetailTex("2ndLayer", 2D) = "white" {}
_ScrollX("BaseSpeed", Float) = 1
_ScrollX2("2ndSpeed", Float) = 1
_Multiplier("LayerMultiplier", Float) = 1 //纹理整体亮度
}
SubShader{
Pass{
Tags{ "LightMode" = "ForwardBase" }
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _DetailTex;
float4 _DetailTex_ST;
float _ScrollX;
float _ScrollX2;
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) ;//随着时间变量,改变uv的X轴, 不断移动图片,形成流动的效果。
o.uv.zw = TRANSFORM_TEX( v.texcoord, _DetailTex) + frac ( float2(_ScrollX2 , 0.0) * _Time.y );
return o;
};
fixed4 frag ( v2f o) : SV_Target{
fixed4 firstLayer = tex2D (_MainTex, o.uv.xy);
fixed4 secondLayer = tex2D ( _DetailTex, o.uv.zw);
//使用前置图的透明度做为权重(0-1),对后置图与前置图进行插值,
//当前置图不透明时,a值为1,取最右边的secondLayer,即显示前置图的颜色, 当前置图为透明时(alpha为0,权重为0),则显示后置图的颜色,中间的则取插值的颜色。
fixed4 c = lerp( firstLayer,secondLayer, secondLayer.a );
c.rgb *= _Multiplier;
return c;
};
ENDCG
}
}
}