Unity Grid Programming Chapter (iii) temperature map, thermal force diagram

Preface

In industrial visualization projects, we also often encounter a need to display a device's temperature information, or to display a room temperature information, here we need to use a component called temperature/thermal map. Need to implement a temperature map again we need to use our grids and shader, let's explain the implementation of the principle and the final effect. Achieve Results

Before probably distinguishing me from three versions, the version before the essential difference, just change shader has reached different usage scenarios and the best running effect. Transparent single-sided visible version not supported

Transparent double-sided visible version not supported

Supports transparent and double-sided visible versions
main content plot grid write shader assign color value Detail design Draw Grid

A detailed tutorial on how to draw a grid is described in another article, which is not explained in detail here.

Unity Grid Programming Chapter (ii) very detailed introduction to mesh programming articles

If you don't understand how to draw a grid using code, see my other blog post, which explains the main points of the grid drawing in great detail.

Unity Shader (i) lowpoly dynamic low poly (QQ login Interface low-side animation) Write shader basic version

Shader "Heatmap/heatmap Easy"
{
    subshader 
    {
        Tags {"Rendertype" = "Opaque"}
        LOD

        Pass
        {
            cgprogram

            #pragma vertex vert
            #pragma fragment frag
            #include "unitycg.cginc"

            struct A2V
            {
                float4 pos:position;
                Fixed4 color:color;
            };

            struct v2f
            {
                float4 vertex:sv_position;
                Fixed4 color:color;
            };

            v2f Vert (a2v i)
            {
                v2f o;
                O.vertex = Mul (unity_matrix_mvp,i.pos);
                O.color = I.color;
                return o;
            }

            Fixed4 Frag (v2f i): COLOR
            {
                return i.color;
            }

            ENDCG
        }}}

Double-sided opaque version

To change the base version to double-sided opaque, simply turn the shader default rejection property in the render channel to off and reject to cull off

Pass
{
    cull OFF
    cgprogram
    //and basic version same
    ENDCG
}

Double-sided transparent version

Again, the double-sided opaque version changes to support transparent versions, just set the render type to transparent and the render queue to transparent, and enable the transparent blending property in the render channel to blend Srcalpha Oneminussrcalpha.

Properties
{
    _alpha ("Alpha", Range (0,1)) = 0.8
}

subshader 
{
    Tags {"Rendertype" = " Transparent "" Opaque "=" Transparent "}
    Pass
    {
        cull OFF
        Blend srcalpha oneminussrcalpha
        // Same as basic version
        Cgprogram
    }
}

Assigning color values

The interface reserved for this component is to import a two-dimensional temperature array, so if you have real temperature data, you can use the interface of the two-dimensional array I provided, or you can add a new interface on your own, and assign the data to the color attribute of the corresponding vertex in the interface.

Because there is no real temperature data, we use the algorithm to simulate some data import, the following is the simulation algorithm. Assignment color Approximate steps:
Initializes a two-dimensional array to extract random points, produce a high temperature value, and produce a decreasing trend, and the resulting temperature value overrides a two-dimensional array to assign a value to the vertex's color property to generate a mesh, and to add a two-dimensional array initialized with the material ball written shader above

Based on the accuracy of the data we entered, we produce a two-dimensional array, and we assume that we generate a two-dimensional array with a width of 100.

Initialization algorithm
private float[,] inittemperatures ()  
{
    //vertical and horizontal are all
    float[,] temperature = new Float[vertical, horizontal];
    for (int i = 0, i < vertical; i++)
        for (int j = 0; J < Horizontal; J + +)
            //Assuming a normal temperature of 50 degrees below 50 degrees is normal temperature
            te Mperature[i, j] =;
    return temperature;
}

generate random high temperature points

The externally generated initialization temperature is passed through the interface inject method into our component heatmap. Because there is no real temperature data, we need to call the random hot point method in heatmap to generate some temperature data. As follows:

