Unity中shader实现绘制六边形网格

上一篇 绘制一个正六边形的shader 中实现了在面片上绘制单一的六边形。结合上上篇的六边形网格向量工具，可以创建大量的六边形来实现绘制一个六边形网格。

然而这样的绘制问题很明显，顶点数较多，每一个六边形用掉4个顶点。。。那我为什么不去直接用6个顶点的mesh呢？（手动滑稽）。

试想一下如果我有10000个格子，就要为了它绘制40000个顶点。。。

还有一种很常用的方式，画出一张六边形的贴图，然后用平铺的方式铺出六边形的网格，然而这样的方式六边形位置精度又很难保证，而且很容易变形。入下图中就有变形，注意材质的tiling。

综合这些因素，最终决定在上一张的shader基础上扩展出一个shader来实现这种网格的绘制。（网上其他人写了一堆if else的shader 我直接跳过了。。。）。最终实现效果如下图:

下面是shader的最终实现。

其中EdgeColor为边框的颜色，Color为背景的颜色，Column为横排格子数量，Edge为边框宽度占格子宽度（不是半径）占比，Center的xy为0,0坐标格子所在的UV位置，zw为格子整体便宜的格子百分比。

Shader "Unlit/Hex2" {
Properties {
    _EdgeColor ("Edge Color", Color) = (1,1,1,1)
    _Color ("BG Color", Color) = (1,1,1,1)
    _Colmun ("Colmun", float) = 1
    _Edge ("Edge Width", Range(0,1)) = 0
    _Center ("Center(xy) OffsetX(zw)", Vector) =  (0,0,0,0)

    _Target ("A(xy)", Vector) =  (0,0,0,0)
}

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

    Cull Off
    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;
            fixed4 _EdgeColor;
            fixed _Colmun;
            fixed _Edge;

            fixed4 _Target;


            fixed4 _Center;

            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 = _EdgeColor;

                fixed size = 0.5 / (_Colmun * 0.86602540378445);
                fixed2 pixel = input.uv.xy + fixed2( 2 * size * _Center.z - _Center.x, 2 * size * _Center.w - _Center.y);

                fixed q = (pixel.x * 0.57735026918963 - pixel.y *0.33333333333) / size;
                fixed r = pixel.y * 0.66666666666 / size;

                fixed rx = round(q);
                fixed ry = round(-q - r);
                fixed rz = round(r);

                fixed yx = step(abs(ry + q + r),abs(rx - q));
                fixed zx = step(abs(rz - r),abs(rx - q));
                fixed zy = step(abs(rz - r),abs(ry + q + r));

                rx = (yx * zx) * (-ry - rz) + (1-yx * zx ) * rx;
                ry = (zy- yx*zx*zy) * (-rx - rz) + (1- zy+yx*zx*zy) *ry;
                rz = (1- zy+yx*zx*zy) * (-rx - ry) + (zy-yx * zx* zy) * rz;

                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 mindis = 2;
                for(int i=0; i<6; i++){
                    fixed2 pos = fixed2(size * 1.73205080756887 * ((rx+n[i].x) + (rz+n[i].z) * 0.5),size * 1.5 *(rz+ n[i].z));
                    fixed a = distance(pixel.xy,pos);
                    mindis = min(mindis,a);
                }

                fixed isEdge = step(abs(distance(pixel.xy,fixed2(size * 1.73205080756887 * (rx + rz * 0.5) ,size * 1.5 * rz))-mindis),size*_Edge);


                /*
                //目标位置
                zx = (_Target.x<0)*ceil(_Target.x) + (_Target.x>0)*floor(_Target.x);
                zy = (_Target.y<0)*ceil(_Target.y) + (_Target.y>0)*floor(_Target.y);

                fixed hx = zx - (zy - fmod(zy,2)) *0.5;
                hx = step(hx,0) * ceil(hx) + step(0,hx) * floor(hx);
                fixed hz = zy;
                fixed hy = -hx - hz;

                fixed isTarget= distance(fixed3(hx,hy,hz), fixed3(rx,ry,rz)) == 0;

                fixed4 col = isEdge * _EdgeColor + 
                (1 - isEdge)*(1-isTarget) * _Color + 
                (1 - isEdge)* isTarget* fixed4(1,0,0,1);
                */
                fixed4 col = isEdge * _EdgeColor + 
                (1 - isEdge)* _Color;

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

}

注释掉的代码可以在网格中红色填充显示制定坐标的格子,打开注释后如图。

效果很不错，可以试着放到立方体或者球上看看。