一种热力图渲染方法、系统、介质和设备技术方案

本发明专利技术涉及一种热力图渲染方法，该方法包括：热力点叠加渲染步骤：构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用实例化绘制模式在热力点叠加渲染管线中进行渲染，将热力点的热力值基于预设光滑函数进行渐变光滑处理，并采用离屏渲染技术，将热力点的灰度叠加结果缓存在共享纹理内存中；用户终端渲染步骤：构建渐变色带纹理图，依据渲染需要选择不同的渲染材质，在用户终端渲染管线中基于渐变色带纹理图对热力点的灰度叠加结果进行渲染，并将最终的热力图处理结果输出至用户展示页面。本发明专利技术还涉及热力图渲染系统、介质和设备。和设备。和设备。

【技术实现步骤摘要】
一种热力图渲染方法、系统、介质和设备


[0001]本专利技术涉及图像处理
，尤其涉及一种热力图渲染方法、系统、介质和设备。

技术介绍

[0002]目前，热力图是三维虚拟仿真技术中较为常用的技术，可实现多种类型数据直观展示，如：温度的高低、人流密度的强弱、道路的拥堵情况等等，其以图渐变颜色的方式直观展示数据聚合程度，为数据分析、趋势判断提供直观参考。
[0003]现有技术较多基于画布(canvas)绘制的，其数据运算处理过程是基于CPU完成的，当处理大尺寸大分辨率的热力绘制，计算与绘制速度相对较慢，分辨率越大，计算时间越长，造成阻塞时间也越长，从而造成展示系统页面卡顿现象，严重影响了用户的体验，无法满足交互操作。而深入挖掘其背后原因可知，基于canvas这种方式，使用了canvas的drawImage、getImageData方法，且其他过程在CPU中进行，没能很好利用图形显卡硬件进行加速。
[0004]鉴于此，本专利技术提出一种多形式高性能的热力图渲染方法，满足超大尺寸大分辨率的热力绘制需求，支持二维、三维、马赛克点等多形式，同时设计出一种新的光滑函数，使叠加结果更加光滑。
[0005]现有技术中目前存在以下问题：
[0006]渐变技术常用的有线性和高斯函数光滑。而线性函数和高斯函数在多个点叠加之后会出现值间断跳跃现象，导致曲线整体不光滑。
[0007]以高斯函数为例进行说明，以高斯函数为例进行说明，正交相机投射范围左为
‑
1，右为1，当从单点画布正中心绘制高斯函数，在边缘x＝
‑
1及x＝1处，高斯函数的值为一个很小，但不为0的值，如图1所示，高斯曲线在x＝
‑
1及x＝1处值为0.0356，而当多个这样的函数叠加之后，这种微小跳跃的值将会累加，当累加到一定程度时，所绘制是热力就会出现很多折痕，造成不光滑现象，如图2及图3所示。当然，调整高斯函数σ参数，可将边界点无限趋近于0，然而，过大的σ值，造成高斯曲线变成窄条形，形成过陡曲线，从而形成的热力点过于集中于热力点中心，向四周分布不足。
[0008]为解决现有技术中存在的问题，亟需研发提出一种多形式高性能的热力图渲染方法，满足超大尺寸大分辨率的热力绘制需求，支持二维、三维、马赛克点等多形式，同时设计出一种新的光滑函数，使叠加结果更加光滑。

技术实现思路

[0009]本专利技术所要解决的技术问题是针对现有技术的不足，提供一种热力图渲染方法、系统、介质和设备。
[0010]本专利技术解决上述技术问题的技术方案如下：
[0011]本专利技术提供一种热力图渲染方法，所述方法包括：
[0012]热力点叠加渲染步骤：构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用实例化绘制模式在热力点叠加渲染管线中进行渲染，将热力点的热力值基于预设光滑函数进行渐变光滑处理，并采用离屏渲染技术，将热力点的灰度叠加结果缓存在共享纹理内存中；
[0013]用户终端渲染步骤：构建渐变色带纹理图，依据渲染需要选择不同的渲染材质，在用户终端渲染管线中基于渐变色带纹理图对热力点的灰度叠加结果进行渲染，并将最终的热力图处理结果输出至用户展示页面。
[0014]优选的，上述热力点叠加渲染步骤还包括：
[0015]构建光滑渲染步骤：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将第一相机、第一几何体添加至第一场景中；
[0016]光滑渲染参数传入步骤：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点热力值数据及热力点的旋转缩放平移矩阵作为顶点数据通过attributes形式传递至所述顶点着色器中；
[0017]光滑步骤：将绘制热力点的大小设置为预定尺寸，将热力数据经顶点着色器处理后传入片元着色器，在片元着色器中采用预设光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，并采用三角形绘制模式完成光滑渲染；
[0018]输出光滑结果步骤：片元着色器将热力点的灰度叠加处理结果输出至帧缓存中，再输出至共享纹理内存。
[0019]优选的，上述用户终端渲染步骤还包括：
[0020]构建着色渲染步骤：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将第二相机、第二几何体添加至第二场景中，并构建渐变色带纹理图；
[0021]着色渲染参数传入步骤：根据需要从2D普通、3D、马赛克中选择一种渲染材质；通过uniforms纹理形式，将渐变色带纹理图、热力点的光滑处理结果传入着色器；
[0022]着色渲染步骤：将热力点的顶点坐标由顶点着色器传递至片元着色器中处理，采用三角绘制模式完成着色渲染；
[0023]输出着色结果步骤：片元着色器将热力点的用户终端处理结果输出至用户页面。
[0024]优选的，上述着色渲染步骤进一步包括：
[0025]3D材质渲染入步骤：将第二几何体进行3D几何体构造，并将灰度叠加结果传入顶点着色器，采样取出灰度叠加结果的alpha值作为起伏高度值，对几何体进行拉伸处理及投影后，实现几何体3D起伏效果，并在片元着色器中，完成渐变色带纹理图采样，实现3D材质着色；
[0026]马赛克材质渲染步骤：在所述片元着色器中，依据马赛克尺寸，计算马赛克UV坐标，从马赛克中心向边缘算出一个渐变比重系数，分别采用所述马赛克UV坐标及纹理坐标对所述渐变色带纹理图进行采样，并将两次采样结果使用所述比重系数进行混合处理，并将所述混合结果输出。
[0027]2D普通热力图材质渲染步骤：通过uniforms纹理形式，将所述渐变色带纹理图、所述热力点的光滑处理结果传入片元着色器，并通过attributes形式将热力点及所述热力点的坐标传入所述着色器，将纹理坐标以varyings形式从所述顶点着色器传递到所述片元着色器,最终在片元着色器中，使用热力点叠加后光滑处理结果的alpha值构建采样坐标
(alpha,0.5)，对渐变色进行着色采样，输出最终热力图结果。
[0028]优选的，上述预设光滑函数为：
[0029][0030]其中z(x,y)为热力点光滑函数在平面点(x,y)对应高度值，x为所述热力点的横坐标轴，y为所述热力点的竖坐标轴，(x,y)为光滑函数的自变量。
[0031]本专利技术还提供一种热力图渲染系统，采用如上所述热力图渲染方法，系统包括：
[0032]热力点叠加渲染模块：构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用实例化绘制模式在热力点叠加渲染管线中进行渲染，将热力点的热力值基于预设光滑函数进行渐变光滑处理，并采用离屏渲染技术，将热力点的灰度叠加结果缓存在共享纹理内存中；
[0033]用户终端渲染模块：构建渐变色带纹理图，依据渲染需要选择不同的渲染材质，在用户终端渲染管线中基于渐变色带纹理图对热力点的灰度叠加结果进行渲染，并将最终的热力图处理结果输出至用户展示页面。
...

