CN111599011B

CN111599011B - 基于WebGL技术的电力系统场景快速构建方法及系统

Info

Publication number: CN111599011B
Application number: CN202010679873.5A
Authority: CN
Inventors: 司为国; 李颖毅; 钱啸; 叶刚进; 杨翾; 章姝俊; 李榛; 商佳宜; 陈致远; 黄超; 包胜; 苏文银; 郑亚敏; 张志鹏; 李飞
Original assignee: XIAMEN GREAT POWER GEO INFORMATION TECHNOLOGY CO LTD; State Grid Zhejiang Electric Power Co Ltd; Hangzhou Power Equipment Manufacturing Co Ltd; Hangzhou Power Supply Co of State Grid Zhejiang Electric Power Co Ltd
Current assignee: XIAMEN GREAT POWER GEO INFORMATION TECHNOLOGY CO LTD; State Grid Zhejiang Electric Power Co Ltd; Hangzhou Power Equipment Manufacturing Co Ltd; Hangzhou Power Supply Co of State Grid Zhejiang Electric Power Co Ltd
Priority date: 2020-07-15
Filing date: 2020-07-15
Publication date: 2023-08-04
Anticipated expiration: 2040-07-15
Also published as: CN111599011A

Abstract

本发明涉及三维建模领域，尤其涉及一种基于WebGL技术的电力系统场景快速构建方法及系统，包括：获取待建模对象的数据；取其中一个面的一个点作为参考点，其余面的点根据参考点转换成相对坐标；根据相对坐标生成对应的待建模对象的轮廓；通过WebGL技术进行矩阵转换，将各个相对坐标的颜色信息与待建模对象位置信息做绑定；根据各个相对坐标对应的颜色将模型渲染并显示。通过使用本发明，可以实现对电力系统场景快速构建三维模型。

Description

基于WebGL技术的电力系统场景快速构建方法及系统

技术领域

本发明涉及三维建模领域，尤其涉及一种基于WebGL技术的电力系统场景快速构建方法及系统。

背景技术

目前在电力系统中对于电网设备等信息的展示功能应用的主要是基于二维的系数，一般用点状或线状等抽象符号表达电力设备，无法直观地显示设备本身的机构和相互间的关联，不能为巡视、操作及检修人员提供一个真实的功能环境信息，其空间表现和分析能力都有很大的局限性。

发明内容

为解决上述问题，本发明提出一种基于WebGL技术的电力系统场景快速构建方法及系统。

基于WebGL技术的电力系统场景快速构建方法，包括：

获取待建模对象的数据；

取其中一个面的一个点作为参考点，其余面的点根据参考点转换成相对坐标；

根据相对坐标生成对应的待建模对象的轮廓；

通过WebGL技术进行矩阵转换，将各个相对坐标的颜色信息与待建模对象位置信息做绑定；

根据各个相对坐标对应的颜色将模型渲染并显示。

优选的，所述根据相对坐标生成对应的待建模对象的轮廓包括：

将各相对坐标进行三角形划分，生成若干个带有底面三角形数据，将三角形数据传入WebGL着色器进行渲染，获得待建模对象底面；

根据待建模对象的高度，生成若干个带有高度的三角形数据，再通过WebGL着色器进行渲染获得完整的待建模对象外表面。

优选的，还包括：

通过WebGL技术将各相对坐标生成对应的线段；

将各个相对坐标的颜色信息与线段位置信息做绑定；

根据各个相对坐标对应的颜色并将线段高亮渲染并显示。

优选的，还包括：

将线段的坐标通过矩阵叉积运算，算出线段的两个端点坐标；

根据端点坐标通过WebGL技术生成对应的路径；

通过WebGL着色器将路径渲染。

优选的，还包括：

根据当前浏览器窗口视图，调用地图API获取可视范围的矩形地理坐标；

发送获取当前可视范围白膜数据的请求；

获取可视范围白膜数据后，将当前可视范围白膜数据与原可视范围白膜数据比较，把当前范围白膜数据中交集部分的数据去掉；

渲染出剩余的可视范围白膜数据，并把该渲染的模型与原模型进行合并。

基于WebGL技术的电力系统场景快速构建系统，包括：

数据获取模块，用于获取待建模对象的数据；

坐标转换模块，用于取其中一个面的一个点作为参考点，其余面的点根据参考点转换成相对坐标；

轮廓生成模块，用于根据相对坐标生成对应的待建模对象的轮廓；

数据绑定模块，用于通过WebGL技术进行矩阵转换，将各个相对坐标的颜色信息与待建模对象位置信息做绑定；

渲染模块，用于根据各个相对坐标对应的颜色将模型渲染并显示。

