CN111080766B - 一种基于WebGL的GPU加速海量目标高效渲染方法 - Google Patents

Abstract

本发明提出一种基于WebGL的GPU加速海量目标高效渲染方法，包括如下步骤：步骤1、在主线程中，每隔一段时间将当前三维场景的范围通过PostMessage方法发送到WebWorker进程中；步骤2、WebWorker进程通过OnMessage方法获取到视图范围后发送数据请求到动标数据服务器，动标数据服务器根据查询结果返回当前批次的数据；步骤3、WebWorker进程在获取到数据后需要对数据进行比对分类处理，通过比对后，在每个目标数据的属性中添加一个状态属性Status；步骤4、数据分类处理完成后，WebWorker进程将本批次数据返回给主进程进行渲染，同时将上一批次的数据修改为当前请求返回的数据。

Description

一种基于WebGL的GPU加速海量目标高效渲染方法

技术领域

本发明涉及地理信息显示技术领域，尤其是一种基于WebGL的GPU加速海量目标高效渲染方法。

背景技术

无线通讯、空间定位和测量等技术的发展，使得人们对空间目标的信息管理由静态逐渐扩展到动态。特别是活动于现实三维空间的运动目标越来越受到关注。智能交通、电子战场、物流管理、移动电子商务、旅行者服务以及其它各类LBS服务都离不开高效的运动目标信息管理机制。随着三维GIS(地理信息系统)和虚拟现实技术的成熟，运动目标的信息管理也需要由原来的一维或二维扩展到三维。对运动目标的信息处理不仅涉及到空间属性，而且涉及到时间属性，因而相对复杂。作为一个地理空间数据的可视化软件，它所承载的数据量也是有限的，尤其是在面对海量的实时动态目标数据，为了解决大数据量的加载显示问题，通过动态调度技术实现数据的加载也显得越来越迫切。

Cesium是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。通过Cesium提供的JS API，可以实现全球级别的高精度的地形和影像服务、矢量以及模型数据、基于时态的数据可视化、多种场景模式(3D，2.5D以及2D场景)的支持，支持海量模型数据(倾斜，BIM，点云等)、地形影像、模型、倾斜、二三维场景与时态数据。Cesium平台提供Entity API来绘制空间数据，例如点、标记、标签、线、3D模型、形状、立体形状等。Entity对象接口如附图1所示。

一个Entity对象中包含多种类型的几何对象，如表1所示。

表1.Entity结构

在Ces ium平台中，动态目标对象可以采用EntityAPI接口进行加载。一个Entity对象对应一个动态目标对象。可以通过目标对象的distanceDisplayCondition属性实现每个几何类型在不同高度的显隐控制。多个Entity可以组织到一个CustomDataSource对象中，转换为一个目标图层，从而实现整个目标图层的控制。

Cesium平台提供了API接口，实现了动态目标数据的加载。但是由于Entity封装的对象中大多属性都是Property类型，在进行绘制时，都会实时监听对象每个属性是否变化，在数据量不大情况下，对数据的加载速度以及属性修改的实时相应效率较高。但是由于其在加载数据时，节点的所有属性信息都需要注册到监听函数中，在数据量不大的情况下，不影响加载效率。但是如果数据量很大，对于海量目标对象的加载显示，数据的加载显示调度性能就会受到极大影响，导致数据加载完成后场景严重卡顿等情况。通过对多批动态目标进行数据加载测试，动态目标加载数据量以及帧率情况如表2所示：

表2.Entity API添加目标对象

目标数量	目标(帧率)	目标+轨迹点(帧率)	目标+轨迹线(帧率)
				3000	40	34	33
5000	30	26	20
				8000	17	14	7
10000	13	11	4
				15000	3	5	2

发明内容

为了解决以上技术问题，本发明主要采用数据调度与数据渲染分离的思路，将WebWorker集成到系统中，采用异步方式开辟新的线程进行数据的请求、调度处理，从而避免了数据的处理调度对数据对象渲染线程的影响；同时，在渲染线程中，只对当前视图范围内的数据进行请求的加载，及时释放视图范围外的目标对象资源，从而减少了非视图范围外的数据对系统资源的消耗。最后采用GPU加速技术对当前范围内的目标对象进行高效绘制，最终实现海量动态目标的高效渲染。通过比较不同类型海量空间数据的可视化实验结果表明,本发明研究成果在渲染三维空间海量动态目标时,满足海量目标高性能可视化需求,可视化效果流畅。

本发明提出一种基于WebGL的GPU加速海量目标高效渲染方法，包括如下步骤：

步骤1、在主线程中，每隔一段时间将当前三维场景的范围通过PostMessage方法发送到WebWorker进程中；

步骤2、WebWorker进程通过OnMessage方法获取到视图范围后发送数据请求到动标数据服务器，动标数据服务器根据查询结果返回当前批次的数据；

