Unity网格编程篇(四) 三维温度图、热力图

前言

上一篇博客中我门实现了一个平面的温度图，但是最近在论坛中碰到不少同学需要将这个温度图改为三维的，其实改为三维的并不难，因为上一篇中HeatMap是用Mesh绘制的，因此我们只要给网格一个高度值就可以变成三维的温度图，但是为了效果我们准备增加一些单位和网格作为基础，接下来我们看看如何实现吧。（这里的网格和之前UGUI自定义组件中网格并不一样，因为之前的是纯2D的网格绘制，而这里我们改为三维网格绘制，其实也很简单）

实现效果

主要内容

• 更改HeatMap组件，以适应3D
• 绘制基础网格
• 网格光滑的问题

详细设计

更改HeatMap组件，以适应3D

关于温度图的具体详细绘制，请查看另一篇博文。

Unity网格编程篇(三) 温度图、热力图

如果你不明白如何利用代码来绘制网格，参见我的其他博文，非常详细的讲解了网格绘制中的主要内容点。

Unity网格编程篇(二) 非常详细的Mesh编程入门文章

Unity Shader(一) Lowpoly动态低多边形 (QQ登录界面低边动画)

因为HeatMap是在被绕x轴旋转90度后绘制的，所以当我们要给温度图添加高度时，只需要在计算顶点位置时，根据高低温度限制，计算出Z轴的值就可以了。