优选的，所述轮廓生成模块将各相对坐标进行三角形划分，生成若干个带有底面三角形数据，将三角形数据传入WebGL着色器进行渲染，获得待建模对象底面；根据待建模对象的高度，生成若干个带有高度的三角形数据，再通过WebGL着色器进行渲染获得完整的待建模对象外表面。

优选的，还包括：高亮线渲染模块，用于通过WebGL技术将各相对坐标生成对应的线段；将各个相对坐标的颜色信息与线段位置信息做绑定；每个点对应一种颜色并将线段高亮渲染并显示。

优选的，还包括路径渲染模块，用于将线段的坐标通过矩阵叉积运算，算出线段的两个端点坐标；根据端点坐标通过WebGL技术生成对应的路径；通过WebGL着色器将路径渲染。

优选的，还包括模型更新模块，用于根据当前浏览器窗口视图，调用地图API获取可视范围的矩形地理坐标；发送获取当前可视范围白膜数据的请求；获取可视范围白膜数据后，将当前可视范围白膜数据与原可视范围白膜数据比较，把当前范围白膜数据中交集部分的数据去掉；渲染出剩余的可视范围白膜数据，并把该渲染的模型与原模型进行合并。

通过使用本发明，可以实现以下效果：

1.通过获取待建模对象的数据；取其中一个面的一个点作为参考点，其余面的点根据参考点转换成相对坐标；根据相对坐标生成对应的待建模对象的轮廓；通过WebGL技术进行矩阵转换，将各个相对坐标的颜色信息与待建模对象位置信息做绑定；根据各个相对坐标对应的颜色将模型渲染并显示，实现对电力系统场景快速构建三维模型；

2.通过WebGL技术将各相对坐标生成对应的线段；将各个相对坐标的颜色信息与线段位置信息做绑定；根据各个相对坐标对应的颜色并实现线段高亮渲染并显示；

3.通过将线段的坐标通过矩阵叉积运算，算出线段的两个端点坐标；根据端点坐标通过WebGL技术生成对应的路径；通过WebGL着色器实现路径渲染；

4.根据当前浏览器窗口视图，调用地图API获取可视范围的矩形地理坐标；发送获取当前可视范围白膜数据的请求；获取可视范围白膜数据后，将当前可视范围白膜数据与原可视范围白膜数据比较，把当前范围白膜数据中交集部分的数据去掉；渲染出剩余的可视范围白膜数据，并把该渲染的模型与原模型进行合并，从而实现电力系统场景三维模型的更新。

附图说明

下面结合附图和具体实施方式对本发明作进一步详细的说明。

图1是本发明实施例一种基于WebGL技术的电力系统场景快速构建方法的流程示意图；

图2是本发明实施例一种基于WebGL技术的电力系统场景快速构建方法中步骤S601～S603的流程示意图；

图3是本发明实施例一种基于WebGL技术的电力系统场景快速构建方法中步骤S701～S703的流程示意图；

图4是本发明实施例一种基于WebGL技术的电力系统场景快速构建方法中步骤S801～S804的流程示意图；

图5是本发明实施例一种基于WebGL技术的电力系统场景快速构建系统的结构示意图；

图6是本发明另一实施例一种基于WebGL技术的电力系统场景快速构建系统的结构示意图

图7是本发明另一实施例一种基于WebGL技术的电力系统场景快速构建系统的结构示意图

图8是本发明另一实施例一种基于WebGL技术的电力系统场景快速构建系统的结构示意图。

具体实施方式

以下结合附图，对本发明的技术方案作进一步的描述，但本发明并不限于这些实施例。

本发明的基本思想是针对电力系统场景，例如电网的输电线路等，提出一种基于WebGL技术的电力系统场景快速构建方法，如图1所示，该方法包括以下步骤：

S1：获取待建模对象的数据。

在获取待建模对象的数据之前还包括步骤：通过javascript的web worker特性，从主线程中开启一条子线程，通过调用HTTP请求方法，向服务器获取geojson格式的数据，将得到的geojson数据进行格式化，把坐标数据归为点、线、面三类，最后将数据返回给主线程，注销此子线程，从而实现初始化。

首先需要对待建模对象数据的采集，通过数据采集设备获取待建模对象的数据，并将数据存储在服务器。

通过发送获取待建模对象数据的请求到服务器，服务器反馈该待建模对象的数据。其中，待建模对象的数据包括高度、坐标等。

S2：取其中一个面的一个点作为参考点，其余面的点根据参考点转换成相对坐标。

在建模的过程中，需要将原来的待建模对象的数据进行坐标系的转换，首先选取其中任意一个面的任意一个点作为参考点，其余面的点根据参考点转换成相对坐标，从而实现坐标系的转换。

S3：根据相对坐标生成对应的待建模对象的轮廓。

