【Unity随手记】Shader实现两张图像渐变

shader小白一个,实现一个最简单的贴图叠加的效果~

效果:

请添加图片描述


Shader脚本:

Shader "Unlit/ppt"
{
    
    
    Properties
    {
    
    
        _Texture1 ("图像1", 2d) = "white" {
    
    }//图片1
        _Texture2 ("图像2", 2d) = "white" {
    
    }//图片2

		_Slider("Slider",range(0,1)) = 0//滑块
    }


    SubShader
    {
    
    
        Tags {
    
     "RenderType"="Opaque" }
        LOD 100

        Pass
        {
    
    
            CGPROGRAM//CG开始

            #pragma vertex vert//指明顶点着色器为 “vert”
            #pragma fragment frag//指明片段着色器 “frag”

            #include "UnityCG.cginc"//导入UnityCG库

            struct appdata
            {
    
    
                float4 vertex : POSITION;//三维顶点的POSITION
                float2 uv : TEXCOORD0;
            };
            struct v2f
            {
    
    
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;//可理解为转换后的三维顶点的POSITION
            };

			//需要再次声明,才能使用
            sampler2D _Texture1; //“2d”在这里就是“sampler2D”
            sampler2D _Texture2;
			fixed _Slider;//“range”在这里就是“fixed”


            v2f vert (appdata v)
            {
    
    
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);//“顶点坐标”转换为“裁剪空间”
                o.uv = v.uv;
                return o;
            }
            fixed4 frag (v2f i) : SV_Target
            {
    
    
                fixed4 co1 = tex2D(_Texture1, i.uv);
                fixed4 co2 = tex2D(_Texture2, i.uv);

				return lerp(co1,co2,_Slider);//使用Lerp函数,将两种颜色混合。这个lerp函数前面估计是省略了“mathf.”
            }
            ENDCG//结束CG
        }
    }
}


可以放在UGUI的RawImage的上,实现一个幻灯片切换的效果,有时间再写篇文章~

参考了大佬文章:
Unity Shader实现PPT 30多种切换效果


参考大佬文章后,自己又写了一个从左到右切入的效果,
frag函数中的代码改写为:

            fixed4 frag (v2f i) : SV_Target
            {
    
    
                fixed4 co1 = tex2D(_Texture1, i.uv);
                fixed4 co2 = tex2D(_Texture2, i.uv);

				if (i.uv.x > _Slider)//如果当前像素点的x坐标大于Slider的值,就返回第二张图片
				return co2;
				else//如果当前像素点的x坐标小于Slider的值,就返回第一张图片
				return co1;

				//return lerp(co1,co2,_Slider);//使用Lerp函数,将两种颜色混合。这个lerp函数前面估计是省略了“mathf.”
            }

效果:

请添加图片描述


贴图的uv坐标:

请添加图片描述

猜你喜欢

转载自blog.csdn.net/m0_55907341/article/details/123274037