【技术保护点】

【技术特征摘要】
1.一种热力图渲染方法，其特征在于，所述方法包括：热力点叠加渲染步骤：构建待渲染模型及所述待渲染模型所需的多种资源，将所述待渲染模型采用实例化绘制模式在热力点叠加渲染管线中进行渲染，将所述热力点的热力值基于预设光滑函数进行渐变光滑处理，并采用离屏渲染技术，将所述热力点的灰度叠加结果缓存在共享纹理内存中；用户终端渲染步骤：构建渐变色带纹理图，依据渲染需要选择不同的渲染材质，在用户终端渲染管线中基于所述渐变色带纹理图对所述热力点的灰度叠加结果进行渲染，并将最终的热力图处理结果输出至用户展示页面。2.根据权利要求1所述热力图渲染方法，其特征在于，所述热力点叠加渲染步骤还包括：构建光滑渲染步骤：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将所述第一相机、第一几何体添加至第一场景中；光滑渲染参数传入步骤：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点热力值数据及热力点的旋转缩放平移矩阵作为顶点数据通过attributes形式传递至所述顶点着色器中；光滑步骤：将绘制热力点的大小设置为预定尺寸，将所述热力数据经顶点着色器处理后传入片元着色器，在所述片元着色器中采用所述预设光滑函数对所述热力点的热力值由圆中心向四周径向渐变光滑处理，并采用三角形绘制模式完成光滑渲染；输出光滑结果步骤：所述片元着色器将所述热力点的灰度叠加处理结果输出至帧缓存中，再输出至所述共享纹理内存。3.根据权利要求1所述热力图渲染方法，其特征在于，所述用户终端渲染步骤还包括：构建着色渲染步骤：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将所述第二相机、第二几何体添加至第二场景中，并构建所述渐变色带纹理图；着色渲染参数传入步骤：根据需要从2D普通、3D、马赛克中选择一种渲染材质；通过uniforms纹理形式，将所述渐变色带纹理图、所述热力点的光滑处理结果传入着色器；着色渲染步骤：将所述热力点的顶点坐标由所述顶点着色器传递至所述片元着色器中处理，采用三角绘制模式完成着色渲染；输出着色结果步骤：所述片元着色器将所述热力点的用户终端处理结果输出至用户页面。4.根据权利要求3所述热力图渲染方法，其特征在于，所述着色渲染步骤进一步包括：3D材质渲染步骤：将第二几何体进行3D几何体构造，并将所述灰度叠加结果传入顶点着色器，采样取出灰度叠加结果的alpha值作为起伏高度值，并对几何体进行拉伸处理及投影后，实现几何体3D起伏效果，并在所述片元着色器中，完成渐变色带纹理图采样，实现3D材质着色；马赛克材质渲染步骤：在所述片元着色器中，依据马赛克尺寸，计算马赛克UV坐标，从马赛克中心向边缘算出一个渐变比重系数，分别采用所述马赛克UV坐标及纹理坐标对所述渐变色带纹理图进行采样，并将两次采样结果使用所述比重系数进行混合处理，并将所述混合结果输出。2D普通热力图材质渲染步骤：通过uniforms纹理形式，将所述渐变色带纹理图、所述热
力点的光滑处理结果传入片元着色器，并通过attributes形式将热力点及所述热力点的坐标传入所述着色器，将纹理坐标以varyings形式从所述顶点着色器传递...

【专利技术属性】
技术研发人员：乐世华，谢帅，胡阳，张佳亮，李鉴，张腾飞，
申请(专利权)人：北京优锘科技有限公司，
类型：发明
国别省市：