for ( int j = 0; j < vertical; j++){    for (int i = 0; i < horizontal; i++)    {                             float temperature = this.temperature[j, i];        // 利用温度值计算顶点颜色值        colors[horizontal * j + i] = CalcColor(temperature);        Vector3 vertex = origin + new Vector3(i * perWidth, j * perHeight,        // 只要利用GetHeightByTemperature方法计算出z轴高度值        GetHeightByTemperature(temperature));        vertices[horizontal * j + i] = vertex;        uvs[horizontal * j + i] = new Vector2(0 , 1) + new Vector2(1 / horizontal * i , 1 / vertical * j);    }}

我的案例中以20度为温度下限，50度为上限，这里可根据实际需求在Inspector配置或直接修改代码

private float GetHeightByTemperature( float temperature ){    return  (0.5f -(temperature - MinTemperature) / (MaxTemperature - MinTemperature) );}

同样我们要根据温度值计算出顶点的颜色

private Color CalcColor( float temperature )  {    int count = (int)temperature / 10;    float temp = ( temperature % 10 ) / 10;    Color[] colors = GetColors(count);    Color from = colors[0];    Color to = colors[1];    Color offset = to - from;    return from + offset * temp;}// TemperatureColors 实在Inspector面板中配置的颜色区间private Color[] GetColors( int index ){    Color startColor = Color.blue, endColor = Color.blue;    startColor = TemperatureColors[index];    endColor = TemperatureColors[index+1];    return new Color[] { startColor , endColor };}

如此我们已经解决了温度图三维化的问题，接下来我们处理网格的绘制

绘制基础网格

实现网格绘制

通常我们使用LineRenderer绘制线条，但是LineRenderer绘制的线有宽度的问题和远近距离宽度无法自适应的问题，那我们该如何处理呢，其实UnityEngine.Mesh已经为我们处理了这个问题，Mesh中提供了新的接口SetIndices(int[] indices,MeshTopology,int sumMeshCount)，可以用于绘制实线和虚线，这种线条宽度比例随相机移动保持相同比例,而且使用起来也极其简单。

• 什么是Mesh？

• SetIndices是什么方法？

• MeshTopology网格拓扑是什么鬼？

• 这里也提醒大家，要经常去Unity官网查看官方提供的API，你总会有新的发现。

了解了上述内容之后，相信大家已经明白改如何调用官方的API了，我们把API再封装一下，就可以很方便的用于绘制实线和虚线了。

public partial class EDraw{    public void Draw3DLine( Vector3 start, Vector3 end ,Color color , Material material = null )    {         if (null == material)            material = new Material(Shader.Find("HeatMap/HeatMap TwoSide"));        GameObject line = new GameObject();        line.name = "3DLine";        line.hideFlags = HideFlags.HideInHierarchy;        MeshFilter lineMesh = line.AddComponent<MeshFilter>();        MeshRenderer lineRenderer = line.AddComponent<MeshRenderer>();        Mesh mesh = new Mesh();        mesh.name = "Line";        // verticles         // 绘制实现就只需要将顶点计算出来，然后设置顶点序列并制定为LineStrip即可        Vector3[] verticles = new Vector3[2];        verticles[0] = start;        verticles[1] = end;        mesh.vertices = verticles;        int[] indices = new int[2];        indices[0] = 0;        indices[1] = 1;        mesh.SetIndices(indices,MeshTopology.LineStrip,0);        // color        Color[] colors = new Color[verticles.Length];        for (int i = 0; i < colors.Length; i++)            colors[i] = color;        mesh.colors = colors;        lineMesh.sharedMesh = mesh;        lineRenderer.sharedMaterial = material;    }    public void Draw3DDottedLine( Vector3 start , Vector3 end , Color color ,float interval = 0.01f, Material material = null )    {        if (null == material)            material = new Material(Shader.Find("HeatMap/HeatMap TwoSide"));        GameObject line = new GameObject();        line.name = "3DDottedLine";        line.hideFlags = HideFlags.HideInHierarchy;        MeshFilter lineMesh = line.AddComponent<MeshFilter>();        MeshRenderer lineRenderer = line.AddComponent<MeshRenderer>();        Mesh mesh = new Mesh();        mesh.name = "DottedLine";        float distance = Vector3.Distance(start,end);        int count = (int)(distance / interval) + 1 ;        // verticles         Vector3[] verticles = new Vector3[count];        int[] indices = new int[count];        Vector3 dir = (end - start).normalized;        for (int i = 0; i < count; i++)        {            var pos = start + dir * i * interval;            if (i.Equals(count - 1))                pos = end;            verticles[i] = pos;            indices[i] = i;        }        mesh.vertices = verticles;        // 绘制虚线同实线原理想吐，只需将拓扑结构改为lines即可.        mesh.SetIndices(indices,MeshTopology.Lines,0);        // color        Color[] colors = new Color[verticles.Length];        for (int i = 0; i < colors.Length; i++)            colors[i] = color;        mesh.colors = colors;        mesh.MarkDynamic();        lineMesh.sharedMesh = mesh;        lineRenderer.sharedMaterial = material;    }    // 这个方法用于绘制TextMesh，我们也是稍微做了一个封装    public Transform Draw3DText( string text , Vector3 pos , Color fontColor ,Transform parent,Material material = null, int fontSize = 40 , FontStyle fontStyle = FontStyle.Normal,TextAnchor textAnchor = TextAnchor.MiddleLeft)    {        GameObject text3D = new GameObject();        text3D.name = "3DText";        text3D.hideFlags = HideFlags.HideInHierarchy;        MeshRenderer renderer = text3D.AddComponent<MeshRenderer>();        TextMesh textMesh = text3D.AddComponent<TextMesh>();        renderer.sharedMaterial = textMesh.font.material;        textMesh.text = text;        textMesh.color = fontColor;        textMesh.fontSize = fontSize;        textMesh.fontStyle = fontStyle;        textMesh.anchor = textAnchor;        text3D.transform.SetParent(parent);        text3D.transform.localScale = new Vector3(0.01f,0.01f,0.01f);        text3D.transform.localPosition = pos;        return text3D.transform;    }}

虚线网格绘制

见Draw3D类中的Draw3DDottedLine方法,基本原理与实线的绘制相同

温度图网格的绘制

有了上述线条绘制的方法，在三维空间中绘制网格，只需要你计算出条线两端的顶点即可，详细代码见项目包，这里就不再写了。下载地址会在文章末尾给出。

如何实现只有三面显示的网格

这里我仅给出一个粗糙的实现方案，但是它会出现一些因角度旋转而显示别的面的问题。
这是为什么呢，因为我使用的是剔除正面，所以我们就会看到box的背面，这个你可以通过shader计算法线和视角角度来实现。剔除正面shader如下：

Shader "HeatMap/Advanced/HeatmapBox"{    Properties    {        _Color ("Base Color(RGBA)",COLOR) = (0.8,0.8,0.8,1)    }    SubShader    {        Tags{ "RenderType"="Transparent" "Queue"="Transparent" }        LOD 200        Pass        {            Cull Front            Blend SrcAlpha OneMinusSrcAlpha            CGPROGRAM            #pragma vertex vert            #pragma fragment frag            #include "UnityCG.cginc"            #include "UnityLightingCommon.cginc"            struct a2v            {                float4 pos : POSITION;                float3 normal : NORMAL;            };            struct v2f            {                float4 vertex : SV_POSITION;                float3 normal : NORMAL;                float3 worldPos : Texcoord0;            };            float4 _Color;            v2f vert( a2v i )            {                v2f o;                o.vertex = UnityObjectToClipPos(i.pos);                o.normal = mul(float4(i.normal,0),unity_WorldToObject).xyz;                o.worldPos = mul(unity_WorldToObject,i.pos);                return o;            }            fixed4 frag ( v2f i ) : COLOR            {                float3 N = normalize(i.normal);                float3 L = normalize(_WorldSpaceLightPos0.xyz - i.worldPos.xyz);                float NdotL = 1 - saturate(dot(N,L));                float3 diffuseColor = NdotL * _Color.rgb;                return fixed4(1,1,1,_Color.a);            }            ENDCG        }    }}

Inspector

其中的配置就比较简单了，具体细节见项目源码

网格光滑的问题

• 为什么示例图中的网格看起来棱角特别的分明，没有一个弧度的过度呢？

相信大家也明白在三维世界中的一切都是由三角面组成的，而且也没有正真绝对的弧线，而弧线都是由大量的短小的直线拼接出出来的，同样圆滑的弧面也是由大量的细分三角面来构成的，所以示例中的菱角特别分明是因为网格面数太低，实例中的网格面数应该只有64个三角面。

• 还有一点3dMax中的光滑组是什么意思呢？

加光滑组其实是将相邻的两个面的颜色值设置的更为接近，相邻面颜色越接近，那么弧面也将越显光滑，所以在温度图中顶点的颜色值计算也是较为重要的。

通过上述两个问题，我们应该清楚如何提升面的光滑程度，一，更多的三角面，二，面与面之间的颜色过度要合理。对应到我们的温度图组件中就是需要足够多的温度的点信息。

后续拓展

后续我们会将线条的绘制，网格的绘制进一步封装，同时与SpringGUI合并，封装出一个可绘制3D和2D图形的组件。

其实这个组件中还有较多的点需要去优化，比如每条线都会占用一个drawcall,我们需要将实例化的线条mesh合并，还有为了面的光滑，应该添加一个插入算法，让两个点之间通过贝塞尔或者别的算法有一个合理的过度。

UGUI组件系列

• Unity自定义UI组件(十二) 条形图篇
• Unity自定义UI组件(十一) 雷达图、属性图
• Unity自定义UI组件(十) 折线图
• Unity自定义UI组件(九) 颜色拾取器(下)
• Unity自定义UI组件(八) 颜色拾取器(上)
• Unity自定义UI组件(七)渐变工具、渐变色图片、渐变遮罩
• Unity自定义UI组件(六)日历、日期拾取器
• Unity自定义组件之(五) 目录树 UITree
• Unity自定义UI组件(四)双击按钮、长按按钮
• Unity自定义UI组件(三)饼图篇
• Unity自定义UI组件(二)函数图篇(下)
• Unity自定义UI组件(一)函数图篇(上)

Unity框架解读系列

• [Unity]PureMVC框架解读(下)
• [Unity]PureMVC框架解读(上)

分享地址（置顶目录包含所有组件的最新下载地址）

• Github ：https://github.com/ll4080333/UnityCodes
• CSDN ： http://blog.csdn.net/qq_29579137
• 博客专栏 : http://blog.csdn.net/column/details/16329.html
• 温度图组件下载地址 : http://download.csdn.net/download/qq_29579137/9968723
• QQ群 : 593906968 有什么不懂的可以加群咨询互相学习
  如果你想了解UGUI的更多拓展组件，欢迎关注我的博客，我会持续更新,支持一下我这个博客新手，你的关注也会给予我更多的动力。如果以上文章对你有帮助，点个赞，让更多的人看到这篇文章，我们一起学习。如果有什么指点的地方欢迎在评论区留言，秒回复。