Unity3D制作属性雷达图

Last modified date

代码生成雷达图的mesh。动态调整属性变化。自定义材质。

首先看看Demo效果:
  • 点击Random Value按钮修改属性数值。
  • 点击加减按钮修属性数量。

 

生成mesh的方式可以看Unity的官方help文档。

  • 首先计算好所有顶点的坐标(vertices)。这一步里坐标Id尽量按顺序排列,方便后续工作。
  • 然后计算出三角面的数组(triangles)。对应之前的顶点Id。顺时针是正面,逆时针是背面。三个数字一组。这两个搞定就能显示模型了。
  • 最后可以加UV和顶点色。他们数组顺序跟顶点一致,所以一开始要想好顶点如何排列比较方便后面的计算。

 

为了方便动态修改雷达数据,我用了简单讨巧的方式。

  • 首先生成容器列表,再生成点的列表。360度除以点的数量就是间隔角度,旋转容器角度就能获得每个点的位置。

  • 之后动态调整数值就是通过修改点的Transform的本地坐标即可,不需要计算三角函数。
  • 注意:动态修改mesh的时候只需要改已有参数即可,例如顶点坐标,uv,顶点色。而triangles没有改变所以不需要重设。

 

雷达图材质
  • Demo里面我把背景图也用代码生成了。其实正式项目里一般都会用个画好的图片当背景的。所以只要制作雷达属性图的材质就好了。
  • 一种是贴图片纹理:需要计算一下UV坐标,一般就是把贴图居中。
  • 一种是直接填顶点色,这种就不用算uv坐标了。直接按照每个属性点与中心点的距离来算颜色。Demo里用的顶点色做法。

 

雷达图最终应用方式
camera渲染到RT
  • camera设成depth模式,渲染到一张render texture。把render texture贴到material上,再填到UI的image里。
  • 这个做法缺点是增加了渲染面积。优点是可以在RT里方便的设置抗锯齿。Demo里用的是RT的做法。
canvas设成camera模式
  • 这个做法下只能用shader实现雷达图的抗锯齿效果了。

 

本文只介绍个大致做法,后续可以按项目需求继续细化。