步骤3、WebWorker进程在获取到数据后需要对数据进行比对分类处理，所述的分类处理将当前批次的数据和上一批次的数据进行比对，将比对结果分类为三种状态，即添加的数据、修改的数据、删除的数据；通过比对后，在每个目标数据的属性中添加一个状态属性Status；

步骤4、数据分类处理完成后，WebWorker进程将本批次数据返回给主进程进行渲染，同时将上一批次的数据修改为当前请求返回的数据。

所述步骤4中；

WebWorker进程返回数据后，在主线程中通过OnMessage获取数据，根据目标数据的状态属性Status调用目标类对象的方法进行更新，具体流程如下：

步骤1、Render函数为Camera对象的帧回调函数，在三维场景渲染的时候每一帧都会调用该方法，在目标类中，该Render函数为渲染的入口函数；

步骤2、当三维场景的范围大于阈值时，将目标对象进行分批次渲染；根据用户设置的渲染目标数量阈值，从渲染对象列表中筛选出当前帧绘制的目标对象；

步骤3、高度剔除；获取镜头高度，将当前渲染对象中不符合高度条件的对象从列表中剔除；

步骤4、范围剔除；根据当前视图范围，将视图范围外的目标对象删除；

步骤5、渲染目标，从符合条件的目标对象中根据状态属性Status值，获取需要增加的目标对象，初始化目标对象；

步骤6、更新目标；修改目标位置，更新目标的属性、样式信息；

步骤7、删除目标；从渲染队列中移除对象，释放资源。

有益效果：

本发明提供一种基于WebGL的GPU加速海量目标高效渲染方法新的调度显示方式，相比于现有技术，具有如下优点：

(1)采用批次处理方法，对海量目标进行分批次初始化，实现目标的高效加载，在前端有效的保证了三维场景的刷新率；

(2)采用高度剔除和范围剔除机制，利用GPU加速技术，对海量动态目标的动态实时绘制，提高动态目标的显示效率。

(3)通过WebWorker技术对海量动态目标进行异步调度和处理，将海量动态目标的调度处理分配到后台线程，将数据对象的渲染更新放到主线程中，并且在主线程中采用批次渲染、动态剔除(即高度剔除、范围剔除两者的结合)技术极大的减少单帧渲染的目标数量；

附图说明

图1：本发明数据处理线程工作流程；

图2：本发明动态目标渲染流程。

具体实施方式

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