使用WebGL画三角面的方法gl.TRIANGLE_STRIP，生成对应的待建模对象的轮廓，将轮廓信息存在内存中，同时根据数据中带有的待建模对象的高度，根据WebGL绘制提供的矩阵转换，将待建模对象外层信息存于内存，从而生成对应的待建模对象的轮廓。

首先将各相对坐标进行三角形划分，生成若干个带有底面三角形数据，将三角形数据传入WebGL着色器进行渲染，获得待建模对象底面；然后根据待建模对象的高度，生成若干个带有高度的三角形数据，再通过WebGL着色器进行渲染获得完整的待建模对象外表面。

S4：通过WebGL技术进行矩阵转换，将各个相对坐标的颜色信息与待建模对象位置信息做绑定。

WebGL是一项在网页浏览器呈现3D画面的技术，有别于过去需要安装浏览器插件，通过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。WebGL可以为Canvas提供硬件3D加速渲染，通过借助系统显卡可以在浏览器里更流畅地展示3D场景和模型。

将各个点的颜色信息与之前的待建模对象信息做绑定，每个点对应一种颜色。

S5：根据各个相对坐标对应的颜色将模型渲染并显示。

通过WebGL渲染器，将模型渲染在屏幕上。

假设有一电力设备的地理坐标是[[10,15],[10,25],[20,15],[20,15]]，首先随机取其中一个坐标，如[10,15]，根据此坐标算出其他坐标相对于此点的偏移值，算出结果如[[0,0],[0,10],[10,10],[10,0]]，接着根据原有坐标算出比例系数，如[10,15]的比例系数是[1.1,1.2]，则最终坐标为原有坐标值乘以比例系数，如[[0,0],[0,12],[11,12],[11,0]]。接着将这些坐标进行三角面划分，生成两个三角形数据，如[[0,0,0],[0,12,0],[11,12,0]]，[[0,0,0],[11,12,0],[11,0,0]]，将这些数据传入WebGL着色器进行渲染，获得渲染过的底面。同理根据电力设备的高度，生成带有高度的三角形数据，如[[0,0,0],[0,0,20],[11,0,20]]，[[0,0,0],[11,0,20],[11,0,0]]，再进行渲染就画出完整的电力设备外表面。

渲染传入坐标数据的同时，传入对应的颜色数据，如[[0,0,0],[0,12,0],[11,12,0]]这个三角面数据的三个点对应[[1,0,0],[1,0,0],[1,0,0]]的rgb值，则此三角面就渲染成红色。

渲染传入坐标数据的同时，传入对应的贴图坐标，如[[0,0,0],[0,12,0],[11,12,0]]这个三角面数据的三个点对应[[0,0],[0,1],[1,1]]的贴图坐标，则此三角面就渲染成贴图上对应坐标点范围的图像。

最后，通过内部设置定时器，控制这些颜色数据的刷新频率，在不同时间间隔传入不同的颜色数据，就能产生动态纹理效果

在一些实施例中，如图2所示，本方法还包括以下步骤：

S601：通过WebGL技术将各相对坐标生成对应的线段；

S602：将各个相对坐标的颜色信息与线段位置信息做绑定；

S603：根据各个相对坐标对应的颜色并将线段高亮渲染并显示。

通过上述步骤地图上展示固定像素的线，且具有高光流动的效果，可以调整高光的颜色和线的颜色，可以调整高光移动速度，也可以渲染成纯色的线路。

在一些实施例中，如图3所示，本方法还包括以下步骤：

S701：将线段的坐标通过矩阵叉积运算，算出线段的两个端点坐标；

S702：根据端点坐标通过WebGL技术生成对应的路径；

S703：通过WebGL着色器将路径渲染。

通过上述步骤在地图上展示具体的一段有宽度的路径，可以在路径上贴图后作为动态指示轨迹，也可以播放路径动画，动态将路径渲染出来。

在一些实施例中，如图4所示，本方法还包括以下步骤：

S801：根据当前浏览器窗口视图，调用地图API获取可视范围的矩形地理坐标；

S802：发送获取当前可视范围白膜数据的请求；

S803：获取可视范围白膜数据后，将当前可视范围白膜数据与原可视范围白膜数据比较，把当前范围白膜数据中交集部分的数据去掉；

S804：渲染出剩余的可视范围白膜数据，并把该渲染的模型与原模型进行合并。

当电力系统场景更新时，不需要重新建立模型，只需要建立更新部分的模型，并与原模型合并得到更新后的模型。因此，相比于重新建立模型，速度更快。

