CN114937117A - 一种热力图渲染方法、系统、介质和设备 - Google Patents
一种热力图渲染方法、系统、介质和设备 Download PDFInfo
- Publication number
- CN114937117A CN114937117A CN202210507987.0A CN202210507987A CN114937117A CN 114937117 A CN114937117 A CN 114937117A CN 202210507987 A CN202210507987 A CN 202210507987A CN 114937117 A CN114937117 A CN 114937117A
- Authority
- CN
- China
- Prior art keywords
- rendering
- heat
- point
- constructing
- shader
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 252
- 238000010586 diagram Methods 0.000 title claims abstract description 65
- 238000000034 method Methods 0.000 title claims abstract description 52
- 239000000463 material Substances 0.000 claims abstract description 59
- 238000012545 processing Methods 0.000 claims abstract description 51
- 230000006870 function Effects 0.000 claims abstract description 48
- 238000009499 grossing Methods 0.000 claims abstract description 33
- 238000005516 engineering process Methods 0.000 claims abstract description 11
- 239000012634 fragment Substances 0.000 claims description 60
- 238000004040 coloring Methods 0.000 claims description 25
- 238000005070 sampling Methods 0.000 claims description 23
- 239000007787 solid Substances 0.000 claims description 12
- 238000004590 computer program Methods 0.000 claims description 11
- 230000000694 effects Effects 0.000 claims description 11
- 239000011159 matrix material Substances 0.000 claims description 9
- 230000005540 biological transmission Effects 0.000 claims description 7
- 230000005484 gravity Effects 0.000 claims description 7
- 238000013519 translation Methods 0.000 claims description 7
- 238000003860 storage Methods 0.000 claims description 5
- 238000010276 construction Methods 0.000 claims description 4
- 238000002156 mixing Methods 0.000 claims description 4
- 230000008676 import Effects 0.000 claims description 3
- 230000008859 change Effects 0.000 abstract description 5
- 230000008569 process Effects 0.000 description 11
- 239000003086 colorant Substances 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000005520 cutting process Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 230000000903 blocking effect Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 238000010438 heat treatment Methods 0.000 description 2
- 238000002360 preparation method Methods 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000002776 aggregation Effects 0.000 description 1
- 238000004220 aggregation Methods 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 238000009412 basement excavation Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000003139 buffering effect Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 230000003247 decreasing effect Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000012886 linear function Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000000844 transformation Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/10—Geometric effects
- G06T15/20—Perspective computation
- G06T15/205—Image-based rendering
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/005—General purpose rendering architectures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/04—Texture mapping
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Computer Graphics (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- Geometry (AREA)
- Image Generation (AREA)
Abstract
本发明涉及一种热力图渲染方法，该方法包括：热力点叠加渲染步骤：构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用实例化绘制模式在热力点叠加渲染管线中进行渲染，将热力点的热力值基于预设光滑函数进行渐变光滑处理，并采用离屏渲染技术，将热力点的灰度叠加结果缓存在共享纹理内存中；用户终端渲染步骤：构建渐变色带纹理图，依据渲染需要选择不同的渲染材质，在用户终端渲染管线中基于渐变色带纹理图对热力点的灰度叠加结果进行渲染，并将最终的热力图处理结果输出至用户展示页面。本发明还涉及热力图渲染系统、介质和设备。
Description
技术领域
本发明涉及图像处理技术领域，尤其涉及一种热力图渲染方法、系统、介质和设备。
背景技术
目前，热力图是三维虚拟仿真技术中较为常用的技术，可实现多种类型数据直观展示，如：温度的高低、人流密度的强弱、道路的拥堵情况等等，其以图渐变颜色的方式直观展示数据聚合程度，为数据分析、趋势判断提供直观参考。
现有技术较多基于画布(canvas)绘制的，其数据运算处理过程是基于CPU完成的，当处理大尺寸大分辨率的热力绘制，计算与绘制速度相对较慢，分辨率越大，计算时间越长，造成阻塞时间也越长，从而造成展示系统页面卡顿现象，严重影响了用户的体验，无法满足交互操作。而深入挖掘其背后原因可知，基于canvas这种方式，使用了canvas的drawImage、getImageData方法，且其他过程在CPU中进行，没能很好利用图形显卡硬件进行加速。
鉴于此，本发明提出一种多形式高性能的热力图渲染方法，满足超大尺寸大分辨率的热力绘制需求，支持二维、三维、马赛克点等多形式，同时设计出一种新的光滑函数，使叠加结果更加光滑。
现有技术中目前存在以下问题：
渐变技术常用的有线性和高斯函数光滑。而线性函数和高斯函数在多个点叠加之后会出现值间断跳跃现象，导致曲线整体不光滑。
以高斯函数为例进行说明，以高斯函数为例进行说明，正交相机投射范围左为-1，右为1，当从单点画布正中心绘制高斯函数，在边缘x＝-1及x＝1处，高斯函数的值为一个很小，但不为0的值，如图1所示，高斯曲线在x＝-1及x＝1处值为0.0356，而当多个这样的函数叠加之后，这种微小跳跃的值将会累加，当累加到一定程度时，所绘制是热力就会出现很多折痕，造成不光滑现象，如图2及图3所示。当然，调整高斯函数σ参数，可将边界点无限趋近于0，然而，过大的σ值，造成高斯曲线变成窄条形，形成过陡曲线，从而形成的热力点过于集中于热力点中心，向四周分布不足。
为解决现有技术中存在的问题，亟需研发提出一种多形式高性能的热力图渲染方法，满足超大尺寸大分辨率的热力绘制需求，支持二维、三维、马赛克点等多形式，同时设计出一种新的光滑函数，使叠加结果更加光滑。
发明内容
本发明所要解决的技术问题是针对现有技术的不足，提供一种热力图渲染方法、系统、介质和设备。
本发明解决上述技术问题的技术方案如下：
本发明提供一种热力图渲染方法，所述方法包括：
热力点叠加渲染步骤：构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用实例化绘制模式在热力点叠加渲染管线中进行渲染，将热力点的热力值基于预设光滑函数进行渐变光滑处理，并采用离屏渲染技术，将热力点的灰度叠加结果缓存在共享纹理内存中；
用户终端渲染步骤：构建渐变色带纹理图，依据渲染需要选择不同的渲染材质，在用户终端渲染管线中基于渐变色带纹理图对热力点的灰度叠加结果进行渲染，并将最终的热力图处理结果输出至用户展示页面。
优选的，上述热力点叠加渲染步骤还包括：
构建光滑渲染步骤：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将第一相机、第一几何体添加至第一场景中；
光滑渲染参数传入步骤：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点热力值数据及热力点的旋转缩放平移矩阵作为顶点数据通过attributes形式传递至所述顶点着色器中；
光滑步骤：将绘制热力点的大小设置为预定尺寸，将热力数据经顶点着色器处理后传入片元着色器，在片元着色器中采用预设光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，并采用三角形绘制模式完成光滑渲染；
输出光滑结果步骤：片元着色器将热力点的灰度叠加处理结果输出至帧缓存中，再输出至共享纹理内存。
优选的，上述用户终端渲染步骤还包括：
构建着色渲染步骤：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将第二相机、第二几何体添加至第二场景中，并构建渐变色带纹理图；
着色渲染参数传入步骤：根据需要从2D普通、3D、马赛克中选择一种渲染材质；通过uniforms纹理形式，将渐变色带纹理图、热力点的光滑处理结果传入着色器；
着色渲染步骤：将热力点的顶点坐标由顶点着色器传递至片元着色器中处理，采用三角绘制模式完成着色渲染；
输出着色结果步骤：片元着色器将热力点的用户终端处理结果输出至用户页面。
优选的，上述着色渲染步骤进一步包括：
3D材质渲染入步骤：将第二几何体进行3D几何体构造，并将灰度叠加结果传入顶点着色器，采样取出灰度叠加结果的alpha值作为起伏高度值，对几何体进行拉伸处理及投影后，实现几何体3D起伏效果，并在片元着色器中，完成渐变色带纹理图采样，实现3D材质着色；
马赛克材质渲染步骤：在所述片元着色器中，依据马赛克尺寸，计算马赛克UV坐标，从马赛克中心向边缘算出一个渐变比重系数，分别采用所述马赛克UV坐标及纹理坐标对所述渐变色带纹理图进行采样，并将两次采样结果使用所述比重系数进行混合处理，并将所述混合结果输出。
2D普通热力图材质渲染步骤：通过uniforms纹理形式，将所述渐变色带纹理图、所述热力点的光滑处理结果传入片元着色器，并通过attributes形式将热力点及所述热力点的坐标传入所述着色器，将纹理坐标以varyings形式从所述顶点着色器传递到所述片元着色器,最终在片元着色器中，使用热力点叠加后光滑处理结果的alpha值构建采样坐标(alpha,0.5)，对渐变色进行着色采样，输出最终热力图结果。
优选的，上述预设光滑函数为：
其中z(x,y)为热力点光滑函数在平面点(x,y)对应高度值，x为所述热力点的横坐标轴，y为所述热力点的竖坐标轴，(x,y)为光滑函数的自变量。
本发明还提供一种热力图渲染系统，采用如上所述热力图渲染方法，系统包括：
热力点叠加渲染模块：构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用实例化绘制模式在热力点叠加渲染管线中进行渲染，将热力点的热力值基于预设光滑函数进行渐变光滑处理，并采用离屏渲染技术，将热力点的灰度叠加结果缓存在共享纹理内存中；
用户终端渲染模块：构建渐变色带纹理图，依据渲染需要选择不同的渲染材质，在用户终端渲染管线中基于渐变色带纹理图对热力点的灰度叠加结果进行渲染，并将最终的热力图处理结果输出至用户展示页面。
优选的，上述热力点叠加渲染模块还包括：
构建光滑渲染模块：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将第一相机、第一几何体添加至第一场景中；
光滑渲染参数传入模块：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点数据作为顶点数据传入热力点叠加渲染管线中；
光滑模块：将绘制热力点的大小设置为预定尺寸，将热力数据经顶点着色器处理后传入片元着色器，在片元着色器中采用预设光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，并采用三角形绘制模式完成光滑渲染；
输出光滑结果模块：片元着色器将热力点的灰度叠加处理结果输出至帧缓存中，再输出至共享纹理内存。
优选的，上述用户终端渲染模块还包括：
构建着色渲染模块：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将第二相机、第二几何体添加至第二场景中，并构建渐变色带纹理图；
着色渲染参数传入模块：根据需要从2D普通、3D、马赛克中选择一种渲染材质；通过uniforms纹理形式，将渐变色带纹理图、热力点的光滑处理结果传入着色器；
着色渲染模块：将热力点的顶点坐标由顶点着色器传递至片元着色器中处理，采用三角绘制模式完成着色渲染；
输出着色结果模块：片元着色器将热力点的用户终端处理结果输出至用户页面。
本发明提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述的热力图渲染方法的步骤。
本发明提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现如上的热力图渲染方法的步骤。
本方法发明的有益效果是：
1)本发明提出一种满足超大尺寸高精度大屏展示系统，以多种形式展示热力图效果；
2)本发明使用instanceGeometry,使用实例化渲染方式，大大减少渲染drawCall数量，大幅提高性能；
3)本发明原创性使用新的平滑函数，解决热力点叠加时边缘折痕迹现象，保证热力图光滑；
4)本发明采用二维、三维、马赛克点等多形式热力图绘制方案集成，且本发明建立的热力图能够满足大屏超大尺寸、高精度效果。
本发明附加的方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明实践了解到。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面所描述的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为现有技术的高斯函数示意图一；
图2为现有技术的高斯函数叠加剖面示意图二；
图3为现有技术的高斯函数叠加后热力图结果示意图三；
图4为本发明方法的热力图渲染方法流程示意图；
图5为本发明具体实施例渲染管线流程示意图；
图6为本发明具体实施例实例化模式示意图；
图7为本发明实施例光滑函数三维曲面示意图；
图8为本发明实施例光滑函数剖面曲线示意图；
图9本发明实施例灰度叠加剖面示意图；
图10本发明实施例灰度叠加后热力图结果示意图；
图11为本发明实施例终端页面渐变色色带生成示意图；
图12为本发明实施例最终渲染效果(2D)示意图一；
图13为本发明实施例最终渲染效果(3D)示意图二；
图14为本发明实施例最终渲染效果(马赛克)示意图三；
图15为本发明热力图渲染系统示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都应属于本发明保护的范围。
本发明旨在解决一种多种形式、高精度、高性能的热力图渲染方法，满足超大尺寸大屏系统中热力绘制需求，同时设计出一种新的光滑函数，使叠加结果更加光滑。
本发明解决上述技术问题的技术方案如下：如图4所示，本发明提供一种热力图渲染方法，所述方法包括：
热力点叠加渲染步骤S10：构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用实例化绘制模式在热力点叠加渲染管线中进行渲染，将热力点的热力值基于预设光滑函数进行渐变光滑处理，并采用离屏渲染技术，将热力点的灰度叠加结果缓存在共享纹理内存中；
用户终端渲染步骤S20：构建渐变色带纹理图，依据渲染需要选择不同的渲染材质，在用户终端渲染管线中基于渐变色带纹理图对热力点的灰度叠加结果进行渲染，并将最终的热力图处理结果输出至用户展示页面。
优选的，上述热力点叠加渲染步骤S10还包括：
构建光滑渲染步骤：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将第一相机、第一几何体添加至第一场景中；
光滑渲染参数传入步骤：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点热力值数据及热力点的旋转缩放平移矩阵作为顶点数据通过attributes形式传递至所述顶点着色器中；
光滑步骤：将绘制热力点的大小设置为预定尺寸，将热力数据经顶点着色器处理后传入片元着色器，在片元着色器中采用预设光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，并采用三角形绘制模式完成光滑渲染；
输出光滑结果步骤：片元着色器将热力点的灰度叠加处理结果输出至帧缓存中，再输出至共享纹理内存。
优选的，上述用户终端渲染步骤S20还包括：
构建着色渲染步骤：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将第二相机、第二几何体添加至第二场景中，并构建渐变色带纹理图；
着色渲染参数传入步骤：根据需要从2D普通、3D、马赛克中选择一种渲染材质；通过uniforms纹理形式，将渐变色带纹理图、热力点的光滑处理结果传入着色器；
着色渲染步骤：将热力点的顶点坐标由顶点着色器传递至片元着色器中处理，采用三角绘制模式完成着色渲染；
输出着色结果步骤：片元着色器将热力点的用户终端处理结果输出至用户页面。
优选的，上述着色渲染步骤进一步包括：
3D材质渲染步骤：将第二几何体进行3D几何体构造，并将灰度叠加结果传入顶点着色器，采样取出灰度叠加结果的alpha值作为起伏高度值，对几何体进行拉伸处理及投影后，实现几何体3D起伏效果，并在片元着色器中，完成渐变色带纹理图采样，实现3D材质着色；
马赛克材质渲染步骤：在所述片元着色器中，依据马赛克尺寸，计算马赛克UV坐标，从马赛克中心向边缘算出一个渐变比重系数，分别采用所述马赛克UV坐标及纹理坐标对所述渐变色带纹理图进行采样，并将两次采样结果使用所述比重系数进行混合处理，并将所述混合结果输出。
2D普通热力图材质渲染步骤：通过uniforms纹理形式，将所述渐变色带纹理图、所述热力点的光滑处理结果传入片元着色器，并通过attributes形式将热力点及所述热力点的坐标传入所述着色器，将纹理坐标以varyings形式从所述顶点着色器传递到所述片元着色器。,最终在片元着色器中，使用热力点叠加后光滑处理结果的alpha值构建采样坐标(alpha,0.5)，对渐变色进行着色采样，输出最终热力图结果。
优选的，上述预设光滑函数为：
其中z(x,y)为热力点光滑函数在平面点(x,y)对应高度值，x为所述热力点的横坐标轴，y为所述热力点的竖坐标轴，(x,y)为光滑函数的自变量。
以下结合附图对本发明具体实施例进行详细说明：
本发明使用的是WebGL直接构建热力点，对于大量热力点，具有相同几何体与材质、但具有不同世界变换的物体，本发明使用了实例化渲染方式(Instance Geometry)，有效减少drawCall的数量，从而提升应用程序的整体渲染性能。同时本发明使用离屏渲染技术，从热力点叠加渲染管线，输出结果存放在纹理内存中，而这将直接被另一渲染管线(用户终端渲染管线)直接使用，省去CPU-GPU之间传递过程，大大提升速度与效率。共用纹理内存及渲染管线流程图如图5所示。上半部分为热力点叠加渲染管线，下半部分为用户终端渲染管线，中间夹着共享的纹理内存。另外，本发明在热力点叠加渲染管线过程中，本发明构建的光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，完成多点叠加之后会更加光滑。
本发明具体步骤分以下二个过程：热力点灰度叠加、终端展示。
1、热力点灰度叠加
1.1数据准备，输入标准geojson格式数据，将其转换成[x,y,heatValue]形式，并同时计算出最大最小值。
1.2构建新的场景1、相机1、实例几何体(InstanceGeometry)、渲染材质1，构建渲染队列1，将相机1、几何体1添加至场景1中；
1.2.1创建实例几何体(InstanceGeometry)过程包括：
1.2.1.1先创建一个平面几何体(PlaneGeometry)；
1.2.1.2新建三维位置矢量(position)、四元数方位(orientation),三维缩放矢量(scale)、旋转缩放平移矩阵变量(instanceMatrix)，将热力点坐标信息赋值给position；将position、orientation、scale转换构造生成instanceMatrix。将热力点的热力值存放在heatValue数组中；
1.3从图形API(Application Programming Interface应用程序编程接口)入口，进入热力点叠加渲染管线，如图5，将热力点热力值数据(heatValue)、热力点的旋转缩放平移矩阵(instanceMatrix)作为顶点数据传入；
1.4渲染材质使用着色器材质，通过uniforms形式将圆半径值R，热力最大值(MaxHeatValue)、热力最小值(MinHeatValue)传入着色器；通过attributes形式将instanceMatrix、heatValue值传递至顶点着色器中；
1.5渲染管线中顶点着色器与片元着色器均为可编程着色器，程序员可对其进行编码操作；将绘制热力点的大小设置为2R，如图6所示；
1.6在顶点着色器中，将instanceMatrix左乘于热力点的局部坐标，再左乘投影、视图、模型矩阵，最后输出至gl_Position；使用varying将热力值heatValue从顶点着色器传递至片元着色器。
1.7顶点着色器中数据经过硬件处理，图元装配及光栅化(Rasterization)处理后传入片元着色器中
1.8片元着色器中，使用本发明构建的光滑函数对热力点的热力值由热力点中心向四周径向渐变光滑处理，完成多点叠加之后会更加光滑；
1.9片元着色器中，计算此热力值占介于热力最大值(MaxHeatValue)、热力最小值(MinHeatValue)的比重，将其乘于1.8过程的结果，将最终结果输出至gl_FragColor的alpha通道；
1.10本次渲染过程的绘制模式(drawMode)使用三角形绘制模式，使用实例化(instance)绘制方式；
1.11相机使用正交相机，左、右、下、上、近、远参数分别设置为-1,1,-1,1,0.01,2；相机位置放在几何体正上方，坐标为(0，1，0)；
1.12将渲染材质透明属性设置为真；
1.13片元着色器将最终的处理结果输出至帧缓存中，再输出至纹理内存，为下个渲染管线使用作准备。
2、终端界面展示
2.1构建新的场景2、相机2、几何体2、渲染材质2，构建渲染队列2
2.2构建渐变色带纹理图(colormap)，渐变色带纹理图是由canvas生成的一张纹理，宽为256，高为1，通过输入4个[0-1]值及相应的颜色，4个值分别为0，0.33，0.66，1.，对应颜色分别为：'rgb(0,0,255)'、'rgb(0,255,0)'、'rgb(255,255,0)'、'rgb(255,0,0)'，然后调用canvas的createLinearGradient、addColorStop函数，可生成对应渐变纹理图，过程如图11所示。
2.3渲染材质使用着色器材质，依据需要可选择不同材质进行渲染:
2.3.13D材质
2.3.1.1通过uniforms全局变量形式将上一渲染管线生成的结果(grayTexture)、渐变色带纹理图(colormap)以纹理形式传入，将是否透明(isOpacity)、透明值(opacityValue)以数值形式传入着色器。
2.3.1.2通过attributes形式将热力点坐标及此点对应坐标传入顶点着色器，顶点坐标再以varyings形式从顶点着色器传递至片元着色器，以备grayTexture及colormap采样时使用。
2.3.1.3对几何体2进行一定的细分操作，使其满足3D几何体构造需求；将1.12步骤中生成的灰度缓冲结果传入顶点着色器中，采样取出其alpha通道值，即为热力值叠加后的结果，将其进行一定的拉伸，加至局部坐标position的Z分量下，再将叠加之后的局部坐标左乘投影视图模型变换矩阵，最终输出至gl_Position中，实现几何体3D起伏效果。
2.3.1.4片元着色器中，对colormap、grayTexture分别进行采样；grayTexture采样得到其alpha值；colormap使用纹理坐标(alpha，0.5)，采样后得到最终显示颜色，透明度为alpha值与opacityValue乘积。
2.3.2马赛克材质
2.3.2.1渲染材质使用着色器材质，通过uniforms全局变量形式将上一渲染管线生成的结果(grayTexture)、渐变色带纹理图(colormap)以纹理形式传入，将是否透明(isOpacity)、透明值(opacityValue)纹理尺寸(texSize)马赛克尺寸(mosaicSize)以数值形式传入片元着色器。
2.3.2.2通过attributes形式将热力点坐标及此点对应坐标传入顶点着色器，纹理坐标(vUv)再以varyings形式从顶点着色器传递至片元着色器，以备grayTexture及colormap采样时使用。
2.3.2.3片元着色器中，首先依据马赛克尺寸，计算马赛克UV坐标(uvMosaic)；再从马赛克中心向边缘算出一个渐变比重percent；
2.3.2.4分别使用uvMosaic和vUv，对colormap进行采样，并将二者结果使用percent进行混合，将结果输出至gl_FragColor的rgb通道中。
2.3.2.5将上一步中uvMosaic采结果的alpha值乘于percent再乘于opacityValue，赋于gl_FragColor的alpha通道中。
2.3.32D普通热力图材质
2.3.3.1渲染材质使用着色器材质，通过uniforms全局变量形式将上一渲染管线生成的结果(grayTexture)、渐变色带纹理图(colormap)以纹理形式传入，将是否透明(isOpacity)、透明值(opacityValue)以数值形式传入片元着色器。
2.3.3.2通过attributes形式将热力点坐标及此点对应坐标传入顶点着色器，纹理坐标再以varyings形式从顶点着色器传递至片元着色器，以备grayTexture及colormap采样时使用，采样结果输出至gl_FragColor中。
2.4本次渲染过程的绘制模式(drawMode)使用三角绘制模式(TRIANGLE_STRIP)
2.5相机使用透视相机，近裁剪面为0.01，远裁剪面为10000，远裁剪面视口宽高比为屏幕宽高比，视场值为30；
2.6片元着色器将最终的处理结果输出至用户页面。
在构建绘制热力点过程中，通过绘制一个矩形面片(两个三角形)，然后从矩形中心构建内切圆，生成渐变辐射圆，如下图6所示。
片元着色器中，设置有圆中心向四周辐射，同时将热力值进行渐变，这样多点叠加之后会更加光滑，本发明使用一种新的平滑函数，方程如式1所示，方程满足二阶连续可导，边界点值为0，方程曲面及曲线剖面图分别如图7和图8所示，叠加前后均足够平滑，叠加后曲线如图9所示，粗线为叠加后的累加值，细线为单个热力点平滑函数曲线。相较于图3，本发明生成灰度叠加图，如图10所示，更加光滑。
其中z(x,y)为热力点光滑函数在平面点(x,y)对应高度值，x为所述热力点的横坐标轴，y为所述热力点的竖坐标轴，(x,y)为光滑函数的自变量。
更进一步地，将上一过程各渲染热力点叠加结果，以纹理形式传递至用户终端渲染管线，叠加后的热力值存放在纹理alpha通道。
终端页面渲染过程如下：构建终端渲染管线如图5下半部分所示，构建新的场景2、相机2、几何体2、渲染材质2，构建渲染队列2，最终将结果返回至用户展示页面(浏览器上)。这其中几何体使用三角面片，绘制模式(drawMode)使用三角绘制模式(TRIANGLE_STRIP)。相机使用透视相机，渲染材质使用着色器材质，通过uniforms形式将上一渲染管线生成结果grayTexture，渐变色带纹理图(colormap)、是否透明(isOpacity)、透明值(opacityValue)传入着色器，通过attributes形式将热力点坐标及此点对应坐标传入顶点着色器，纹理坐标再以varyings形式从顶点着色器传递至片元着色器。渲染材质混合模式设置为标准模式。
渐变色带纹理图(colormap)为canvas生成的一张纹理，宽为256，高为1，通过对外暴露接口，为用户提供最大灵活度。输入n(本次取n＝4)个[0-1]值及相应的颜色，然后调用canvas的createLinearGradient、addColorStop函数，可生成对应渐变纹理图，过程如图11所示。
最终渲染结果如图12-14所示，本结果适用于各种场景，纯web页面，数字园区，三维地球，尤其适用于二三维一体化，多形式大尺寸高精度大屏展示系统热力图效果。
本发明还提供一种热力图渲染系统，如图15所示，采用如上所述热力图渲染方法，系统包括：
热力点叠加渲染模块10：构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用实例化绘制模式在热力点叠加渲染管线中进行渲染，将热力点的热力值基于预设光滑函数进行渐变光滑处理，并采用离屏渲染技术，将热力点的灰度叠加结果缓存在共享纹理内存中；
用户终端渲染模块20：构建渐变色带纹理图，依据渲染需要选择不同的渲染材质，在用户终端渲染管线中基于渐变色带纹理图对热力点的灰度叠加结果进行渲染，并将最终的热力图处理结果输出至用户展示页面。
优选的，上述热力点叠加渲染模块10还包括：
构建光滑渲染模块：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将第一相机、第一几何体添加至第一场景中；
光滑渲染参数传入模块：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点热力值数据及热力点的旋转缩放平移矩阵作为顶点数据通过attributes形式传递至所述顶点着色器中；
光滑模块：将绘制热力点的大小设置为预定尺寸，将热力数据经顶点着色器处理后传入片元着色器，在片元着色器中采用预设光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，并采用三角形绘制模式完成光滑渲染；
输出光滑结果模块：片元着色器将热力点的灰度叠加处理结果输出至帧缓存中，再输出至共享纹理内存。
优选的，上述用户终端渲染模块20还包括：
构建着色渲染模块：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将第二相机、第二几何体添加至第二场景中，并构建渐变色带纹理图；
着色渲染参数传入模块：根据需要从二维、三维、马赛克中选择一种渲染材质；通过uniforms纹理形式，将渐变色带纹理图、热力点的光滑处理结果传入着色器。
着色渲染模块：将热力点的顶点坐标由顶点着色器传递至片元着色器中处理，采用三角绘制模式完成着色渲染；
输出着色结果模块：片元着色器将热力点的用户终端处理结果输出至用户页面。
本发明提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述的热力图渲染方法的步骤。
本发明提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上所述的热力图渲染方法的步骤。
与现有技术相比，本发明方法采用的：
1)使用instanceGeometry,使用实例化渲染方式，大大减少渲染drawCall数量，大幅提高性能；
2)原创性使用新的平滑函数，解决热力点叠加时边缘折痕迹现象，保证热力图光滑；
3)二维(2D)、三维在(3D)、马赛克点等多形式热力图绘制方案集成，且本发明建立的热力图能够满足大屏超大尺寸、高精度效果。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
在本发明所提供的实施例中，应该理解到，所揭露的系统/终端设备和方法，可以通过其它的方式实现。例如，以上所描述的系统/终端设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，系统或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。
基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或系统、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括是电载波信号和电信信号。
以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。
以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。
Claims (10)
1.一种热力图渲染方法，其特征在于，所述方法包括：
热力点叠加渲染步骤：构建待渲染模型及所述待渲染模型所需的多种资源，将所述待渲染模型采用实例化绘制模式在热力点叠加渲染管线中进行渲染，将所述热力点的热力值基于预设光滑函数进行渐变光滑处理，并采用离屏渲染技术，将所述热力点的灰度叠加结果缓存在共享纹理内存中；
用户终端渲染步骤：构建渐变色带纹理图，依据渲染需要选择不同的渲染材质，在用户终端渲染管线中基于所述渐变色带纹理图对所述热力点的灰度叠加结果进行渲染，并将最终的热力图处理结果输出至用户展示页面。
2.根据权利要求1所述热力图渲染方法，其特征在于，所述热力点叠加渲染步骤还包括：
构建光滑渲染步骤：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将所述第一相机、第一几何体添加至第一场景中；
光滑渲染参数传入步骤：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点热力值数据及热力点的旋转缩放平移矩阵作为顶点数据通过attributes形式传递至所述顶点着色器中；
光滑步骤：将绘制热力点的大小设置为预定尺寸，将所述热力数据经顶点着色器处理后传入片元着色器，在所述片元着色器中采用所述预设光滑函数对所述热力点的热力值由圆中心向四周径向渐变光滑处理，并采用三角形绘制模式完成光滑渲染；
输出光滑结果步骤：所述片元着色器将所述热力点的灰度叠加处理结果输出至帧缓存中，再输出至所述共享纹理内存。
3.根据权利要求1所述热力图渲染方法，其特征在于，所述用户终端渲染步骤还包括：
构建着色渲染步骤：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将所述第二相机、第二几何体添加至第二场景中，并构建所述渐变色带纹理图；
着色渲染参数传入步骤：根据需要从2D普通、3D、马赛克中选择一种渲染材质；通过uniforms纹理形式，将所述渐变色带纹理图、所述热力点的光滑处理结果传入着色器；
着色渲染步骤：将所述热力点的顶点坐标由所述顶点着色器传递至所述片元着色器中处理，采用三角绘制模式完成着色渲染；
输出着色结果步骤：所述片元着色器将所述热力点的用户终端处理结果输出至用户页面。
4.根据权利要求3所述热力图渲染方法，其特征在于，所述着色渲染步骤进一步包括：
3D材质渲染步骤：将第二几何体进行3D几何体构造，并将所述灰度叠加结果传入顶点着色器，采样取出灰度叠加结果的alpha值作为起伏高度值，并对几何体进行拉伸处理及投影后，实现几何体3D起伏效果，并在所述片元着色器中，完成渐变色带纹理图采样，实现3D材质着色；
马赛克材质渲染步骤：在所述片元着色器中，依据马赛克尺寸，计算马赛克UV坐标，从马赛克中心向边缘算出一个渐变比重系数，分别采用所述马赛克UV坐标及纹理坐标对所述渐变色带纹理图进行采样，并将两次采样结果使用所述比重系数进行混合处理，并将所述混合结果输出。
2D普通热力图材质渲染步骤：通过uniforms纹理形式，将所述渐变色带纹理图、所述热力点的光滑处理结果传入片元着色器，并通过attributes形式将热力点及所述热力点的坐标传入所述着色器，将纹理坐标以varyings形式从所述顶点着色器传递到所述片元着色器,最终在片元着色器中，使用热力点叠加后光滑处理结果的alpha值构建采样坐标(alpha,0.5)，对渐变色进行着色采样，输出最终热力图结果。
5.根据权利要求1所述热力图渲染方法，其特征在于，所述预设光滑函数为：
其中z(x,y)为热力点光滑函数在平面点(x,y)对应高度值，x为所述热力点的横坐标轴，y为所述热力点的竖坐标轴，(x,y)为光滑函数的自变量。
6.一种热力图渲染系统，采用如权利要求1-5中任意一项所述热力图渲染方法，其特征在于，所述系统包括：
热力点叠加渲染模块：构建待渲染模型及所述待渲染模型所需的多种资源，将所述待渲染模型采用实例化绘制模式在热力点叠加渲染管线中进行渲染，将所述热力点的热力值基于预设光滑函数进行渐变光滑处理，并采用离屏渲染技术，将所述热力点的灰度叠加结果缓存在共享纹理内存中；
用户终端渲染模块：构建渐变色带纹理图，依据渲染需要选择不同的渲染材质，在用户终端渲染管线中基于所述渐变色带纹理图对所述热力点的灰度叠加结果进行渲染，并将最终的热力图处理结果输出至用户展示页面。
7.根据权利要求6所述热力图渲染系统，其特征在于，所述热力点叠加渲染模块还包括：
构建光滑渲染模块：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将所述第一相机、第一几何体添加至第一场景中；
光滑渲染参数传入模块：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点热力值数据及热力点的旋转缩放平移矩阵作为顶点数据通过attributes形式传递至所述顶点着色器中；
光滑模块：将绘制热力点的大小设置为预定尺寸，将所述热力数据经顶点着色器处理后传入片元着色器，在所述片元着色器中采用所述预设光滑函数对所述热力点的热力值由圆中心向四周径向渐变光滑处理，并采用三角形绘制模式完成光滑渲染；
输出光滑结果模块：所述片元着色器将所述热力点的灰度叠加处理结果输出至帧缓存中，再输出至所述共享纹理内存。
8.根据权利要求6所述热力图渲染系统，其特征在于，所述用户终端渲染模块还包括：
构建着色渲染模块：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将所述第二相机、第二几何体添加至第二场景中，并构建所述渐变色带纹理图；
着色渲染参数传入模块：根据需要从2D普通、3D、马赛克中选择一种渲染材质；通过uniforms纹理形式，将所述渐变色带纹理图、所述热力点的光滑处理结果传入着色器；
着色渲染模块：将所述热力点的顶点坐标由所述顶点着色器传递至所述片元着色器中处理，采用三角绘制模式完成着色渲染；
输出着色结果模块：所述片元着色器将所述热力点的用户终端处理结果输出至用户页面。
9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-5中任一项所述热力图渲染方法的步骤。
10.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-5中任一项所述热力图渲染方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210507987.0A CN114937117A (zh) | 2022-05-10 | 2022-05-10 | 一种热力图渲染方法、系统、介质和设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210507987.0A CN114937117A (zh) | 2022-05-10 | 2022-05-10 | 一种热力图渲染方法、系统、介质和设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114937117A true CN114937117A (zh) | 2022-08-23 |
Family
ID=82863786
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210507987.0A Pending CN114937117A (zh) | 2022-05-10 | 2022-05-10 | 一种热力图渲染方法、系统、介质和设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114937117A (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107967702A (zh) * | 2017-10-20 | 2018-04-27 | 北京建筑大学 | 逆向渲染绘制的热力图可视化方法 |
| GB201907814D0 (en) * | 2019-05-31 | 2019-07-17 | Imagination Tech Ltd | Controlling rendering operations |
| CN110544290A (zh) * | 2019-09-06 | 2019-12-06 | 广东省城乡规划设计研究院 | 数据渲染方法及装置 |
| CN112750190A (zh) * | 2021-01-28 | 2021-05-04 | 腾讯科技（深圳）有限公司 | 三维热力图生成方法、装置、设备及存储介质 |
| CN113220748A (zh) * | 2021-05-21 | 2021-08-06 | 国网江苏省电力有限公司镇江供电分公司 | 一种构建配电网设备负荷热力图及数据分析的方法和系统 |
| WO2021248705A1 (zh) * | 2020-06-10 | 2021-12-16 | 完美世界(北京)软件科技发展有限公司 | 图像渲染方法、装置、计算机程序和可读介质 |
-
2022
- 2022-05-10 CN CN202210507987.0A patent/CN114937117A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107967702A (zh) * | 2017-10-20 | 2018-04-27 | 北京建筑大学 | 逆向渲染绘制的热力图可视化方法 |
| GB201907814D0 (en) * | 2019-05-31 | 2019-07-17 | Imagination Tech Ltd | Controlling rendering operations |
| CN110544290A (zh) * | 2019-09-06 | 2019-12-06 | 广东省城乡规划设计研究院 | 数据渲染方法及装置 |
| WO2021248705A1 (zh) * | 2020-06-10 | 2021-12-16 | 完美世界(北京)软件科技发展有限公司 | 图像渲染方法、装置、计算机程序和可读介质 |
| CN112750190A (zh) * | 2021-01-28 | 2021-05-04 | 腾讯科技（深圳）有限公司 | 三维热力图生成方法、装置、设备及存储介质 |
| CN113220748A (zh) * | 2021-05-21 | 2021-08-06 | 国网江苏省电力有限公司镇江供电分公司 | 一种构建配电网设备负荷热力图及数据分析的方法和系统 |
Non-Patent Citations (1)
| Title |
|---|
| 王胜开;徐志洁;张健钦;杜明义;: "逆向热力图的绘制方法", 地球信息科学学报, no. 04, 24 April 2018 (2018-04-24) * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8514238B2 (en) | System and method for adding vector textures to vector graphics images | |
| US11024077B2 (en) | Global illumination calculation method and apparatus | |
| US9747718B2 (en) | System, method, and computer program product for performing object-space shading | |
| CN110383337A (zh) | 可变速率着色 | |
| CN103677828B (zh) | 一种图层绘制方法、绘图引擎及终端设备 | |
| CN106204712B (zh) | 分段线性不规则光栅化 | |
| US7170527B2 (en) | Interactive horizon mapping | |
| US7714866B2 (en) | Rendering a simulated vector marker stroke | |
| CN112316420A (zh) | 模型渲染方法、装置、设备及存储介质 | |
| DE102015113240A1 (de) | System, verfahren und computerprogrammprodukt für schattierung unter verwendung eines dynamischen objektraumgitters | |
| US20070139408A1 (en) | Reflective image objects | |
| CN107392988A (zh) | 利用投影几何失真用于以可变采样率渲染的系统、方法和计算机程序产品 | |
| WO1996036011A1 (en) | Graphics system utilizing homogeneity values for depth for occlusion mapping and texture mapping | |
| US7777745B2 (en) | Edge effect | |
| CN111508053A (zh) | 模型的渲染方法、装置、电子设备及计算机可读介质 | |
| CN107392836A (zh) | 使用图形处理管线实现的立体多投影 | |
| Bruckner et al. | Hybrid visibility compositing and masking for illustrative rendering | |
| JP2005100176A (ja) | 画像処理装置およびその方法 | |
| RU2680355C1 (ru) | Способ и система удаления невидимых поверхностей трёхмерной сцены | |
| US7133052B1 (en) | Morph map based simulated real-time rendering | |
| US8669996B2 (en) | Image processing device and image processing method | |
| CN108230430A (zh) | 云层遮罩图的处理方法及装置 | |
| Jeschke et al. | Rendering surface details with diffusion curves | |
| CN115311395A (zh) | 三维场景渲染方法、装置及设备 | |
| CN114943797A (zh) | 基于WebGL大尺寸热力图渲染方法、系统、介质和设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |