Shader做剪影效果

Posted 2020-10-02 小洋大海

Shader实现自定义纯色剪影效果

某渣渣甩了一个需求给我，并且说我不会写。我明知是激将法，但是想想这需求也太简单了，我好像也不怎么会QAQ。为了表示我对shader的热爱，写就写。

---

需求是这样的：

这是一个漂亮的MM，但是渣渣不想让人知道，想把她变成影子，但是他自己又不想做多一张图片，毕竟也想影子的颜色随便改变（总之渣渣的世界借口很多就是）。

----------->------------>----------->--------->

---

分析下如何实现吧：

首先要把MM显示出来，因为图片除了人物，其它地方都是透明的，那么肯定要用到透明混合的。其次，要先把整个人物变成黑色，然后再上其它颜色。

为什么要变成黑色呢？

因为黑色的颜色值是(0,0,0)，也就是黑色加什么颜色就等于什么颜色（0+x = x），而黑色乘上任何颜色值都等于黑色(0 * x = 0)。

为什么不白色呢？

因为白色的颜色值是(1,1,1)，bralabalala............

---

 

好了，分析完了，那么就动手吧（其实实际是先动手了再分析的= =，所以说总结很重要吗！？）

Shader "CharmingShader/Cartoon001/Unlit"
{
    Properties
    {
        _MainTex("Main Tex",2D) = "white"{}
        _Tint("Color",Color) = (1,1,1,1)
    }
        SubShader
    {
        Tags{ "RenderType" = "Transparent" "Queue"="Transparent"}
        Pass
        {
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Tint;
            
            struct a2v
            {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
            };
            struct v2f
            {
                float2 uv :TEXCOORD0;
                float4 pos : SV_POSITION;
            };
            v2f vert(a2v a)
            {
                v2f f;
                f.uv = TRANSFORM_TEX(a.texcoord, _MainTex);
                f.pos = mul(UNITY_MATRIX_MVP, a.vertex);
                return f;
            }
            fixed4 frag (v2f i) :SV_Target
            {
                fixed4 col = tex2D(_MainTex,i.uv);            
                fixed4 colo = col*fixed4(0, 0, 0, 1) + fixed4(_Tint.rgb,0);
                return colo;
            }
            ENDCG
        }
    }
}

代码还是很简单的，关键的代码可能就是这行

                fixed4 colo = col*fixed4(0, 0, 0, 1) + fixed4(_Tint.rgb,0);

怎么解释呢？。。。。。

其实就是，因为图片肯定是方形的（包括透明部分），不透明部分的数值相当于(x0,y0,z0,1)。

(x0,y0,z0,1)*(0,0,0,1) = (0,0,0,1) 也就相当于黑色。最后(0,0,0,1)+(_Tint.rgb,0) = (_Tint.rgb,1)也就是要上的颜色了。

对于透明部分，原始数值相当于(x1,y1,z1,0)，(x1,y1,z1,0)*(0,0,0,1) = (0,0,0,0)也是透明的。

 最后(0,0,0,0)+(_Tint.rgb,0) = (_Tint.rgb,0)同样也是透明的。

综上就可以达到预期的效果了。

当然笔者认为使用内置的clip函数会适用性更广点，但以上的方法更加锻炼思维能力吧（明明就自己不会QAQ）。总之，方法没有好坏，只有适不适合。

ps：眼睛看到的永远是表象，背后的事实有时候不要去了解，毕竟好看就行了。。。