Hex表現を使用した出現シェーダーを作る その①

本日はUnityシェーダー枠です。

昨日他ブログにて紹介されていたHexagonNodeを使用してHex＝ハニカム上にテクスチャをサンプリングするシェーダーを作りました。

redhologerbera.hatenablog.com

今回はこちらのシェーダーを応用して出現エフェクトを作成していきます。

〇エフェクト

昨日紹介したHexagonNodeを使用してエフェクトを作成します。

Hex.hlslではいくつかの出力を持っています。

 Hexagon(i.uv,_Scale,HexIndex,HexPos,HexUV ,Hex);

今回はHexを使用します。

これは次のような6角形の中心から広がるグラデーションを表現することができます。

①フラグメントシェーダーを次のように書き換えます。

  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 =  float4(1,1,1,1)* step(Hex,smoothstep(i.uv.y ,0.8,0)).x;
                
                return col;
            }

これはUVのY座標に対して0～0.8の値の範囲でsmoothstep関数を使用し滑らかにグラデーションをかけています。

Step関数は六角形のグラデーションであるHexを上記のグラデーションの閾値で0、1に分けています。

これによって次のような結果を得ることができます。

②float _Powerを追加しUVをプロパティから任意に動かせるようにします。

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

        Pass
        {
            CGPROGRAM
　　　・・・

        
            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _Scale;
            float _Power;//追加
            v2f vert (appdata v)
            {
　　　　　・・・
            }

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

これによって次のように一方向に六角形が大きくなるような見た目になります。

③最後に事前にサンプリングした画像とかけわせます。

            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 *=  float4(1,1,1,1)* step(Hex,smoothstep(i.uv.y +_Power,0.8,0)).x;//掛け算に変更
                
                return col;
            }

これによって次のように遷移表現を行うことができます。

本日は以上です。

〇シェーダー全文

Shader "Unlit/HexShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Scale("Scale" ,float) = 0
        _Power("Power",float) = 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"
            #include  "Hex.hlsl"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _Scale;
            float _Power;
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            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 *=  float4(1,1,1,1)* step(Hex,smoothstep(i.uv.y +_Power,0.8,0)).x;
                
                return col;
            }
            ENDCG
        }
    }
}