Unity3d shaderlab 实现多个贴图混合叠加与裁剪

今天我们讨论一下，如何在unity3d的一个plane中显示多张贴图的一部分，组合贴图。

首先新建一个plane

然后在project面板新建一个材质

将材质赋给这个plane

然后编写shader whiteboard.shader

将这个shader赋给材质

Shader "Custom/WhiteBoard" {
	Properties
    	{
//下面三个是要叠加的贴图
        _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
		_MiddleTex ("Middle (RGB),Alpha (A)", 2D) = "white" {}
		_TopTex ("Top (RGB),Alpha (A)", 2D) = "white" {}
		_WhiteBoardTex ("WhiteBoard (RGB),Alpha (A)", 2D) = "white" {}//需要一个白色的贴图做底色

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15
        // 以 1 - _Height 长度为高度
        _Height ("Radius", Range(0,0.5)) = 0.5

		_TopRate ("TopRate", Range(0,1)) = 0.33  //显示裁剪的比例
		_MiddleRate ("MiddleRate", Range(0,1)) = 0.33
		_ButtomRate ("ButtomRate", Range(0,1)) = 0.33
    }
    
    SubShader
    {
        LOD 100

        Tags
        {
            "Queue" = "Transparent"
            "IgnoreProjector" = "True"
            "RenderType" = "Transparent"
            "PreviewType"="Plane"
        }

        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp] 
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }
        
        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Offset -1, -1
        Fog { Mode Off }
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask [_ColorMask]

        

        Pass
        {
            CGPROGRAM
                #pragma target 3.0
                #pragma vertex vert
                #pragma fragment frag
                #include "UnityCG.cginc"

                float _Height;
				float _TopRate;
				float _MiddleRate;
				float _ButtomRate;

                struct appdata_t
                {
                    float4 vertex : POSITION;
                    float2 texcoord : TEXCOORD0;
                    fixed4 color : COLOR;
                };
    
                struct v2f
                {
                    float4 vertex : SV_POSITION;
                    half2 texcoord : TEXCOORD0;
                    fixed4 color : COLOR;
                };
    
                sampler2D _MainTex;
				sampler2D _MiddleTex;
				sampler2D _TopTex;
				sampler2D _WhiteBoardTex;
                float4 _MainTex_ST;
                
                v2f vert (appdata_t v)
                {
                    v2f o;
                    o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
                    o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
                    o.color = v.color;
#ifdef UNITY_HALF_TEXEL_OFFSET
                    o.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
#endif
                    return o;
                }
                
                fixed4 frag (v2f i) : COLOR
                {
				    fixed4 col2 = tex2D(_MiddleTex, i.texcoord) ;//获得贴图的rgba,颜色像素信息
					fixed4 base_col = tex2D(_MainTex, i.texcoord) ;
					fixed4 top_pic = tex2D(_TopTex, i.texcoord) ;
					fixed4 white_canva = tex2D(_WhiteBoardTex, i.texcoord) ;

                    float2 uv = i.texcoord.xy; //输入的面的uv坐标
                    float4 c = i.color;  //输入的面的颜色信息
					float4 c1 = i.color;
					float4 c3 = i.color;
					float4 c_alpha_mask = i.color;
			
					fixed4 col4 = col2;
              
                    if( uv.y < _TopRate && uv.y > 0.0)
                    {        
							c.rgba = col2.rgba;//根据不同的uv坐标显示不同贴图的颜色信息
                    }
                     if( uv.y > _TopRate + _MiddleRate && uv.y <1.0)
                    {        
							c1.rgba = base_col.rgba;
                    }

					if(uv.y>_TopRate && uv.y<_TopRate + _MiddleRate)
					{
						c3.rgba = top_pic.rgba;
					}
					
                    fixed4 col_a = white_canva * c * c1 *c3;//将颜色信息与白色底图叠加
                    return col_a; //最后输出叠加后的颜色信息，贴图就叠加完成
                }
                                
            ENDCG
        }
    }
}

最后看到效果

这样就可以实现在不同的uv坐标下，显示不同的贴图，达到贴图的叠加了。