CN114943797A - 基于WebGL大尺寸热力图渲染方法、系统、介质和设备 - Google Patents

Abstract

本发明涉及一种基于WebGL大尺寸热力图渲染方法，该方法包括：热力点光滑渲染步骤：构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用点绘制模式在热力图叠加渲染管线中进行渲染，将热力点的热力值基于预设光滑函数进行渐变光滑处理，并将热力点的光滑结果缓存在共享纹理内存中；热力点着色渲染步骤：在热力图着色渲染管线中基于渐变色带纹理图对热力点的光滑结果进行渲染，并将热力点的着色结果缓存在共享纹理内存中；用户终端渲染步骤：将热力点的着色叠加结果以纹理形式传递至用户终端渲染管线中进行渲染处理，并将最终的热力图处理结果输出至用户展示页面。本发明还涉及基于WebGL大尺寸热力图渲染系统、介质和设备。

Description

基于WebGL大尺寸热力图渲染方法、系统、介质和设备

技术领域

本发明涉及热力图渲染技术领域，尤其涉及一种基于WebGL大尺寸热力图渲染方法、系统、介质和设备。

背景技术

目前，热力图已广泛应用于三维虚拟仿真技术中，用于直观表达多种类型数据，如：网页访问量的统计、区域人口密度、气体浓度、交通拥堵程度等等，其以图形色阶的方式展示相应的数据，为用户、科研人员提供科学明了的参考。现有技术，一般是基于画布(canvas)或WebGL生成绘制的；前者生成过程为：在canvas中对于单个点先绘制一个圆，用热力值从圆心向四周径向渐变填充，将多个点各自生成灰度圆进行叠加，得到了一张叠加灰度图；其后将叠加后的灰度图对应的canvas传递至图形展示系统(WebGL)，图形展示系统中结合底图，完成业务数据的热力图完美展示。此种方式热力图，计算与绘制速度相对较慢，对于超大尺寸大屏系统中，大尺寸高像素的热力图canvas，在上述传递过程中存在阻塞线程问题，数据越大，阻塞时间越长，从而造成展示系统页面卡顿现象，严重影响了用户的体验，无法满足交互操作。后一种技术使用WebGL进行绘制过程中，构建热力点辐射圆时，使用一个矩形区域，对矩形区域进行纹理绘制得到单点热力辐射圆，热力点从矩形中心向四周辐射，可得到圆形辐射圆，现有技术多采用线性插值方式，将热力值从中心向四周进行插值，得到渐变效果，而此种方式生成的辐射圆，在多个辐射圆进行叠加过程，会有明显不光滑痕迹，使得叠加后结果不够光滑；另一种插值方式使用高斯函数进行插值，高斯函数随着半径增大，无限近于0，而当对高斯函数在圆范围内进行截取时，圆的边缘值会是一个较小的值，不为0，此种方式在多个辐射圆进行叠加过程，在边缘处同样会有明显断层痕迹，使得叠加后结果不够光滑。

现有技术中目前存在以下问题：

1)对于大屏展示系统中，屏幕尺寸4096*4096，或者更大尺寸，以此尺寸构建的热力图，同时满足清晰度要求，现在技术无法满足流畅交互操作。原因如下：由canvas构建的纹理到最终的展示系统，有一个纹理传递过程，当尺寸过大，由canvas构建的热力点叠加图以纹理形式传递到WebGL显示系统，过大的纹理数据容易造成线程阻塞，从而导致页面卡顿现象，无法满足交互操作，具体如图1、图2所示；

2)另一方面，在构建绘制热力点过程中，现在技术大多数通过绘制一个矩形面片(两个三角形)，然后从矩形中心构建内切圆，生成渐变辐射圆，如图3所示；

3)现有技术中，渐变技术常用的有线性和高斯函数光滑。而线性函数和高斯函数在多个点叠加之后会出现值间断跳跃现象，导致曲线整体不光滑。