WebWorker：JavaScript语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核CPU的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。Web Worker的作用，就是为JavaScript创造多线程环境，允许主线程创建Worker线程，将一些任务分配给后者运行。在主线程运行的同时，Worker线程在后台运行，两者互不干扰。等到Worker线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被Worker线程负担了，主线程(通常负责UI交互)就会很流畅，不会被阻塞或拖慢。Worker线程一旦新建成功，就会始终运行，不会被主线程上的活动(比如用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。但是，这也造成了Worker比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

GPU：又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备(如平板电脑、智能手机等)上图像运算工作的微处理器，GPU加速计算是指同时利用图形处理器(GPU)和CPU，加快科学、分析、工程、消费和应用程序的运行速度。因为GPU的特点特别适合于大规模并行运算,可以在高速的状态下分析海量的数据。

JavaScript本质上依然是单线程语言。Web Worker就是在JS单线程执行的基础上开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完之后再回到主线程上，在这个过程中不影响主线程的执行。本发明充分利用Web Worker的优势，将海量动态目标数据的调度、处理工作分配到Web Worker线程中，后台线程处理完后将结果数据通过Web Worker提供的PostMessage方法返回到主线程中。

WebGL(全写Web Graphics Library)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，是JavaScript和OpenGL ES 2.0的结合，是通过增加OpenGL ES 2.0的一个JavaScript绑定其本质上依然是单线程语言。这就导致在主线程中的任务都是阻塞的。web worker可以为JavaScript创建多线程，且webworker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。主线程在运行的时候，worker也在后台运行，两者互不干扰，当worker线程完成任务后就可以将结果返回给主线程。

因此，本发明充分利用Web Worker的优势，将海量动态目标数据的调度、处理工作分配到Web Worker线程中，主线程负责数据的渲染更新，极大的提高了海量数据的调度渲染的性能。

根据本发明的一个实施例，Web Worker数据处理线程工作流程如附图2所示。

参见附图1，根据本发明的一个实施例，发明提出的异步方式数据处理线程工作流程如下：

系统设定默认数据更新时间。

步骤1、在主线程中，每隔一段时间(默认1.5秒)将当前三维场景的范围通过PostMessage方法发送到WebWorker进程中；

步骤2、WebWorker进程通过OnMessage方法获取到视图范围后发送数据请求，动标数据服务器根据查询结果返回当前批次的数据。

步骤3、在获取到数据后需要对数据进行比对分类处理，分类处理主要是将当前批次的数据和上一批次的数据进行比对，将比对结果分为三种状态，即添加的数据、修改的数据、删除的数据。通过比对后，在每个目标数据的属性中添加一个状态属性Status。

步骤4、数据分类处理完成后，将本批次数据返回给主进程进行渲染，同时将上一批次的数据修改为当前请求返回的数据。

参见附图2，为本发明动态目标渲染的流程步骤。

数据调度线程利用WebWorker进程工作，WebWorker进程返回数据后，在主线程中通过OnMessage获取数据，根据数据的状态属性Status调用目标类对象的方法进行更新，具体流程如下：

步骤1、Render函数为Camera对象的帧回调函数，在三维场景渲染的时候每一帧都会调用该方法，在目标类中，该函数为渲染的入口函数；

步骤2、当三维范围场景较大时候，服务器返回的数据量较大，如果在一帧内初始化渲染所有目标对象的话，会导致系统性能下降，因次需要将目标对象进行分批次渲染。根据用户设置的渲染阈值，从渲染对象列表中筛选出当前帧绘制的目标对象。例如：用户加载10000个目标对象，设置的阈值是1000,那么系统在第一帧渲染的时候只会渲染1000个，在接下来的9帧中每帧渲染1000个。10000个目标分10帧渲染完成；

步骤3、高度剔除。获取镜头高度，将当前渲染对象中不符合高度条件的对象从列表中剔除。

步骤4、范围剔除。根据当前视图范围，将视图范围外的目标对象删除。例如，目标对象的位置不在当前三维场景中，则将该目标对象从渲染队列中移除。

步骤5、渲染目标。从符合条件的目标对象中根据状态属性Status值，获取需要增加的目标对象，初始化目标对象。

步骤6、更新目标。修改目标位置，更新目标的属性、样式等信息。

步骤7、删除目标。从渲染队列中移除对象，释放资源。

采用本发明设计的海量目标调度渲染机制实现的目标加载性能如表2所示。由表可以看出本发明所设计的数据调度渲染效率比传统的数据加载效率高。

目标数量	目标(帧率)	目标+轨迹点(帧率)	目标+轨迹线(帧率)
				3000	55	49	48
5000	45	41	35
				8000	33	31	29
10000	31	28	21
				15000	28	22	20

尽管上面对本发明说明性的具体实施方式进行了描述，以便于本技术领域的技术人员理解本发明，且应该清楚，本发明不限于具体实施方式的范围，对本技术领域的普通技术人员来讲，只要各种变化在所附的权利要求限定和确定的本发明的精神和范围内，这些变化是显而易见的，一切利用本发明构思的发明创造均在保护之列。

Claims (2)

1.一种基于WebGL的GPU加速海量目标高效渲染方法，其特征在于，包括如下步骤：

步骤1、在主线程中，每隔一段时间将当前三维场景的范围通过PostMessage方法发送到WebWorker进程中；

步骤2、WebWorker进程通过OnMessage方法获取到视图范围后发送数据请求到动标数据服务器，动标数据服务器根据查询结果返回当前批次的数据；

步骤3、WebWorker进程在获取到数据后需要对数据进行比对分类处理，所述的分类处理将当前批次的数据和上一批次的数据进行比对，将比对结果分类为三种状态，即添加的数据、修改的数据、删除的数据；通过比对后，在每个目标数据的属性中添加一个状态属性Status；

步骤4、数据分类处理完成后，WebWorker进程将本批次数据返回给主进程进行渲染，同时将上一批次的数据修改为当前请求返回的数据，WebWorker进程返回数据后，在主线程中通过OnMessage获取数据，根据目标数据的状态属性Status调用目标类对象的方法进行更新。

2.根据权利要求1所述的一种基于WebGL的GPU加速海量目标高效渲染方法，其特征在于：所述步骤4中；

WebWorker进程返回数据后，在主线程中通过OnMessage获取数据，根据目标数据的状态属性Status调用目标类对象的方法进行更新，具体流程如下：

步骤1、Render函数为Camera对象的帧回调函数，在三维场景渲染的时候每一帧都会调用该方法，在目标类中，该Render函数为渲染的入口函数；

步骤2、当三维场景的范围大于阈值时，将目标对象进行分批次渲染；根据用户设置的渲染目标数量阈值，从渲染对象列表中筛选出当前帧绘制的目标对象；

步骤3、高度剔除；获取镜头高度，将当前渲染对象中不符合高度条件的对象从列表中剔除；

步骤4、范围剔除；根据当前视图范围，将视图范围外的目标对象删除；

步骤5、渲染目标，从符合条件的目标对象中根据状态属性Status值，获取需要增加的目标对象，初始化目标对象；

步骤6、更新目标；修改目标位置，更新目标的属性、样式信息；

步骤7、删除目标；从渲染队列中移除对象，释放资源。