CN108446384A - 一种基于WebGL的网络拓扑可视化系统及数据可视化方法 - Google Patents

Abstract

本发明提供了一种基于WebGL的网络拓扑可视化系统、数据可视化方法及计算机设备、计算机可读存储介质。所述系统包括：大规模网络拓扑可视化展示系统、数据中间层以及后端服务器；数据中间层为前端浏览器和后端服务器的中间连接部分，用于处理前后端的数据变化；所述数据中间层用于将所述后端服务器发送的数据经中间件进行数据处理、本地缓存及部分渲染，并根据所述前端浏览器的用户展示请求将缓存的部分或全部数据传送显示。本发明将Node.js作为中间件，提高了前后端沟通效率。并且，数据中间层构建本地缓存，并处理筛选数据并对部分进行提前渲染，缓解前端浏览器处理大量数据而造成负载过大屏幕抖动或白屏状况，避免渲染时间过长而造成无响应状况出现。

Description

一种基于WebGL的网络拓扑可视化系统及数据可视化方法

技术领域

本发明涉及数据可视化技术领域，尤其涉及一种基于WebGL的网络拓扑可视化系统、数据可视化方法及计算机设备、计算机可读存储介质。

背景技术

大数据时代背景之下，互联网飞速发展，产生大量数据信息，可视化技术将抽象的数据转化为直观的图形图像，利于用户更加方便直接地理解、探索大量数据信息以及其内部关联。可视化技术可以将数据和数据间联系清晰直观地反应出来，对于分析数据关系，评估和预测数据走向，认识数据的规律和发展变化有着重要辅助作用。

随着互联网行业的迅速发展，网络覆盖范围、功能和规模变大，大量的信息和数据，属性复杂，动辄几千上万的数据信息。数据传输、展示、变化，图像渲染效果和效率具有一定难度和复杂度。

同时，网络拓扑在网络信息管理、安全研究、性能分析方面具有相当重要、举足轻重的位置。能够解决研究拓扑模型，并将其与可视化技术相结合，解决大规模网络拓扑可视化的布局、交互、性能等问题显得至关重要。

Walrus是CAIDA机构下的一款Internet数据采集和分析的软件，用于在三维空间中交互式的大型可视化有向图。该工具由Java 3D API实现，兼容性较高，从技术上可以显示包含一百万个节点或更多节点图形。但是，JAVA 3D API虽然能够包含显示大量数据信息，但是并不适应动态数据变化。从原始数据数据结构来看，对数据结构和关系要求严格；总体而言，该工具的缺点在于java 3D技术，使得无法展示动态数据，而数据采取的算法较为单一，实际数据关系动态变化无法展示。

现有的WebGL三维模型显示方法及相应的Web-BIM工程信息集成管理系统使用了WebGL渲染机制，此款系统在WebGL机制下，将OBJ文件模型渲染到浏览器中。但是，此技术只是单纯使用WebGL渲染器作用，单一地渲染简单模型，与大规模网络拓扑可视化数据无关，并未涉及大规模可视化系统中数据传输、变化、通信等内容。

应该注意，上面对技术背景的介绍只是为了方便对本发明的技术方案进行清楚、完整的说明，并方便本领域技术人员的理解而阐述的。不能仅仅因为这些方案在本发明的背景技术部分进行了阐述而认为上述技术方案为本领域技术人员所公知。

发明内容

本发明提出一种基于WebGL的网络拓扑可视化系统及数据可视化方法，用于改善前后端数据交互和动态变化，改善实际前端渲染效果和渲染效率等问题。

为了达到上述目的，本发明实施例提供一种基于WebGL的网络拓扑可视化系统，包括：大规模网络拓扑可视化展示系统、数据中间层以及后端服务器；所述数据中间层为前端浏览器和所述后端服务器的中间连接部分，用于处理前后端的数据变化；所述数据中间层用于将所述后端服务器发送的数据经中间件进行数据处理、本地缓存及部分渲染，并根据所述前端浏览器的用户展示请求将缓存的部分或全部数据传送显示。