以高斯函数为例进行说明，正交相机投射范围左为-1，右为1，当从单点画布正中心绘制高斯函数，在边缘x＝-1及x＝1处，高斯函数的值为一个很小，但不为0的值，如图4所示，而当多个这样的函数叠加之后，这种微小跳跃的值将会累加，当累加到一定程度时，所绘制是热力就会出现很多折痕，造成不光滑现象，如图5、图6所示。当然，调整高斯函数σ参数，可将边界点无限趋近于0，然而，过大的σ值，造成高斯曲线变成了窄条形状，形成过陡曲线，从而形成的热力点过于集中于热力点中心，向四周扩散不足。线性函数及叠加后结果同理，如图7、图8所示，存在同样问题。

为解决现有技术中存在的问题，亟需研发提出一种满足超大尺寸的，高精度的热力图渲染方法，满足超大尺寸大屏系统中热力绘制需求，同时设计出一种新的光滑函数，使叠加结果更加光滑。

发明内容

本发明所要解决的技术问题是针对现有技术的不足，提供一种基于WebGL大尺寸热力图渲染方法、系统、介质和设备。

本发明解决上述技术问题的技术方案如下：一种基于WebGL大尺寸热力图渲染方法，所述方法包括：

热力点光滑渲染步骤：构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用点绘制模式在热力图叠加渲染管线中进行渲染，并将热力点的热力值基于预设光滑函数进行渐变光滑处理，并将热力点的光滑结果缓存在共享纹理内存中；

热力点着色渲染步骤：构建渐变色带纹理图，在热力图着色渲染管线中基于渐变色带纹理图对热力点的光滑结果进行渲染，并将热力点的着色结果缓存在共享纹理内存中；

用户终端渲染步骤：将热力点的着色叠加结果以纹理形式传递至用户终端渲染管线中进行渲染处理，并将最终的热力图处理结果输出至用户展示页面。

优选的，上述热力点光滑渲染步骤还包括：

构建光滑渲染步骤：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将第一相机、第一几何体添加至第一场景中；

光滑渲染参数传入步骤：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点数据作为顶点数据传入热力点叠加渲染管线中；

光滑步骤：将绘制热力点的大小设置为预定尺寸，将热力数据经顶点着色器处理后传入片元着色器，在片元着色器中采用预设光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，并采用点绘制模式完成光滑渲染；

输出光滑结果步骤：片元着色器将热力点的光滑处理结果输出至帧缓存中，再输出至共享纹理内存。

优选的，上述热力点着色渲染步骤还包括：

构建着色渲染步骤：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将第二相机、第二几何体添加至第二场景中，并构建渐变色带纹理图；

着色渲染参数传入步骤：通过uniforms以纹理形式，将渐变色带纹理图、热力点的光滑处理结果及多种渲染参数传入着色器；

着色渲染步骤：将热力点的顶点坐标由顶点着色器传递至片元着色器中处理，采用三角绘制模式完成着色渲染；

输出着色结果步骤：片元着色器将热力点的着色处理结果输出至帧缓存中，再输出至共享纹理内存。

优选的，上述用户终端渲染步骤包括：

构建终端渲染步骤：构建第三场景、第三相机、第三几何体、第三渲染材质，构建第三渲染队列；

终端渲染参数传入步骤：通过uniforms以纹理形式，将热力点的着色处理结果传入着色器；

终端渲染步骤：采用三角绘制模式完成用户终端渲染；

输出终端结果步骤：片元着色器将热力点的用户终端处理结果输出至用户页面。

优选的，上述预设光滑函数为：

其中a为热力点中心的坐标值，且a为任意实数，不同的热力点对应不同的a值；f(x)为热力点纵向剖面曲线，x为所述热力点的横坐标轴，为光滑函数的自变量，对某一热力点，f(x)表示沿横坐标x变化生成的光滑曲线。

本发明还提供一种基于WebGL大尺寸热力图渲染系统，采用如上所述基于WebGL大尺寸热力图渲染方法，系统包括：

热力点光滑渲染模块：用于构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用点绘制模式在热力图叠加渲染管线中进行渲染，并将热力点的热力值基于预设光滑函数进行渐变光滑处理，并将热力点的光滑结果缓存在共享纹理内存中；

