Hex表現を使用した出現シェーダーを作る　その②透明度を実装する

本日は昨日に引き続きShader枠です。

redhologerbera.hatenablog.com

昨日は六角形の形で画像が現れるようなシェーダーを記述しました。

今回はこれをベースに本格的な出現エフェクトを作成します。

〇エフェクトの反転

透明度を実装する前に先日のシェーダーで黒と画像部分を反転させ、画像が六角形で出現するようにします。

これはテクスチャをサンプリングしたのちに掛け合わせるエフェクト部分の色を反転させることで行えます。

ここでは１から引くことで反転させています。

            fixed4 frag (v2f i) : SV_Target
            {
                float2 Hex;
                float2 HexUV;
                float HexPos;
                float2 HexIndex;
                Hexagon(i.uv,_Scale,HexIndex,HexPos,HexUV ,Hex);             
                fixed4 col = tex2D(_MainTex, i.uv);             
                col *=  saturate(1- float4(1,1,1,1)* step(Hex,smoothstep(i.uv.y +_Power,0.8,0)).x);//変更             
                return col;
            }

〇透明度を導入して出現エフェクトを作成する

透明度を導入する方法は過去に紹介してますので参考にしてください。

今回は半透明な状態は必要ないのでAlphaClippingの手法を使用します。

redhologerbera.hatenablog.com

①AlphaToMask Onを宣言します。

hader "Unlit/HexShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Scale("Scale" ,float) = 0
        _Power("Power",float) = 0
    }
    SubShader
    {
        Tags
        {
            "RenderType"="Opaque"
        }
        LOD 100
        AlphaToMask On//追加
        Pass
        {
　　　・・・

②エフェクトの出力をアルファチャンネルのみに渡します。

            fixed4 frag(v2f i) : SV_Target
            {
                float2 Hex;
                float2 HexUV;
                float HexPos;
                float2 HexIndex;
                Hexagon(i.uv, _Scale, HexIndex, HexPos, HexUV, Hex);

                fixed4 col = tex2D(_MainTex, i.uv);

                col.a *= saturate(1 - float4(1, 1, 1, 1) * step(Hex, smoothstep(i.uv.y + _Power, 0.8, 0)).x);

                return col;
            }

これによって六角形上に出現エフェクトが完成しました。