为了达到上述目的，本发明实施例还提供一种基于WebGL的数据可视化方法，包括：接收后端服务器发送的特征数据，所述特征数据为满足大规模网络拓扑可视化系统规定的数据格式和特征要求的数据；对接收到的数据进行分析处理，根据分析结果，对所述特征数据选择本地缓存或者提前渲染；接收用户展示请求，并根据所述用户展示请求对所述特征数据进行处理，将其部分或全部发送到大规模网络拓扑可视化展示系统，通过前端浏览器进行渲染或展示。

为了达到上述目的，本发明实施例还提供一种计算机可读存储介质，其上存储有计算机指令，所述指令被执行时实现上述基于WebGL的数据可视化方法的步骤。

为了达到上述目的，本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述基于WebGL的数据可视化方法的步骤。

本发明实施所提出的一种基于WebGL的网络拓扑可视化系统及数据可视化方法，数据中间层连接前端浏览器和后端服务器，将Node.js作为中间件，提高了前后端沟通效率。并且，中间件Node.js为后端服务器(JAVA)提供直接数据接口，使得后端和前端数据顺利传输。数据中间层构建本地缓存，并处理筛选数据并对部分进行提前渲染，缓解前端浏览器处理大量数据而造成负载过大屏幕抖动或白屏状况，避免渲染时间过长而造成无响应状况出现。并且，WebGL技术在可视化中具有优势，图形简洁美观，用户交互良好，解决了可视化系统大多无法与用户人工交互的问题，此数据传输处理模型的建立为大规模网络拓扑可视化系统增添动态模块，丰富大规模网络拓扑可视化功能。

参照后文的说明和附图，详细公开了本发明的特定实施方式，指明了本发明的原理可以被采用的方式。应该理解，本发明的实施方式在范围上并不因而受到限制。在所附权利要求的精神和条款的范围内，本发明的实施方式包括许多改变、修改和等同。

针对一种实施方式描述和/或示出的特征可以以相同或类似的方式在一个或更多个其它实施方式中使用，与其它实施方式中的特征相组合，或替代其它实施方式中的特征。

应该强调，术语“包括/包含”在本文使用时指特征、整件、步骤或组件的存在，但并不排除一个或更多个其它特征、整件、步骤或组件的存在或附加。

附图说明

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

图1为本发明实施例的基于WebGL的网络拓扑可视化系统的结构示意图；

图2为本发明实施例的基于WebGL的数据可视化方法的数据传输过程图；

图3为本发明实施例的基于WebGL的大规模网络拓扑可视化系统的数据传输实时流动图。

具体实施方式

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

本领域技术技术人员知道，本发明的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

下面参考本发明的若干代表性实施方式，详细阐释本发明的原理和精神。

在本发明中，需要理解的是：

WebGL：Web Graphics Library，Web图形库，是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型。

Node.js：是基于V8引擎和基于JavaScript的运行平台，使用事件驱动、非阻塞I/O模型，轻量而高效，非常适合在分布式设备上运行数据密集型的实时应用，既可以作为服务器端技术，又可作为前端JS技术。

本发明是一种基于WebGL的网络拓扑可视化系统及数据可视化方法，数据中间层使用Node.js连接前端浏览器和后端服务器，设计动态数据传输交互模型。中间件构建本地数据缓冲池，并对数据进行分析、处理、筛选。后台服务器的数据变化后传输到中间层，中间层进行处理之后，选择本地缓存或提前渲染，继而把结果渲染到前端。前端浏览器人工交互所得的指令和数据会推送到中间件，中间件处理结束后，将数据推送回后端服务器，并对本地缓存数据进行更新。

图1为本发明实施例的基于WebGL的网络拓扑可视化系统的结构示意图。如图1所示，包括：大规模网络拓扑可视化展示系统、数据中间层以及后端服务器。

所述数据中间层为前端浏览器和所述后端服务器的中间连接部分，用于处理前后端的数据变化。并且，数据中间层用于将所述后端服务器发送的数据经中间件进行数据处理、本地缓存及部分渲染，并根据所述前端浏览器的用户展示请求将缓存的部分或全部数据传送显示。

本实施例中，利用Node.js作为数据中间层设计动态数据传输、交互模型和缓冲池，处理前端数据，连接后端服务器数据，中间做缓冲池和进行数据分析处理。并且，数据中间层连接后台服务器数据变化，分析处理后，将结果渲染到前端，而前端的大规模网络拓可视化展示系统人工交互后的数据也会借助中间件处理返回后端服务器处理。Node.js作为中间件，支持实时数据传输和动态变化，也缓解前端浏览器处理大量数据而造成负载过大抖动或白屏状况。