热力点着色渲染模块：构建渐变色带纹理图，在热力图着色渲染管线中基于渐变色带纹理图对热力点的光滑结果进行渲染，并将热力点的着色结果缓存在共享纹理内存中；

用户终端渲染模块：将热力点的着色叠加结果以纹理形式传递至用户终端渲染管线中进行渲染处理，并将最终的热力图处理结果输出至用户展示页面。

优选的，上述热力点光滑渲染模块还包括：

构建光滑渲染模块：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将第一相机、第一几何体添加至第一场景中；

光滑渲染参数传入模块：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点数据作为顶点数据传入热力点叠加渲染管线中；

光滑模块：将绘制热力点的大小设置为预定尺寸，将热力数据经顶点着色器处理后传入片元着色器，在片元着色器中采用预设光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，并采用点绘制模式完成光滑渲染；

输出光滑结果模块：片元着色器将热力点的光滑处理结果输出至帧缓存中，再输出至共享纹理内存。

优选的，上述热力点着色渲染模块还包括：

构建着色渲染模块：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将第二相机、第二几何体添加至第二场景中，并构建渐变色带纹理图；

着色渲染参数传入模块：通过uniforms以纹理形式，将渐变色带纹理图、热力点的光滑处理结果及多种渲染参数传入着色器；

着色渲染模块：将热力点的顶点坐标由顶点着色器传递至片元着色器中处理，采用三角绘制模式完成着色渲染；

输出着色结果模块：片元着色器将热力点的着色处理结果输出至帧缓存中，再输出至共享纹理内存。

本发明提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述的基于WebGL大尺寸热力图渲染方法的步骤。

本发明提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现如上所述的基于WebGL大尺寸热力图渲染方法的步骤。

本方法发明的有益效果是：

1)本发明提出一种满足超大尺寸的，高精度的热力图渲染方法，满足超大尺寸大屏系统中热力绘制需求，同时提出一种新的光滑函数，使叠加结果更加光滑；

2)本发明构建的光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，完成多点叠加之后会更加光滑；

3)本发明采用的点绘制模式，将所有点合并，大大减少渲染drawCall数量，大幅提高性能；

4)本发明使用新的光滑函数，解决热力点叠加边缘折痕迹现象，保证热力图光滑。

本发明附加的方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明实践了解到。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面所描述的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为现有技术的纹理阻塞示意图一；

图2为现有技术的纹理阻塞示意图二；

图3为现有技术的绘制矩形面片示意图；

图4为现有技术的高斯函数示意图一；

图5为现有技术的高斯函数叠加示意图二；

图6为现有技术的高斯函数叠加示意图三；

图7为现有技术的线性函数示意图一；

图8为现有技术的线性函数叠加示意图二；

图9为本发明方法的基于WebGL大尺寸热力图渲染方法流程示意图；

图10为本发明具体实施例渲染管线流程示意图；

图11为本发明具体实施例点绘制模式示意图；

图12为本发明实施例光滑函数方程曲线示意图；

图13为本发明实施例叠加后曲线示意图；

图14本发明实施例灰度叠加图示意图；

图15为本发明实施例终端页面渲染不透明方式示意图；

图16为本发明实施例终端页面渲染透明方式示意图；

图17为本发明实施例终端页面控制透明程度示意图；

图18为本发明实施例渐变色带纹理图示意图；

图19为本发明实施例超大尺寸屏幕展示系统示意图；

图20为本发明基于WebGL大尺寸热力图渲染系统示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都应属于本发明保护的范围。

本发明旨在解决一种满足超大尺寸的，高精度的热力图渲染方法，满足超大尺寸大屏系统中热力绘制需求，同时设计出一种新的光滑函数，使叠加结果更加光滑。

本发明解决上述技术问题的技术方案如下：如图9所示，一种基于WebGL大尺寸热力图渲染方法，所述方法包括：

