繪製一個正六邊形的shader

繪製一個正六邊形的Shader

最終效果如圖

基本原理是當前片源UV座標和fixed2（0.5 0.5）的距離與離其最近的正六邊形的中心點UV座標的距離之間的差的絕對值是否小於邊緣的寬度。

此做法經過擴展可以用來做UI的正六邊形遮罩等功能。下面是shader的具體實現。

具體算法請結合上一篇關於六邊形座標系的文章。六邊形網格向量工具

// Unlit shader. Simplest possible colored shader.
// - no lighting
// - no lightmap support
// - no texture

Shader "Unlit/Hex" {
Properties {
    _Color ("Main Color", Color) = (1,1,1,1)
}

SubShader {
    Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
    LOD 100

    ZWrite Off
    Blend SrcAlpha OneMinusSrcAlpha 

    Pass {  
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata_t {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

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

            fixed4 _Color;

            v2f vert (appdata_t v)
            {
                v2f o;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.texcoord;
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f input) : COLOR
            {
                fixed4 col = _Color;

                fixed3 n[6] = {
                    fixed3(0, 1, -1),
                    fixed3(1, 0, -1),
                    fixed3(-1, 1, 0),
                    fixed3(1, -1, 0),
                    fixed3(-1, 0, 1),
                    fixed3(0, -1, 1),
                };


                fixed c = 1;


                fixed disc = distance(input.uv.xy,fixed2(0.5,0.5));


                fixed mindis = 1;
                for(int i=0; i<6; i++){
                    fixed2 pos = fixed2(0.5+ 0.5 * 1.73205080756887 * (n[i].x + n[i].z * .5f),0.5 + 0.5 * 1.5 * n[i].z);
                    fixed a = distance(input.uv.xy,pos);
                    mindis = min(mindis,a);
                }

                fixed e = step(abs(disc-mindis),0.04);

                //實心顯示
                //fixed e = step(disc,mindis);
                col = _Color * e;

                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
        ENDCG
    }
}

}

下一篇文章將會實現六邊形網格的繪製。