UnityシェーダーでHex表現を導入する

本日はShader学習枠です。

〇Hexノード

今回は八角形の形状がタイリングされた見た目をシェーダーに組み込んでいきます。

今回シェーダーを使った面白い表現を探していた時に次の記事を見つけました。

r-ngtm.hatenablog.com

上記の記事ではShaderGraphを使用して八角形の形状がタイリングされた表現を行うことができます。

gist.github.com

今回はこちらのコードをもとにShaderLabのシェーダーでHex表現を行っていきます。

〇hlslファイルの作成

自身のシェーダーコードに上記のHex表現を組み込んでもよいのですが、今回はより使いやすいように外部のファイルに処理を記述し、includeする形で使用していきます。

①プロジェクトウィンドウのAssets下の任意の階層で右クリックしShow in Explorerを選択します。

これはUnityのプロジェクトウィンドウでは右クリックすることで生成できるファイルの中にhlslファイルがないためです。

②エクスプローラー上で右クリック、新規作成からテキストドキュメントを選択します。

③拡張子を.hlslに変更し、任意の名前を作ります。

これによってhlslファイルが作成されました。

④Hex.hlslの内部に次のように関数を作成します。

            void Hexagon()
            {
                
            }

外部のShaderLabからHex.hlslをincludeすることでHexagonメソッドを使用できるようにします。

⑤Hexagonメソッド内の処理に上記GitHub GistのHexagonNode.csのHLSL文をコピペします。

ここでは引用させていただいている手前コード自体はスクリーンショットのみで紹介します。　

⑥Hexagonメソッドの引数にインプットとアウトプットを記述します。

            void Hexagon(float2 UV,float Scale,out float2 HexIndex,out float HexPos,out float2 HexUV ,out float2 Hexagon)
            {
          　　・・・
            }

これによってHex表現を行うためのhlsl文ができました。

⑦Hex.hlslと同じ階層にShaderを作成します。　ここではついでにマテリアルも作成してしまっています。

⑧ShaderでHex.hlslをincludeします。

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

            #include "UnityCG.cginc"
            #include  "Hex.hlsl"//追加

⑨Hexagonメソッドと返り値を受け取るための変数をフラグメントシェーダー内に定義します。

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);

               //追加
                float2 Hex;
                float2 HexUV;
                float HexPos;
                float2 HexIndex;
                Hexagon(i.uv,1,HexIndex,HexPos,HexUV ,Hex);
                //ここまで
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }

これによって各変数に値が返されます。

⑩TextureのサンプリングのUVとしてHexUVを使用します。

            fixed4 frag (v2f i) : SV_Target
            {


                float2 Hex;
                float2 HexUV;
                float HexPos;
                float2 HexIndex;
                Hexagon(i.uv,5,HexIndex,HexPos,HexUV ,Hex);

                fixed4 col = tex2D(_MainTex, HexUV);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }

これによって次のように八角形上にタイリングされるようになります。