热力点光滑渲染步骤S10：构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用点绘制模式在热力图叠加渲染管线中进行渲染，并将热力点的热力值基于预设光滑函数进行渐变光滑处理，并将热力点的光滑结果缓存在共享纹理内存中；

热力点着色渲染步骤S20：构建渐变色带纹理图，在热力图着色渲染管线中基于渐变色带纹理图对热力点的光滑结果进行渲染，并将热力点的着色结果缓存在共享纹理内存中；

用户终端渲染步骤S30：将热力点的着色叠加结果以纹理形式传递至用户终端渲染管线中进行渲染处理，并将最终的热力图处理结果输出至用户展示页面。

优选的，上述热力点光滑渲染步骤S10还包括：

构建光滑渲染步骤：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将第一相机、第一几何体添加至第一场景中；

光滑渲染参数传入步骤：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点数据作为顶点数据传入热力点叠加渲染管线中；

光滑步骤：将绘制热力点的大小设置为预定尺寸，将热力数据经顶点着色器处理后传入片元着色器，在片元着色器中采用预设光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，并采用点绘制模式完成光滑渲染；

输出光滑结果步骤：片元着色器将热力点的光滑处理结果输出至帧缓存中，再输出至共享纹理内存。

优选的，上述热力点着色渲染步骤S20还包括：

构建着色渲染步骤：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将第二相机、第二几何体添加至第二场景中，并构建渐变色带纹理图；

着色渲染参数传入步骤：通过uniforms以纹理形式，将渐变色带纹理图、热力点的光滑处理结果及多种渲染参数传入着色器；

着色渲染步骤：将热力点的顶点坐标由顶点着色器传递至片元着色器中处理，采用三角绘制模式完成着色渲染；

输出着色结果步骤：片元着色器将热力点的着色处理结果输出至帧缓存中，再输出至共享纹理内存。

优选的，上述用户终端渲染步骤S30包括：

构建终端渲染步骤：构建第三场景、第三相机、第三几何体、第三渲染材质，构建第三渲染队列；

终端渲染参数传入步骤：通过uniforms以纹理形式，将热力点的着色处理结果传入着色器；

终端渲染步骤：采用三角绘制模式完成用户终端渲染；

输出终端结果步骤：片元着色器将热力点的用户终端处理结果输出至用户页面。

优选的，上述预设光滑函数为：

其中a为热力点中心的坐标值，且a为任意实数，不同的热力点对应不同的a值；f(x)为热力点纵向剖面曲线，x为所述热力点的横坐标轴，为光滑函数的自变量，对某一热力点，f(x)表示沿横坐标x变化生成的光滑曲线。

以下结合附图对本发明具体实施例进行详细说明：

本发明实施例使用的是WebGL直接构建热力点，然后将多个热力点热力值进行光滑叠加，整个过程在热力点叠加渲染管线中进行，输出结果存放在纹理内存中，而这将被另一渲染管线(用户终端渲染管线)直接使用，省去前文提及CPU至GPU传递过程，大大提升速度与效率。共用纹理内存及渲染管线流程图如图10所示。从上至下依次为热力点叠加渲染管线、热力图着色渲染管线、用户终端渲染管线，渲染管线之间由共享的纹理内存连接。

1、热力点的热力值叠加

1.1热力点数据准备，以[x,y,heatValue]形式整理；

1.2构建新的场景1、相机1、几何体1、渲染材质1，构建渲染队列1，将相机1、几何体1添加至场景1中；

1.3从图形API(Application Programming Interface应用程序编程接口)入口，进入热力点叠加渲染管线，如图10，将热力点数据作为顶点数据传入；

1.4渲染材质使用着色器材质，通过uniforms形式将最大透明度值(MaxOpacity)、最小透明度值(MinOpacity)、圆半径值R，热力最大值(MaxHeatValue)、热力最小值(MinHeatValue)传入着色器；

1.5渲染管线中顶点着色器与片元着色器均为可编程着色器，程序员可对其进行编码操作；将绘制热力点的大小设置为2R，如图11所示；