[Requirecomponent (typeof (Meshfilter), typeof (Meshrenderer))] public class Heatmap:monobehaviour {public void Inject
    (float[,] temperature)
        {this.temperature = temperature; This.horizontal = temperature.
        GetLength (1); This.vertical = temperature.
        GetLength (0);
        Using the algorithm of randomly generating high temperature points, add 6 high temperature point randomteamperature (0, three, ref this.temperature);
        Randomteamperature (0, ref this.temperature);
        Randomteamperature (0, ref this.temperature);
        Randomteamperature (0, +, ref this.temperature);
        Randomteamperature (0, ref this.temperature);
        Randomteamperature (0, ref this.temperature);
        Meshfilter.mesh = Drawheatmap ();
    Assignment color Addvertexcolor (); }//randomly generate high-temperature data at a certain point and generate analog data by mind and Maxd temperature range//mind and Maxd to the active range at the current high temperature point//from the maximum temperature, to the lowest temperature private void Ra Ndomteamperature (float from, float to, int mind, int Maxd, ref float[,] temperatures) {//Generate random points int randomx = Random.range (3, horizontal);

        int randomy = Random.range (3, vertical);
        float Maxtweendis = Maxd-mind;
        float offset = to-from; for (int i = Randomx-maxd, i < RANDOMX + Maxd; i++) {for (int j = randomy + Maxd; J > R Andomy-maxd;
                j--) {if (I < 0 | | I >= horizontal) continue;  
                if (J < 0 | | J >= vertical) continue;
                float distance = mathf.sqrt (Mathf.pow (randomx-i, 2) + Mathf.pow (Randomy-j, 2));  if (distance <= maxd && distance >= mind) {Float Offsetdis = distance
                    -Mind;
                    float ratio = Offsetdis/maxtweendis;
                    Float temp = from + ratio * OFFSET; Only the current point temperature well paid select override if (Temp > Temperatures[i, j]) Temperatures[i, j] = temp; }
            }
        }
    }
}

Assigning a value to a vertex color property

private void Addvertexcolor ()
{
    color[] colors = new Color[meshfilter.mesh.colors.length];
    for (int j = 0, J < Vertical; J + +)
    {for
        (int i = 0; i < horizontal; i++)
            Colors[horizontal * j + i] = Calccolor (this.temperature[j, I]);
    }
    meshFilter.mesh.colors = colors;
}

create mesh to give material balls

further expansion1. The above explained the simple temperature diagram implementation principle and code writing, but we will not only use in the project this kind of simple function, in addition to the 2D temperature map, we may use to three-dimensional temperature cloud, temperature cloud image is how to achieve, we in the future of the article explained in detail. 2. Temperature map We can also expand into Ugui components, can be used only in the Ugui UI interface to display, in the end how to write, see Ugui Custom component articles should be very familiar with, if not understand, then you click on the Ugui Component series link below to learn about it.Ugui Component Series Unity Custom UI Component (12) bar chart Unity Custom UI Components (11) Radar chart, property map Unity Custom UI Component (10) Line chart Unity Custom UI Component (ix) Color picker (bottom) Unity Custom UI Component (eight) color picker (top) Unity Custom UI Component (vii) Gradient tool, gradient picture, fade matte Unity Custom UI Component (vi) Calendar, date picker Unity Custom Component (v) directory tree Uitree Unity Custom UI Component (iv) Double-click button, long press button Unity Custom UI Component (iii) pie chart Unity Custom UI Component (ii) function diagram (bottom) Unity Custom UI Component (i) function diagram (top) Unity Framework Interpretation series [Unity]puremvc Framework Interpretation (bottom) [Unity]puremvc Framework Interpretation (top) share address (the top directory contains the latest download address for all components) Github: Https://github.com/ll4080333/UnityCodesCSDN: http://blog.csdn.net/qq_29579137Blog Column: http://blog.csdn.net/column/details/16329.htmltemperature Map Component Download Address: http://download.csdn.net/download/qq_29579137/9968723QQ Group: 593906968What do not understand can add group counseling to learn from each other
If you want to learn more about Ugui's expansion components, pleaseFollow my blog, I will continue to update, support me this blog novice, your attention will also give me more power。 If the above article is helpful to you, click a praise, let more people see this article, we study together. If there is any point of the place to welcome in the comment area message, seconds reply.