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

最新推荐文章于 2024-02-04 00:22:01 发布
最新推荐文章于 2024-02-04 00:22:01 发布
阅读量1.2w 收藏 39
点赞数 8
分类专栏： unity3d 网格 文章标签： unity 网格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29579137/article/details/78078177
版权

前言

上一篇博客中我门实现了一个平面的温度图，但是最近在论坛中碰到不少同学需要将这个温度图改为三维的，其实改为三维的并不难，因为上一篇中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)，可以用于绘制实线和虚线，这种线条宽度比例随相机移动保持相同比例,而且使用起来也极其简单。

了解了上述内容之后，相信大家已经明白改如何调用官方的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框架解读系列

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

spr1ngd
关注
  • 8
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Unity Shader 热力图
weixin_45092503的博客
12-21 3051
Unity Shader 热力图 分享一下自己写的unity热力图shader，感觉有帮助的话请点赞。 可调节热点位置，传热衰变和传热半径 。 也可叠加多个热点 Shader "Zxj/热力图" { Properties{ _CaiLiao("材料传热", Float) = 7 _Radius("半径",Range(-1,1)) = 0 _X("位置x", Float) = 0 _Y("位置y", Float) = 0 _Z("位置z", Float) = 0 } Sub
Unity数据可视化 温度图效果(一)
MiYa_ZCW的博客
06-30 2052
Unity 数据可视化 温度图效果
Unity3D 温度图、热点图
03-29
基于Unity3D利用Mesh和Shader开发的温度图，在工业可视化的项目中，我们还会经常遇到一个需求，就是显示某个设备的温度信息，或者是显示一间房间的温度信息，这里我们就需要用到一个组件叫温度/热力图。需要实现一个温度图又一次需要用到我们的网格和shader，下面我们来讲解一下实现的原理和最终的效果。
【Unity3d日常开发】Unity3D中实现热力图、风向图、温度图效果
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
01-03 1万+
一、前言 因一个任务要完成如何在Unity上面实现热力图的效果，所以百度了很久，发现资料很少，现在就把我总结的如何在Unity上面基于Canvas实现热力图效果的实现过程分享出来， 此前转载了一篇主要讲的是如何根据数据值，在Canvas上重新绘制RGBA的值，完成热力图的绘制，不过用的是H5写的，我修改了一下，用C#重写的 二、参考资料 1.基于Canvas的热力图绘制方法【http://www....
origin绘制热力图
最新发布
m0_68837265的博客
02-04 1540
选中xyz列，点击工作表-转换为矩阵-xyz网格化，在对话框中点击网格设置-网格化方法和参数，选择随机薄板样条，行与列根据情况设置，尽量多一些。制表复制数据到origin。x轴为1-行数，有几列重复几组。y轴对应x轴第n组处全填n。z轴填入每一列的数据。点击原有刻度，delete删除。左侧菜单栏点击T文本工具，在图中输入需要的刻度，并调整到合适的位置。右击图像选择绘图细节，在对话框中选择线，勾选隐藏所有。点击绘图-等高线图进行绘制.点击跑动的小人关闭快速模式。双击坐标轴标题进行更改。4.去除快速模式水印。
Unity 生成可控可视化三维热力图
s4158303581的博客
06-19 6986
Unity 生成可控可视化三维热力图 1.生成相应的Mesh vertices = new Vector3[(xSize + 1) * (ySize + 1)]; for (int i = 0, y = 0; y <= ySize; y++) { for (int x = 0; x <= xSize; x++, i++) { vertices[i] = new Vector3(x,0,y); } } mesh.vertice
Unity 生成可控可视化三维热力图源码下载
03-17
1.可控可视化三维热力图； 2.颜色和具体范围数值可以根据自己项目需要自行修改。
Unity 热力图建立方法
发布unity，三维模型的相关内容
06-21 3336
通过关键点数据绘制热力图图片并赋给材质
Unity网格编程篇(三) 温度图、热力图
SpringD
09-05 2万+
前言 在工业可视化的项目中，我们还会经常遇到一个需求，就是显示某个设备的温度信息，或者是显示一间房间的温度信息，这里我们就需要用到一个组件叫温度图/热力图。需要实现一个温度图又一次需要用到我们的网格和shader，下面我们来讲解一下实现的原理和最终的效果。
Unity 3D 热力图(二)
BDDNH的博客
05-27 2459
效果图
Unity3d使用Meth实现温度云图
03-21
Unity3d使用Meth实现温度云图,看了网上有几个使用Shader实现的温度云图，基本都是写死的，并且代码都有毛病出不来效果，所以就用Meth实现了一个，温度点位能动态。行列动态创建，只需要自己给一个数值。创建一个空物体然后附上代码，再把空物体添加MethRenderer和MethFilter即可出现效果，本人亲自调试过，如果有问题可以问我一块探讨。
三维温度图
09-24
但是最近在论坛中碰到不少同学需要将这个温度图改为三维的，其实改为三维的并不难，因为上一篇中HeatMap是用Mesh绘制的，因此我们只要给网格一个高度值就可以变成三维的温度图，但是为了效果我们准备增加一些单位和网格作为基础，接下来我们看看如何实现吧。（这里的网格和之前UGUI自定义组件中网格并不一样，因为之前的是纯2D的网格绘制，而这里我们改为三维网格绘制，其实也很简单）
在Unity3D中实现热力图、风向图、温度图效果
11-13
因一个任务要完成如何在Unity上面实现热力图的效果，所以百度了很久，发现资料很少，现在就把我总结的如何在Unity上面基于Canvas实现热力图效果的实现过程分享出来， 此前转载了一篇主要讲的是如何根据数据值，在...
Unity3D三维地图生成器 MapMagic World Generator
08-16
无需付出艰苦的努力来雕刻和绘制广阔的地形，放置数千个对象以及绘制草地：只需以节点图的形式向插件下达命令，然后它就会自动创建地图！ 支持多种生物群落：可以将来自不同图形的森林、沙漠、白雪皑皑的平原、丛林...
[Unity]PureMVC框架解读(上)
热门推荐
SpringD
06-24 2万+
Unity PureMVC框架解读(上) 这个文章模块将会对比较为流行的几种Unity框架PureMVC、StrangeIOC、uFrame或许还有PlayMaker
Bounds(包围盒)概述与AABB包围盒应用
SpringD
04-23 1万+
包围盒概述，Unity3d包围盒拓展方法，Unity3d包围盒应用
Unity自定义UI组件(七)渐变工具、渐变色图片、渐变遮罩
SpringD
06-10 1万+
欢迎阅读Unity自定义UI组件(七)渐变工具、渐变色图片、渐变遮罩前言 在Unity中UGUI只为我们提供了最为基础的Image和RawImage两种可展示图片的组件，但是这两种组件要展示一些特殊效果的时候总是会依赖外界资源（PhotoShop资源），比如你想要一个简单的颜色渐变 ，变色的文字 都会比较棘手，但是我们可以利用程序来解决这点小缺陷，我们可以编写自己的高级Image工具来实现。
Unity自定义UI组件(六)日历、日期拾取器
SpringD
06-07 1万+
前言考虑到工业项目中可能会利用到类似日历的工具，就比如选取某个时间节点，所以我结合UGUI源码开发了日历工具和日期拾取器工具，简单易用，接口齐全，可中文显示，外观可自定义。只需要导入脚本，即可在Hierarchy面板直接创建组件,和使用自带组件一样方便。 主要内容：1.日历工具(仿Winform平台的Calendar组件) 2.日期拾取器 3.如何使用日历组件和日期拾取器组件
Unity自定义UI组件(四)双击按钮、长按按钮
SpringD
05-31 1万+
Unity中实现按钮双击、长击按钮，特点方便创建，容易监听，像UGUI提供的Button一样便捷，并且在不同的工程之间可以完全复用。
unity 生成可控三维热力图
07-21
### 回答1： 在Unity中生成可控的三维热力图可以通过以下步骤实现： 1. 确定数据源：首先需要有一组数据来表示不同位置的热度值。可以是从传感器获取的实时数据，也可以是事先收集好的模拟数据。 2. 数据处理：将数据与各个位置对应起来，确定每个位置的热度值。可以使用二维数组或者数据结构来存储每个位置的热度值。 3. 创建热力图模型：在Unity中创建一个三维模型来表示热力图。可以使用立方体或者其他形状，并为每个位置分配一个材质。 4. 材质贴图：根据每个位置的热度值，通过编程将相应的颜色透明度值传递给材质。可以使用渐变色来表示不同的热度级别，或者使用纹理贴图来显示详细信息。 5. 更新数据：如果数据是实时的，则需要定期更新热力图模型的材质，以反映最新的热度值。可以使用定时器或者事件触发器来更新数据和模型。 6. 交互控制：为了实现可控性，可以为热力图添加一些交互功能，如滑动条、按钮或者手势控制。用户可以通过这些控制元素来调整热力图的显示范围或者其他属性。 总结：通过数据源、数据处理、设置模型材质、更新数据和添加交互控制等步骤，我们可以在Unity中生成可控的三维热力图。这可以用于数据可视化、科学研究、游戏设计等多个领域。 ### 回答2： Unity是一款强大的跨平台游戏引擎，也可以用来实现其他类型的应用程序，如可视化工具。要生成可控的三维热力图，可以使用Unity的图形渲染功能和脚本编程能力。 首先，需要创建一个3D场景，并在场景中添加相应的模型和贴图。可以使用Unity的内置图形库，或者引入外部的热力图数据来进行渲染。可以根据具体需求，自定义纹理材质的颜色变化，以展示不同的热度程度。 接下来，需要编写一些脚本来实现热力图的控制和交互功能。可以使用Unity的C#脚本来实现按钮、滑动条等用户界面元素，用来调整热力图的参数，如颜色映射、颜色阈值等。脚本还可以控制相机的视角和移动方式，以便用户能够在三维空间中自由观察和探索热力图。 另外，为了提高性能和用户体验，可以使用Unity的渲染优化技术，如级别细分、遮挡剔除等，以保证渲染的效率和流畅性。 最后，可以在Unity中进行测试和优化，确保生成的热力图在不同硬件平台上都能正常运行和展示。 总之，Unity作为一个强大的游戏引擎，可以很好地实现可控的三维热力图。通过合理运用Unity的图形渲染和脚本编程功能，结合优化技术和测试机制，可以为用户提供一个直观而灵活的三维热力图展示和控制环境。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值