1.6顶点着色器中数据经过硬件处理，图元装配及光栅化(Rasterization)处理后传入片元着色器中；

1.7片元着色器中，使用本发明构建的光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，完成多点叠加之后会更加光滑；

1.8本次渲染过程的绘制模式(drawMode)使用点绘制模式；

1.9相机使用正交相机，左、右、下、上、近、远参数分别设置为-1,1,-1,1,0.1,2；相机位置放在几何体正上方，坐标为(0，1，0)；

1.10将渲染材质颜色混合(Color Blending)模式设置为叠加模式，其透明属性设置为真；

1.11片元着色器将最终的处理结果输出至帧缓存中，再输出至纹理内存，为下个渲染管线使用作准备。

2、热力点的着色

2.1构建新的场景2、相机2、几何体2、渲染材质2，构建渲染队列2，相机2几何体2加至场景2中；

2.2构建渐变色带纹理图(colormap)，渐变色带纹理图是由canvas生成的一张纹理，宽为256，高为1，通过输入n(本次取n＝5)个[0-1]值及相应的颜色，然后使用canvas的createLinearGradient、addColorStop功能，即可生成对应渐变纹理图，过程如图18所示。

2.3渲染材质使用着色器材质，通过uniforms全局变量形式将上一渲染管线生成的结果(grayTexture)、渐变色带纹理图(colormap)以纹理形式传入，将是否透明(isOpacity)、透明值(opacityValue)以数值形式传入着色器。

2.4通过attributes形式将热力点坐标及此点对应坐标传入着色器，顶点坐标再以varyings形式从顶点着色器传递至片元着色器，以备grayTexture及colormap采样时使用。

2.5本次渲染过程的绘制模式(drawMode)使用三角绘制模式(TRIANGLE_STRIP)；

2.6相机使用正交相机，左、右、下、上、近、远参数分别设置为-1,1,-1,1,0.1,2；相机位置放在几何体正上方，坐标为(0，1，0)；

2.7片元着色器将最终的处理结果输出至帧缓存中，再输出至纹理内存，为下个渲染管线使用作准备。

3、用户界面热力图展示

3.1构建新的场景3、相机3、几何体3、渲染材质3，构建渲染队列3；

3.2渲染材质使用着色器材质，通过uniforms全局变量形式将步骤2渲染管线生成结果(heatTexture)以纹理形式传入着色器。

3.3本次渲染过程的绘制模式(drawMode)使用三角绘制模式(TRIANGLE_STRIP)；

3.4相机使用透视相机，近裁剪面为0.01，远裁剪面为10000，远裁剪面视口宽高比为屏幕宽高比，视角值为30；

3.5片元着色器将最终的处理结果输出至用户页面。

热力点渲染过程如下：构建热力点叠加渲染管线如图10所示，构建新的场景1、相机1、几何体1、渲染材质1，构建渲染队列1，最终将结果缓存在纹理内存中。这其中几何体使用点，绘制模式(drawMode)使用点绘制模式，如图11所示，并将点的大小设置为2R，在顶点着色器中设置gl_PointSize等于2R；相机使用正交相机，左、右、下、上、近、远参数分别设置为-1,1,-1,1,0.1,2；相机位置放在几何体正上方，坐标为(0，1，0)；渲染材质使用着色器材质，通过uniforms形式将最大透明度值(MaxOpacity)、最小透明度值(MinOpacity)、圆半径值R，热力最大值(MaxHeatValue)、热力最小值(MinHeatValue)传入着色器，通过attributes形式将热力点坐标及此点对应热力值传入着色器，热力值再以varyings形式从顶点着色器传递至片元着色器。渲染材质混合模式设置为叠加模式，其透明属性设置为真。

片元着色器中，设置有圆中心向四周辐射，同时将热力值进行渐变，这样多点叠加之后会更加光滑，本发明使用一种新的光滑函数，方程如式(1)所示，边界点值为0，方程曲线如图12所示，叠加前后均足够光滑，叠加后曲线如图13所示，加粗线为叠加后的累加值，细线为单个热力点光滑函数曲线。与图6(现有技术)进行对比，本发明生成灰度叠加图，如图14所示，更加光滑。