本发明实施例中，所述前端浏览器的用户展示请求为前端浏览器的用户交互命令；所述前端浏览器的用户交互命令包括将所述数据中间层的缓存数据输出到前端浏览器渲染展示。

本发明实施例中，前端浏览器借助WebGL和JavaScript构建基本3D场景，渲染网络拓扑中所需的3D图形和物体，添加用于表示网络节点和链路的图形图形符号。通过具体混合布局算法，通过分层立体网络拓扑布局将其展示在欧几里得球体之中。基于WebGL的前端浏览器封装了OpenGL API，能够通过JavaScript实现3D功能，构建3D物体和场景，将传统Web页面元素与页面内3D图形和物体，进行无缝融合，将完整页面提供给用户。

本发明实施例中，前端浏览器利用WebGL技术模拟三维空间，创建三维场景。在2D平面中，将三维空间横、竖、景深等属性呈现。通过模型变换、视图变换、投影变换等方式，将3D物体展示出来。3D图形布局方式采用混合布局，根据网络节点权重，进行同一集群节点立体分层处理，同一集群内部继续采用有权重随机布局。

本发明实施例中，基于WebGL的大规模网络拓扑可视化展示系统，借助WebGL和JavaScript构建基本3D场景，绘制网络拓扑所需3D图形和物体，添加用于表达网络链路或节点的图形图像符号，且提供不同布局展示方法，根据用户交互选择，对大规模网络拓扑进行布局展示。并且，基于WebGL的大规模网络拓扑可视化系统中，数据中间层的构建能够使得数据传输更加高效，可视化效果展示更加用户友好和效率高。并且，大规模网络拓扑中加载的网络节点和链路数据量可达到万级别，整体全部放入可视界面会显得过分拥挤和杂乱。因而采取加载过程中全部渲染，而在显示过程中，合理展示，合理布局，这样对于可视化效果而言更加的有效和直观。

本发明实施例的基于WebGL的大规模网络拓扑可视化系统的数据传输处理方法中，数据流走向如下：

1、后台服务器数据流向中间处理层，中间处理层处理缓存；

2、中间处理层数据向前端推送，前端大规模网络拓扑可视化展示系统通过前端浏览器进行渲染显示；

3、前端交互命令向中间处理层/后台服务器调用数据，更新数据。

图2为本发明实施例的基于WebGL的数据可视化方法的数据传输过程图。如图所示，包括：

步骤S101，接收后端服务器发送的特征数据，所述特征数据为满足大规模网络拓扑可视化系统规定的数据格式和特征要求的数据；

步骤S102，对接收到的数据进行分析处理，根据分析结果，对所述特征数据选择本地缓存或者提前渲染；

步骤S103，接收用户展示请求，并根据所述用户展示请求对所述特征数据进行处理，将其部分或全部发送到大规模网络拓扑可视化展示系统，通过前端浏览器进行渲染或展示。

在本实施例中，所述用户展示请求为用户输入的命令；所述命令中包括指示将缓存的哪些数据输出到所述前端浏览器进行渲染展示。

其中，本实施例的基于WebGL的数据可视化方法还包括：将经所述前端人工交互后的数据传输到所述后端服务器进行处理。

可以看出，图2所示实施例的方法为数据中间层以Node.js为平台的处理过程，而本发明正是利用Node.js作为数据中间层设计动态数据传输、交互模型和缓冲池，支持实时数据传输和动态变化，也缓解前端浏览器处理大量数据而造成负载过大抖动或白屏状况。

图3为本发明实施例的基于WebGL的大规模网络拓扑可视化系统的数据传输实时流动图。如图3所示，包括：

用户发起数据流动请求，请求经过数据中间层，到达服务器端，服务器与数据中间层建立连接，开始整个数据循环监听流动过程。服务端向中间层发送数据，数据到达中间层，经筛选、处理、缓存后将数据推送到前端。前端解析后，渲染更新前端实际效果。前端接受USER交互指令，向后更新数据，更新数据到达中间层，进行解析处理，最后到达服务器，进行数据库更新。

