Unity Shader 实现抖音三分屏效果

老规矩，先上效果图：

相信大家也经常刷抖音，这种三分屏的效果也经常见到，不过抖音上是动态的视频，我们这里就暂时拿一张图片来实现这种效果吧。

实现思路：
1、将UV的V值从（0-1）的区间变换到（0-3）的区间
2、对每个区间取小数部分（例如：2.2取小数为0.2,0.6取小数为0.6）
3、最后在吧每个（0-1）的区间变换到（0.3-0.6：注这里的0.3-0.6是我随便取的值，大家可以根据需求改变）的区间

## 具体实现：
1、首先变换区间，这个比较简单，从0-1变换到0-3，只需要吧原先的值乘3即可，

（未对UV区域做变换的效果）

（对UV区域从0-1变换到0-3的效果）

可以看到原先应该铺满的图片，现在被压缩到了三分之一处，并且图片变形了

2、因为我们现在的UV的V值取值范围为[0-3]，但是实际的UV是[0-1]的范围，这也导致我们有很大一部分数据是没有用到的，接下来我们对[0-1],[1-2],[2-2]这三个部分取小数，shader里取小数的函数为：frac(X)


我们可以看到，现在已经初具三分屏效果了，

3、虽然上面已经完成三分屏的效果，但是很明显，每一部分都变形了。我们吧区域从[0-1]，变换到[0-3]，也相当于吧图片竖直方向压缩了3倍，图片肯定变形啦。
现在，我们吧之前的V值乘以0.333，也就是三分之一，这样也就抵消了之前我们扩大3倍带来的图片变形影响，_Offset这个字段，是我用来做偏移的，大家可以自行定义一个float字段，

这样子是不是就没有变形了，跟抖音三分屏基本一样啦，大家也可以调节_Offset参数调整图片显示的区域

好啦，到这里就结束啦，有不懂得小伙伴可以私聊我，接下来上全部代码：

Shader "Unlit/NewUnlitShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
		_Offset ("偏移",Range(0,1)) = 0
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
			float _Offset;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;

            }

            fixed4 frag (v2f i) : SV_Target
            {
				float2 uv = float2(i.uv.x, ((frac(i.uv.y * 3) * 3.333) / 10.0) + _Offset);
                fixed4 col = tex2D(_MainTex, uv);
                return col;
            }
            ENDCG
        }
    }
}