其中a为热力点中心的坐标值，且a为任意实数，不同的热力点对应不同的a值；f(x)为热力点纵向剖面曲线，x为所述热力点的横坐标轴，为光滑函数的自变量，对某一热力点，f(x)表示沿横坐标x变化生成的光滑曲线。

本发明使用点绘制模式，因无需对这些点进行单独操作，将所有点几何对象(geometry)合并为一个geometry，可将合并所有点当作一个物体来渲染，从而大大减少drawCall数量，因而也将大幅提升性能。假设存在1万个点，合并前后drawCall数量为10000：1，对比效果显而易见。

另一方面，相较于现在技术使用的面片技术，一个方形面片4个点坐标数据，4个索引数据，相较于点绘制模式下仅1个点坐标数据，本发明使用点绘制模式也有明显的优势。

更进一步地，将上一过各渲染热力点叠加结果，以纹理形式传递至用户终端渲染管线，叠加后的热力值存放在纹理alpha通道。

终端页面渲染过程如下：构建终端渲染管线如图10下部分所示，构建新的场景3、相机3、几何体3、渲染材质3，构建渲染队列3，最终将结果返回至用户展示页面(浏览器上)。这其中几何体使用三角面片，绘制模式(drawMode)使用三角绘制模式(TRIANGLE_STRIP)即：一系列三角形连接在一个条上，由(v0，v1，v2)，(v2，v1，v3)，(v2，v3，v4)。因此，每个后续三角形与前一个三角形共享两个顶点；相机使用透视相机，渲染材质使用着色器材质，通过uniforms形式将上一渲染管线生成结果grayTexture，渐变色带纹理图(colormap)、是否透明(isOpacity)、透明值(opacityValue)传入着色器，通过attributes形式将热力点坐标及此点对应坐标传入着色器，坐标再以varyings形式从顶点着色器传递至片元着色器。渲染材质混合模式设置为标准模式。

其中变量是否透明(isOpacity)值用于控制grayTexture结果为0值情况下的显示模式，isOpacity为真时，以透明方式显式，如图16所示，否则以不透明方式显示如图15所示；opacityValue值用于控制整体热力图的透明度程度，取值范围为[0-1]，值越小，越透明，结果如图17所示。

渐变色带纹理图(colormap)为canvas生成的一张纹理，宽为256，高为1，通过对外暴露接口，为用户提供最大灵活度。输入n(本次取n＝5)个[0-1]值及相应的颜色，然后使用canvas的createLinearGradient、addColorStop功能，即可生成对应渐变纹理图，过程如图18所示。

最终渲染结果如图15-17所示，本结果适用于各种场景，纯web页面，数字园区，三维地球，尤其适用于超大尺寸大屏展示系统，如图19所示，满足高晰度、高性能交互操作热力图效果。

本发明还提供一种基于WebGL大尺寸热力图渲染系统，如图20所示，采用如上所述基于WebGL大尺寸热力图渲染方法，系统包括：

热力点光滑渲染模块10：用于构建待渲染模型及待渲染模型所需的多种资源，将待渲染模型采用点绘制模式在热力图叠加渲染管线中进行渲染，并将热力点的热力值基于预设光滑函数进行渐变光滑处理，并将热力点的光滑结果缓存在共享纹理内存中；

热力点着色渲染模块20：构建渐变色带纹理图，在热力图着色渲染管线中基于渐变色带纹理图对热力点的光滑结果进行渲染，并将热力点的着色结果缓存在共享纹理内存中；

用户终端渲染模块30：将热力点的着色叠加结果以纹理形式传递至用户终端渲染管线中进行渲染处理，并将最终的热力图处理结果输出至用户展示页面。

优选的，上述热力点光滑渲染模块10还包括：

构建光滑渲染模块：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将第一相机、第一几何体添加至第一场景中；

光滑渲染参数传入模块：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点数据作为顶点数据传入热力点叠加渲染管线中；

