游戏蛮牛学习群(纯技术交流,不闲聊):539178957
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

教程分享

关注:774

当前位置:游戏蛮牛 技术专区 教程分享

查看: 116|回复: 0

[自学总结] Unity实现热云图

[复制链接]  [移动端链接]
6蛮牛粉丝
1461/1500
排名
1508
昨日变化
1

7

主题

188

帖子

1461

积分

Rank: 6Rank: 6Rank: 6

UID
119664
好友
2
蛮牛币
6756
威望
0
注册时间
2015-8-25
在线时间
515 小时
最后登录
2018-7-13
QQ
发表于 2018-7-4 14:02:52 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
本帖最后由 刘翔 于 2018-7-9 17:46 编辑

功能需求描述:
1.在一张贴图上,指定n个点和该点的温度值,画出相对应颜色;
2.每个点和相邻点之间的颜色为线性变化。

热云图效果

热云图效果


参考:https://blog.csdn.net/x100568/article/details/51219023

根据上面方法画出了一张云图,但是效果并不理想,点和点之间并没有呈线性变化;
分析:这里的核心方法是computerTemperature,即计算出点的温度,并按照60、30、0三个区域,去算相应颜色值(rgb)。所以只要重写这个函数就可以了。

思路:
1.修改颜色:上面的方法的核心是一个温度对应一个color,也就是r,g,b三个值,这里需要改一下,大家都知道改变颜色除了RGB外,还有一种方法是改变HSL,即色相、饱和度、明度,后者对颜色有影响的只有色相,也就是说,改变色相就可以改变颜色,而其他两个值不需要修改,所以我们重写的方法采用后者。
颜色面板.png

2.颜色线性变化公式:参考这里假设,我们现在已知4个点和每个点对应的色相值(H),求出4个点内部的所有像素点到颜色(色相值),公式应该是:
a00 = H00; a01 = H01 - H00; a10 = H10 - H00; a11 = H11 + H00 - (H10 + H01)
H_Pixel = a00 + a10 * x + a01 * y + a11 * x * y;
坐标.png

3.HSL转RGB:参考这里添加HSL类:
[AppleScript] 纯文本查看 复制代码
public class HSL
{
    public int hue;//色调
    public int saturation;//饱和度
    public int lightness;//亮度
}


添加重载函数:
[AppleScript] 纯文本查看 复制代码
public static Color HSL2RGB(HSL hsl)
    {
        double h, s, l;
        h = hsl.hue / 240.0;
        s = hsl.saturation / 240.0;
        l = hsl.lightness / 240.0;
        return HSL2RGB(h, s, l);
    }


4.生成云图:
[AppleScript] 纯文本查看 复制代码
void CalculateColor(Texture2D tex)
    {
        for (int i = 0; i < tex.width; i++)
        {
            for (int j = 0; j < tex.height; j++)
            {
                //E00 : color of point 0,0, should be read from a matrix provided in a CSV file
                float a00 = E00; //interpolation coefficients for a bilinear interpolation, see wiki/bilinear interpolation
                float a10 = E10 - E00;
                float a01 = E01 - E00;
                float a11 = E11 + E00 - E10 - E01;

                //tex.width : number of pixels in the texture. be careful probably not a square !
                float x = i / (float)tex.width; //coordinates of pixel in [0-1]
                float y = j / (float)tex.height;

                float E_pixel = a00 + a10 * x + a01 * y + a11 * x * y; // bilinear interpolation
                hsl.hue = (int)E_pixel;
                tex.SetPixel(i, j, CalculateColorTool.HSL2RGB(hsl)); // be careful , probably much faster to setPixels ! (one call to the function VS 64^64 calls !)
            }
            //tex.SetPixels is probably much faster. 
            //tex.SetPixels(colors);
        }
        tex.Apply();
    }



最终效果图:
最终效果图.png



工程:链接:https://pan.baidu.com/s/1wSB7z2ih4TMQ-_Ut-w-YpA 密码:9zr3



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

关闭

站长推荐 上一条 /1 下一条

快速回复 返回顶部 返回列表