MY BLOG DIRECTORY：
YivanLee：专题概述及目录INTRODUCTION：
最近在玩王者荣耀的时候发现最后的评分五维雷达统计图挺有意思
而且这个功能应该是很多游戏都需要实现的功能所以我花几分钟实现了下这个功能，美术上还需要打磨吧，我这里只做技术分享。
MAIN CONTENT：
首先根据具体的形状对UV空间进行几何划分，我这里为了方便做六边形，当然也可以做五边形七边形八边形。
我们最终的图案就是多边形abcdef，多边形可以被拆解成数个三角形，最后我们把这些三角形拼接在一起即可。
float sdTriangle( in float2 p0, in float2 p1, in float2 p2, in float2 p )
{
float2 e0 = p1 - p0;
float2 e1 = p2 - p1;
float2 e2 = p0 - p2;
float2 v0 = p - p0;
float2 v1 = p - p1;
float2 v2 = p - p2;
float2 pq0 = v0 - e0*clamp( dot(v0,e0)/dot(e0,e0), 0.0, 1.0 );
float2 pq1 = v1 - e1*clamp( dot(v1,e1)/dot(e1,e1), 0.0, 1.0 );
float2 pq2 = v2 - e2*clamp( dot(v2,e2)/dot(e2,e2), 0.0, 1.0 );
float s = sign( e0.x*e2.y - e0.y*e2.x );
float2 d = min( min( float2( dot( pq0, pq0 ), s*(v0.x*e0.y-v0.y*e0.x)),float2( dot( pq1, pq1 ), s*(v1.x*e1.y-v1.y*e1.x) )),float2(dot(pq2, pq2 ), s*(v2.x*e2.y-v2.y*e2.x)));
if(-sqrt(d.x)*sign(d.y) > 0)
{
return 0;
}
else
{
return 1;
}
}
#define Sqrt3 1.73205
float DrawScroe(float a, float b, float c, float d, float e, float f, float2 uv)
{
float Ret = 0;
float2 center = float2(0.5, 0.5);
float2 aDir = float2(0, 1);
float2 bDir = float2(Sqrt3 / 2, 0.5);
float2 cDir = float2(Sqrt3 / 2, -0.5);
float2 dDir = float2(0, -1);
float2 eDir = float2(-Sqrt3 / 2, -0.5);
float2 fDir = float2(-Sqrt3 / 2, 0.5);
float2 pa = 0.5 * aDir * a + center;
float2 pb = 0.5 * bDir * b + center;
float2 pc = 0.5 * cDir * c + center;
float2 pd = 0.5 * dDir * d + center;
float2 pe = 0.5 * eDir * e + center;
float2 pf = 0.5 * fDir * f + center;
Ret = sdTriangle(pa, pb, center, uv);
Ret += sdTriangle(pb, pc, center, uv);
Ret += sdTriangle(pc, pd, center, uv);
Ret += sdTriangle(pd, pe, center, uv);
Ret += sdTriangle(pe, pf, center, uv);
Ret += sdTriangle(pf, pa, center, uv);
return Ret;
}
sdTriangle函数负责三角形绘制，给它传入三角形的三个顶点即可，三角形顶点没有顺序或者绕序限制。但是只需要保证我们需要变换的abcdef在分割的aDir，bDir，cDir等方向上即可。
材质
最后的效果：
https://www.zhihu.com/video/1140717527666593792
SUMMARY AND OUTLOOK：
这个效果还是比较常用的，当然也有用动态模型的方法，但是动态模型的方法没办法直接用到UI上，并且如果这个是个3D物体而且是球面，模型就很难算了，动态更新VB也比较烦，我这里直接在Shader里就算完了。
Enjoy it！
NEXT：