光滑模块：将绘制热力点的大小设置为预定尺寸，将热力数据经顶点着色器处理后传入片元着色器，在片元着色器中采用预设光滑函数对热力点的热力值由圆中心向四周径向渐变光滑处理，并采用点绘制模式完成光滑渲染；

输出光滑结果模块：片元着色器将热力点的光滑处理结果输出至帧缓存中，再输出至共享纹理内存。

优选的，上述热力点着色渲染模块20还包括：

构建着色渲染模块：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将第二相机、第二几何体添加至第二场景中，并构建渐变色带纹理图；

着色渲染参数传入模块：通过uniforms以纹理形式，将渐变色带纹理图、热力点的光滑处理结果及多种渲染参数传入着色器；

着色渲染模块：将热力点的顶点坐标由顶点着色器传递至片元着色器中处理，采用三角绘制模式完成着色渲染；

输出着色结果模块：片元着色器将热力点的着色处理结果输出至帧缓存中，再输出至共享纹理内存。

本发明提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述的基于WebGL大尺寸热力图渲染方法的步骤。

本发明提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上所述的基于WebGL大尺寸热力图渲染方法的步骤。

与现有技术相比，本发明方法采用的：

1、点绘制模式，将所有点合并，大大减少渲染drawCall数量，大幅提高性能

2、原创性使用新的光滑函数，解决热力点叠加边缘折痕迹现象，保证热力图光滑

3、多种技术优化结合，使得本发明建立的热力图能够满足大屏超大尺寸、高晰度、高性能交互操作效果。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

在本发明所提供的实施例中，应该理解到，所揭露的系统/终端设备和方法，可以通过其它的方式实现。例如，以上所描述的系统/终端设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，系统或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。

基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或系统、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括是电载波信号和电信信号。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种基于WebGL大尺寸热力图渲染方法，其特征在于，所述方法包括：

热力点光滑渲染步骤：构建待渲染模型及所述待渲染模型所需的多种资源，将所述待渲染模型采用点绘制模式在热力图叠加渲染管线中进行渲染，并将所述热力点的热力值基于预设光滑函数进行渐变光滑处理，并将所述热力点的光滑结果缓存在共享纹理内存中；

热力点着色渲染步骤：构建渐变色带纹理图，在热力图着色渲染管线中基于所述渐变色带纹理图对所述热力点的光滑结果进行渲染，并将所述热力点的着色结果缓存在所述共享纹理内存中；

用户终端渲染步骤：将所述热力点的着色叠加结果以纹理形式传递至所述用户终端渲染管线中进行渲染处理，并将最终的热力图处理结果输出至用户展示页面。

2.根据权利要求1所述基于WebGL大尺寸热力图渲染方法，其特征在于，所述热力点光滑渲染步骤还包括：

构建光滑渲染步骤：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将所述第一相机、第一几何体添加至第一场景中；

光滑渲染参数传入步骤：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点数据作为顶点数据传入所述热力点叠加渲染管线中；

光滑步骤：将绘制热力点的大小设置为预定尺寸，将所述热力数据经顶点着色器处理后传入片元着色器，在所述片元着色器中采用所述预设光滑函数对所述热力点的热力值由圆中心向四周径向渐变光滑处理，并采用点绘制模式完成光滑渲染；

输出光滑结果步骤：所述片元着色器将所述热力点的光滑处理结果输出至帧缓存中，再输出至所述共享纹理内存。

3.根据权利要求1所述基于WebGL大尺寸热力图渲染方法，其特征在于，所述热力点着色渲染步骤还包括：

构建着色渲染步骤：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将所述第二相机、第二几何体添加至第二场景中，并构建所述渐变色带纹理图；

着色渲染参数传入步骤：通过uniforms以纹理形式，将所述渐变色带纹理图、所述热力点的光滑处理结果及多种渲染参数传入着色器；

着色渲染步骤：将所述热力点的顶点坐标由所述顶点着色器传递至所述片元着色器中处理，采用三角绘制模式完成着色渲染；

