滚动的背景 Shader

最新推荐文章于 2025-01-17 22:30:23 发布

原创最新推荐文章于 2025-01-17 22:30:23 发布 · 280 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#shader

TA 滚动的背景 ShaderLab

参考冯乐乐《Shader入门精要》

frac()函数是取浮点数的小数部分的,它的图像是这样的
在这里插入图片描述
然后下面还用到了lerp函数，这个函数大家应该挺熟悉的就是下面这个

float lerp(a, b, c){
	return (1- c)*a + c*b;
}

好，下面就是Subshader部分

SubShader
    {
        Tags { "Queue"="Transparent" }
        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 i){
                v2f o;
                o.pos = UnityObjectToClipPos(i.vertex);
                // 这个就是让第一章贴图在x轴上随时间进行循环偏移
                o.uv.xy = TRANSFORM_TEX(i.texcoord, _MainTex)
                +frac(float2(_ScrollX,0)*_Time.y);
                // 这个就是让第二章贴图在x轴上随时间进行循环偏移
                o.uv.zw = TRANSFORM_TEX(i.texcoord, _DetailTex)+
                 frac(float2(_Scroll2X,0)*_Time.y);
                return o;
            }

            fixed4 frag(v2f i):SV_TARGET
            {
                fixed4 col01 = tex2D(_MainTex, i.uv.xy);
                fixed4 col2 = tex2D(_DetailTex, i.uv.zw );
                //将两张图片进行混合
                fixed4 col = lerp(col2,col01 , col01.a);
                // 调整整体颜色亮度
                col *= _Multiplier;
                return col;
            }
            ENDCG
        }

这里面稍微难理解点的可能就这句了

fixed4 col = lerp(col2,col01 , col01.a);

这个就是当col01 输出的某个部分的透明度如果为0 ，则不输出这时就会只输出另一张图，如果为1 则col01遮挡住col2，这样就形成了一个层级的视觉效果了

下面是效果图
在这里插入图片描述