Unity Shader 纹理动画 滚动的背景

Shader "MyShader/ScrollingBackground"
{
	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 "Transparent/VertexLit"
}

 其中,_MainTex 和 _DetailTex 分别是第一层(较远)和第二层(较近)的背景纹理,而 _ScrollX 和 _Scroll2X 对应了各自的水平滚动速度。_Multiplier 参数则用于控制纹理的整体亮度。

利用内置的 _Time.y 变量在水平方向对纹理坐标进行偏移,依次达到滚动效果。

使用第二层纹理的透明通道来混合两张纹理,这里使用了 CG 的 lerp 函数。

参考 我买的 unity shader 入门精要

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值