输出着色结果步骤：所述片元着色器将所述热力点的着色处理结果输出至帧缓存中，再输出至所述共享纹理内存。

4.根据权利要求1所述基于WebGL大尺寸热力图渲染方法，其特征在于，所述用户终端渲染步骤包括：

构建终端渲染步骤：构建第三场景、第三相机、第三几何体、第三渲染材质，构建第三渲染队列；

终端渲染参数传入步骤：通过uniforms以纹理形式，将所述热力点的着色处理结果传入着色器；

终端渲染步骤：采用三角绘制模式完成用户终端渲染；

输出终端结果步骤：所述片元着色器将所述热力点的用户终端处理结果输出至用户页面。

5.根据权利要求1所述基于WebGL大尺寸热力图渲染方法，其特征在于，所述预设光滑函数为：

其中a为热力点中心的坐标值，且a为任意实数，不同的热力点对应不同的a值；f(x)为热力点纵向剖面曲线，x为所述热力点的横坐标轴，为光滑函数的自变量，对某一热力点，f(x)表示沿横坐标x变化生成的光滑曲线。

6.一种基于WebGL大尺寸热力图渲染系统，采用如权利要求1-5中任意一项所述基于WebGL大尺寸热力图渲染方法，其特征在于，所述系统包括：

热力点光滑渲染模块：用于构建待渲染模型及所述待渲染模型所需的多种资源，将所述待渲染模型采用点绘制模式在热力图叠加渲染管线中进行渲染，并将所述热力点的热力值基于预设光滑函数进行渐变光滑处理，并将所述热力点的光滑结果缓存在共享纹理内存中；

热力点着色渲染模块：构建渐变色带纹理图，在热力图着色渲染管线中基于所述渐变色带纹理图对所述热力点的光滑结果进行渲染，并将所述热力点的着色结果缓存在所述共享纹理内存中；

用户终端渲染模块：将所述热力点的着色叠加结果以纹理形式传递至所述用户终端渲染管线中进行渲染处理，并将最终的热力图处理结果输出至用户展示页面。

7.根据权利要求6所述基于WebGL大尺寸热力图渲染系统，其特征在于，所述热力点光滑渲染模块还包括：

构建光滑渲染模块：热力点数据准备，并构建第一场景、第一相机、第一几何体、第一渲染材质，构建第一渲染队列，将所述第一相机、第一几何体添加至第一场景中；

光滑渲染参数传入模块：将渲染材质所需的多种参数通过uniforms形式传入着色器，将热力点数据作为顶点数据传入所述热力点叠加渲染管线中；

光滑模块：将绘制热力点的大小设置为预定尺寸，将所述热力数据经顶点着色器处理后传入片元着色器，在所述片元着色器中采用所述预设光滑函数对所述热力点的热力值由圆中心向四周径向渐变光滑处理，并采用点绘制模式完成光滑渲染；

输出光滑结果模块：所述片元着色器将所述热力点的光滑处理结果输出至帧缓存中，再输出至所述共享纹理内存。

8.根据权利要求1所述基于WebGL大尺寸热力图渲染系统，其特征在于，所述热力点着色渲染模块还包括：

构建着色渲染模块：构建第二场景、第二相机、第二几何体、第二渲染材质，构建第二渲染队列，将所述第二相机、第二几何体添加至第二场景中，并构建所述渐变色带纹理图；

着色渲染参数传入模块：通过uniforms以纹理形式，将所述渐变色带纹理图、所述热力点的光滑处理结果及多种渲染参数传入着色器；

着色渲染模块：将所述热力点的顶点坐标由所述顶点着色器传递至所述片元着色器中处理，采用三角绘制模式完成着色渲染；

输出着色结果模块：所述片元着色器将所述热力点的着色处理结果输出至帧缓存中，再输出至所述共享纹理内存。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-5中任一项所述基于WebGL大尺寸热力图渲染方法的步骤。

10.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-5中任一项所述基于WebGL大尺寸热力图渲染方法的步骤。

Images