基于上述实施例提出的方法实施例，在硬件方面，本发明还提出一直基于WebGL技术的电力系统场景快速构建系统，如图5所示，包括：数据获取模块，用于获取待建模对象的数据；坐标转换模块，用于取其中一个面的一个点作为参考点，其余面的点根据参考点转换成相对坐标；轮廓生成模块，用于根据相对坐标生成对应的待建模对象的轮廓；数据绑定模块，用于通过WebGL技术进行矩阵转换，将各个相对坐标的颜色信息与待建模对象位置信息做绑定；渲染模块，用于根据各个相对坐标对应的颜色将模型渲染并显示。

具体的，所述轮廓生成模块将各相对坐标进行三角形划分，生成若干个带有底面三角形数据，将三角形数据传入WebGL着色器进行渲染，获得待建模对象底面；根据待建模对象的高度，生成若干个带有高度的三角形数据，再通过WebGL着色器进行渲染获得完整的待建模对象外表面。

在一些实施例中，如图6所示，本系统还包括：高亮线渲染模块，用于通过WebGL技术将各相对坐标生成对应的线段；将各个相对坐标的颜色信息与线段位置信息做绑定；每个点对应一种颜色并将线段高亮渲染并显示。

在一些实施例中，如图7所示，本系统还包括路径渲染模块，用于将线段的坐标通过矩阵叉积运算，算出线段的两个端点坐标；根据端点坐标通过WebGL技术生成对应的路径；通过WebGL着色器将路径渲染。

在一些实施例中，如图8所示，本系统还包括模型更新模块，用于根据当前浏览器窗口视图，调用地图API获取可视范围的矩形地理坐标；发送获取当前可视范围白膜数据的请求；获取可视范围白膜数据后，将当前可视范围白膜数据与原可视范围白膜数据比较，把当前范围白膜数据中交集部分的数据去掉；渲染出剩余的可视范围白膜数据，并把该渲染的模型与原模型进行合并。

需要说明的是，本系统实施例中的数据获取模块、坐标转换模块等模块的功能及实现方法均在方法实施例中说明，因此不再赘述。

本发明所属技术领域的技术人员可以对所描述的具体实施例做各种各样的修改或补充或采用类似的方式替代，但并不会偏离本发明的精神或者超越所附权利要求书所定义的范围。

Claims

1.基于WebGL技术的电力系统场景快速构建方法，其特征在于，包括：

获取待建模对象的数据；

根据相对坐标生成对应的待建模对象的轮廓；

根据各个相对坐标对应的颜色将模型渲染并显示；

还包括：

发送获取当前可视范围白膜数据的请求；

2.根据权利要求1所述的基于WebGL技术的电力系统场景快速构建方法，其特征在于，所述根据相对坐标生成对应的待建模对象的轮廓包括：

3.根据权利要求1所述的基于WebGL技术的电力系统场景快速构建方法，其特征在于，还包括：

通过WebGL技术将各相对坐标生成对应的线段；

将各个相对坐标的颜色信息与线段位置信息做绑定；

根据各个相对坐标对应的颜色并将线段高亮渲染并显示。

4.根据权利要求3所述的基于WebGL技术的电力系统场景快速构建方法，其特征在于，还包括：

根据端点坐标通过WebGL技术生成对应的路径；

通过WebGL着色器将路径渲染。

5.基于WebGL技术的电力系统场景快速构建系统，其特征在于，包括：

数据获取模块，用于获取待建模对象的数据；

渲染模块，用于根据各个相对坐标对应的颜色将模型渲染并显示；

还包括模型更新模块，

用于根据当前浏览器窗口视图，调用地图API获取可视范围的矩形地理坐标；发送获取当前可视范围白膜数据的请求；获取可视范围白膜数据后，将当前可视范围白膜数据与原可视范围白膜数据比较，把当前范围白膜数据中交集部分的数据去掉；渲染出剩余的可视范围白膜数据，并把该渲染的模型与原模型进行合并。

6.根据权利要求5所述的基于WebGL技术的电力系统场景快速构建系统，其特征在于，所述轮廓生成模块将各相对坐标进行三角形划分，生成若干个带有底面三角形数据，将三角形数据传入WebGL着色器进行渲染，获得待建模对象底面；根据待建模对象的高度，生成若干个带有高度的三角形数据，再通过WebGL着色器进行渲染获得完整的待建模对象外表面。

7.根据权利要求5所述的基于WebGL技术的电力系统场景快速构建系统，其特征在于，还包括：高亮线渲染模块，

用于通过WebGL技术将各相对坐标生成对应的线段；将各个相对坐标的颜色信息与线段位置信息做绑定；每个点对应一种颜色并将线段高亮渲染并显示。

8.根据权利要求7所述的基于WebGL技术的电力系统场景快速构建系统，其特征在于，还包括路径渲染模块，

用于将线段的坐标通过矩阵叉积运算，算出线段的两个端点坐标；根据端点坐标通过WebGL技术生成对应的路径；通过WebGL着色器将路径渲染。