本发明实施例还提供一种计算机可读存储介质，其上存储有计算机指令，所述指令被执行时实现上述基于WebGL的数据可视化系统数据传输处理方法的步骤。

本发明实施例还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述基于WebGL的数据可视化系统数据传输处理方法的步骤。

综上所述，本发明实施例所提出的基于WebGL的网络拓扑可视化系统及数据可视化方法，将Node.js作为数据中间层设计动态数据传输、交互模型和缓冲池，支持实时数据传输和动态变化，也缓解前端浏览器处理大量数据而造成负载过大抖动或白屏状况；并且，WebGL技术在可视化中具有优势，图形简洁美观，用户交互良好，解决了可视化系统大多无法与用户人工交互的问题，此数据传输处理模型的建立为大规模网络拓扑可视化系统增添动态模块，丰富大规模网络拓扑可视化功能。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种基于WebGL的网络拓扑可视化系统，其特征在于，包括：大规模网络拓扑可视化展示系统、数据中间层以及后端服务器；

所述数据中间层为前端浏览器和所述后端服务器的中间连接部分，用于处理前后端的数据变化；

所述数据中间层用于将所述后端服务器发送的数据经中间件进行数据处理、本地缓存及部分渲染，并根据所述前端浏览器的用户展示请求将缓存的部分或全部数据传送显示。

2.根据权利要求1所述的基于WebGL的网络拓扑可视化系统，其特征在于，所述前端浏览器的用户展示请求为前端浏览器的用户交互命令；

所述前端浏览器的用户交互命令包括将所述数据中间层的缓存数据输出到前端浏览器渲染展示。

3.根据权利要求1所述的基于WebGL的网络拓扑可视化系统，其特征在于，所述数据中间层还用于将经过所述大规模网络拓可视化展示系统人工交互后的数据传输到所述后端服务器进行其他处理。

4.根据权利要求1-3任一项所述的基于WebGL的网络拓扑可视化系统，其特征在于，所述大规模网络拓扑可视化展示系统，用于借助WebGL和JS构建视图场景，渲染网络拓扑中所需的图形和物体，添加表示网络节点和链路的图形图像符号，且提供不同布局展示方法，根据用户交互选择，对大规模网络拓扑进行布局展示。

5.一种基于WebGL的数据可视化方法，其特征在于，包括：

接收后端服务器发送的特征数据，所述特征数据为满足大规模网络拓扑可视化系统规定的数据格式和特征要求的数据；

对接收到的数据进行分析处理，根据分析结果，对所述特征数据选择本地缓存或者提前渲染；

接收用户展示请求，并根据所述用户展示请求对所述特征数据进行处理，将其部分或全部发送到大规模网络拓扑可视化展示系统，通过前端浏览器进行渲染或展示。

6.根据权利要求5所述的基于WebGL的数据可视化方法，其特征在于，所述用户展示请求为所述前端浏览器发出的用户交互命令；

所述用户交互命令包括将所述本地缓存的数据输出到所述前端浏览器渲染展示。

7.根据权利要求5所述的基于WebGL的数据可视化方法，其特征在于，所述对接收到的数据进行分析处理，根据分析结果，对所述特征数据选择本地缓存或者提前渲染，具体包括：

对所述后端服务器传送的特征数据进行清洗、整理、分析，并根据所述大规模网络拓可视化展示系统发出的用户需求进行筛选，本地缓存或提前渲染。

8.根据权利要求5-7任一项所述的基于WebGL的数据可视化方法，其特征在于，所述根据用户展示请求对所述特征数据进行处理，将其部分或全部发送到大规模网络拓扑可视化展示系统，通过前端浏览器进行渲染或展示，具体包括：

所述大规模网络拓扑可视化展示系统用于借助WebGL和JS构建视图场景，渲染网络拓扑中所需的图形和物体，添加表示网络节点和链路的图形图像符号，且提供不同布局展示方法，根据用户交互选择，对大规模网络拓扑进行布局展示。

9.一种计算机可读存储介质，其特征在于，其上存储有计算机指令，所述指令被执行时实现权利要求5-8任一项所述方法的步骤。

10.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求5-8任一项所述方法的步骤。