基于WebGL的海洋环境数据可视化系统_张烨.pdf

2023.6电脑编程技巧与维护1概述海洋环境数据可视化方面的相关研究越来越受到重视，国内外涌现出一些相关研究成果。谷歌公司以Google Earth为基础添加了海洋环境、海底地形等信息形成了Google Ocean海洋可视化软件；NASA开发了针对风场、流场的可视化引擎World Wind，美国国家海洋和大气管理局（NOAA）等相关单位联合开发了基于GIS和其他技术的海洋环境数据可视化系统“GeoMa-pApp”与“Virtual Ocean”。这些系统能够对海洋环境数据进行三维可视化，同时也支持用户进行交互式的数据查询、分析。总体而言，相关的可视化研究仍处于初步探索的阶段，需要进一步地深度挖掘与研究，引入新技术与方法。在此提出了一种基于WebGL的海洋环境数据三维可视化系统，该系统立足实际需求，利用大数据处理等相关技术，结合海洋应用特点进行快速及时地分析和处理，实现了一种新的海洋环境数据可视化应用。该系统可应用于海洋环境监测、声学地图、海域管理等其他领域。2系统采用的相关技术2.1WebGLWebGL技术是一种在浏览器中实现三维图像渲染的新方法，能够在无需下载和安装任何插件的前提下使应用开发者在网页中实现高性能、实时完成3D图形处理，WebGL是一种基于OpenGL的Web图形库，它能够在Web浏览器上实现高性能的三维图形渲染和交互式应用程序。在海洋环境三维可视化中，WebGL技术优点如下。（1）可视化效果好。WebGL技术可以将海洋环境数据以三维方式进行可视化展示，使用户能够更加直观地了解海洋环境的情况。（2）提高海洋环境数据的交互性。WebGL技术可以实现用户对海洋环境数据的交互式操作，例如，旋转、缩放、平移等，让用户更加深入地了解海洋环境的数据。（3）实现海洋环境数据的实时渲染。WebGL技术可以利用图形处理器（GPU）进行并行计算和实时渲染，从而实现对海洋环境数据的实时渲染和交互式操作。（4）支持海洋环境数据的大规模可视化。WebGL技术可以有效地处理大规模的海洋环境数据，实现海洋环境数据的可视化展示和交互式分析。WebGL技术的缺点在于它的绘图标准偏向底层，需要考虑很多细节，例如，变换矩阵、顶点坐标等，使用难度非常高。因此许多其他的引擎在其基础上进行二次封装，提高了其使用的简易性1。2.2体渲染技术体渲染技术是一种基于体素（三维像素）的渲染技术，它将物体表面看成一个三维像素数组，并使用体素着色器进行渲染。与传统的表面渲染不同，体渲染技术基于对三维体数据中每个体素的颜色、密度、透明度等属性的计算，将所有的数据集看作整个连续的体积，通过将体积中的物质分布进行可视化，完成对三维数据的可视化渲染。体渲染技术主要可以分为两种基本类型，一种是基于光线投射的体渲染法；另一种是基于切片的体渲染法。基于光线投射的体渲染算法通过沿着光线进行采样和插值，计算每个像素的颜色和透明度，再将像素合成图像。基于切片的体渲染则是在三维数据中定义一个平面，将平面上的体素转化为二维像素，以此实现体数据的可视化。体渲染技术的优点在于可以直观地展示三维数据的内部结构和分布，适用于需要对大量复杂数据进行可视化的应用。然而，由于计算复杂度较高，体渲染技术的实时渲染和交互性能较差，需要结合并行计算、GPU加速、算法优化等技术，才能满足用户实时可视化的需求。2.3光线投射算法光线投射算法是一种基于物理光学原理的三维图像基于 WebGL 的海洋环境数据可视化系统张烨（中船船舶集团有限公司第七一五研究所，杭州310023）摘要：海洋环境数据具有数据量庞大、复杂度高、来源广等特点，因此理解和解读海洋环境数据需要具备相关领域的专业知识。将数据可视化技术应用于处理海洋环境数据中，能够深入挖掘海洋数据中蕴含的规律和隐藏的特性，从而提供更有效的决策支持。开发了一种基于 WebGL 技术的海洋环境数据可视化系统，实现了关于风场、流场、底质、地形、三维声场的可视化展示，具有非常重要的研究意义和应用前景。关键词：海洋数据；可视化；WebGL 技术145DOI:10.16184/prg.2023.06.0012023.6电脑编程技巧与维护图3矢量场可视化流程渲染方法，常用于计算机图形学和可视化领域中的体绘制和体数据可视化。光线投射算法基于射线追踪原理，从视点出发，沿着光线方向依次对每个像素进行采样，先计算光线与模型表面的交点，再根据光线方向和交点处的物理属性（例如，反射、透射、散射等），计算出像素颜色和亮度值，最终形成三维图像。相比于传统的光栅化方法，光线投射算法能够更精确地模拟光线在三维空间中的传播和相互作用，可以生成更真实的体绘制效果，适用于复杂的体数据可视化和体绘制应用。光线投影法的基本步骤如下。（1）确定场景，包括相机位置、场景中的物体、光源等各个参数。（2）确定图像平面，即确定屏幕的位置和大小，以及像素的位置和大小等参数。（3）对于每个像素，从相机位置发射一条射线，确定射线的起点和方向。（4）对于每条射线，与场景中的每个物体进行相交测试，得到最近的交点。（5）如果存在交点，则计算该点的表面属性，包括颜色、反射和折射等信息。（6）根据表面属性，计算该点的颜色值，并输出到对应的像素中。（7）如果物体具有反射和折射的属性，则继续沿着反射和折射方向追踪，并重复步骤（4）（6），直到不再有交点或达到最大反射或折射次数。（8）对于每个像素，将计算出的颜色值输出到对应的图像位置中。（9）如果存在多个光源或物体，则需要对所有光线进行追踪，并按照混合规则计算最终颜色值。3海洋环境数据可视化系统设计3.1系统设计思路海洋环境数据可视化不是一个单纯的算法，而是一个流程2。系统工作的流程主要包括海洋环境数据采集、海洋数据处理与映射和用户感知3个步骤。3.1.1 海洋环境数据采集确定数据采集是可视化流程的第1步，可视化结果展现效果在一定程度上依赖于采集数据的维度、来源、大小、格式、精准度等属性，数据采集的目的是根据需求确定需要采集的海洋环境数据的来源和类型。系统中采集数据的需求包含采海洋水文数据、海洋气象数据、海底底质数据、卫星遥感数据。将这些数据存储在数据库中。海洋环境数据可视化需求与数据对应关系结构如图1所示。3.1.2海洋数据处理与映射由于原始数据类型多、数据量大，并且数据的模式及其特征往往被隐藏、难以发现，一般在数据映射前需要对数据进行预处理。预处理工作的主要内容是去噪声、数据清洗、提取特征。完成数据预处理后进行可视化映射。可视化映射是整个可视化流程的核心部分，根据系统数据类型可将数据分为标量场（数据没有方向的概念，只有数据大小，例如，温度、盐度）与矢量场（既有方向、又有大小，例如，风向、流向）；根据数据维度可将数据分成一维数据（点）、二维数据（面）、三维数据（体）。对于相对应的数据类型可等值线提取法、颜色映射法和体渲染法等。这一阶段的主要目的是明确可视化技术映射关系，对原始数据进行处理、映射，将其转换成用户需要的图形显示效果，最终在屏幕上显示出来。下面主要介绍标量场映射法、矢量场映射法、颜色映射法与体渲染法。（1）标量场可视化流程如图2所示。（2）矢量可视化映射方法如图3所示。（3）颜色映射法的可视化流程如图4所示。体渲染的可视化流程较复杂，一般三维数据（顶点坐标信息、顶点颜色、绘制索引、法线、纹理图像、纹图1海洋环境数据可视化需求与数据对应关系图2标量场可视化流程需求三维海底地形可视化声场可视化底质可视化流场可视化风场可视化浪高可视化数据影像数据地形数据风场数据流场数据底质数据、温盐数据声速梯度数据海洋环境标量场数据数据预处理转换成经纬度、高度信息基于WebGL的物理渲染数据维度判断选择渲染方法（颜色映射法、等值线提取法等、体渲染法）读取海洋环境矢量场数据数据预处理、噪声剔除计算U./V分量对应的场信息基于WebGL的物理渲染选 择 渲 染 方 法（标 记法、纹理法等）通过融合算法计算结束坐标1462023.6电脑编程技巧与维护理坐标、光线数据等模型数据）通过脚本从模型文件中加载到顶点缓冲区，经GPU调用，顶点着色器、变换矩阵和片段着色器需要的GLSL ES指令一般通过JS脚本计算并传入GPU。三维渲染流程如图5所示3。3.1.3用户感知用户感知在海洋环境可视化流程中非常重要，因为海洋环境数据的可视化最终目的是为用户更直观、更易于理解的信息。在可视化系统设计过程中，需要结合用户需求和用户特点进行设计，如何将数据以最好的方式传递给用户，提高用户的理解和认知效果，这都需要通过对用户感知的深入研究和用户体验的不断优化来实现。因此，在海洋环境数据可视化系统的设计过程中，需要充分考虑用户感知的要求和特点，通过交互操作，例如，缩放、旋转、选中等，让用户可以更加深入地了解数据，同时也可以满足不同用户的需求，从而提高用户的满意度和使用效果。海洋环境数据的视觉感知可以通过以下几个方法进行，如图6所示。3.2分层设计海洋环境数据三维可视化系统的架构设计可以采用分层架构，分层架构是一种常见的软件架构设计方式，它将软件系统分解成若干层次，每个层次只需完成指定功能。不同层次间通过定义好的接口进行通信，从而提升层次间的解耦性。分层设计可以使系统结构清晰、易于维护。海洋环境数据三维可视化系统共包括3个层次，分别为海洋环境数据层、海洋环境数据服务层、海洋环境数据可视化应用层，如图7所示。3.2.1海洋环境数据层海洋环境数据层主要具有数据采集、存储和管理的功能。数据的来源包括海洋观测站、卫星遥感等。数据类型包括卫星影像海洋流速、温度、盐度、浪高、海底底质等海洋环境数据，其相应的内容主要包括数据库选择、编码方案和检索存储方案。（1）数据库选择数据存储一般可以采用关系型数据库、非关系型数据库或磁盘文件系统等方式。对于占用空间较大的遥感影像数据，必须考虑到网络数据传输速度与数据可视化速度等问题4，系统采用的方案为磁盘文件系统的方式存储，磁盘文件系统是一种由计算机提供的以计算机硬件磁盘空间为基础的数据访问与服务机制，该方案减轻了系统内部的网络带宽，减少了在海图漫游时的非必要消耗，降低了系统开发的难度。对于海洋表面温度、风速、风向等其他数据，系统采用关系型数据库MySQL数据库，MySQL是一种效能图4颜色映射法流程图5三维渲染流程图6可视化系统用户感知方法图7海洋环境数据可视化系统分层设计Zeromq HTTP海洋环境数据应用层可视化效果j组件接口数字地球流场可视化底质可视化 声场可视化地形可视化 浪高可视化 风场可视化WebGL Openlavers Qwt海洋环境数据服务层管理类渲染类处理类数据目录管理数据导入数据维护数据导出数据查询数据发布标量绘制矢量绘制三维场绘制坡面绘图粒子渲染数据预处理分辨率重建数据融合动态演算地图操作交互接口海洋环境数据层影像数据地形数据风场、流场等数据建立颜色与物理量对应关系读取原始数据，数据预处理陆地环境数据融合，对数据补全基于WebGL的物理渲染范围设置经纬度坐标信息，深度信息分辨率重建数据缓冲模型矩阵视图矩阵其它数据CPU计算区域顶点着色器图元装配光栅化绘制缓存GPU计算区域像素处理片段着色器1.顶点坐标转换2.顶点颜色分配3.顶点法线分配其它顶点相关操作1.逐片元计算纹理2.逐片元计算光照其它片元相关操作.动 态 效 果：通 过 动 态 的 效果，例如，动画、渐变等，让用户可以更加直观地感知数据的变化和趋势。可视化系统用户感知方法海底三维地形显示风场显示、流场显示底质显示、浪高显示动态效果法颜色感知法高度映射法通过将数据映射到不同的高度，让用户可以在三维场景中直观地感知数据的空间位置和分布情况。通过将数据映射到不同的颜色，让用户可以直观地感知数据的大小、变化等信息。1472023.6电脑编程技巧与维护稳定、体量轻便、开源免费试用的数据库，有着易于维护、可移植性高的的特点。（2）数据源选择系统的遥感影像及高程数据（DEM）来源于GoogleEarth，它的影像数据的覆盖范围广泛，包含了全球各地的高分辨率影像和地形信息，能够提供全球高清分辨率的全球卫星影像。使用DEM数据来自多个数据源，包括美国地质调查局（USGS）、欧洲空间局（ESA）和其他数据供应商。这些数据被用来创建三维地球表面的模型。可以以不同的分辨率捕捉地球表面的影像，从而提供不同分辨率的卫星影像。所使用的温度、盐度、风向等数据来源于气旋全球航海卫星系统采集的数据（HGNSS）。HGNSS可以通过使用全球定位系统（GPS）和俄罗斯全球导航卫星系统（GLONASS）等，收集海洋表面温度、风速、风向等数据，以及飓风的轨迹和强度等信息，其数据格式为NetCDF。NetCDF格式的有关数据的信息与数据本身绑定并存储在文件中，这使访问数据及编写、读取和操作数据变得相对简单。（3）存储及索引方案数据存储及检索方案是海洋环境数据库设计的主要内容，良好的数据设计能大大缩短数据检索的时间。设计海洋环境数据编码结构需要考虑以下5个方面。1）数据类型。需要确定数据的类型，例如，温度、盐度、水深、海流等。2）数据单位。需要确定每种数据类型的单位，例如，摄氏度、盐度单位等。3）数据来源。需要确定数据的来源，例如，遥感卫星数据、浮标观测数据、潜艇探测数据等。4）数据格式。需要确定数据格式，例如，二进制、ASCII码等。5）数据质量。需要确定数据的质量，例如，数据的精度、准确性和完整性等。该系统主键的设计方式如下：AAABBBCCCCDDDEEE，其中，AAA为数据类型、BBB为数据区域代码、CCC为时间、DDD为 来源、EEE为存储信息。数据索引一般包含以下3种方式。（1）时间索引。可以按照时间建立索引，快速查询某段时间内产生的数据。（2）空间索引。建立经纬度索引，以便快速查询某个区域内的数据。（3）数据类型索引。可以按照数据类型建立索引，以便快速查询某种类型的数据。3.2.2海洋环境数据服务层海洋环境数据服务层是连接数据存储和应用层的核心组件，主要负责对海洋环境数据的访问和处理，同时可以提供图形渲染的功能，将数据可视化为图形、地图等形式，便于人们更加直观地了解数据，其功能主要分为数据管理类、图形渲染类和数据处理类3类功能。数据管理类功能用于管理海洋环境数据及分析计算后的衍生数据，包括数据目录管理、数据导入、数据查询、数据导出、数据维护、数据发布等。图形渲染类功能主要提供网格计算、着色器设置和参数配置、图形预处理、标量场绘制、矢量场绘制、三维场绘制、坡面绘制等。数据处理类功能主要完成分辨率重建、多源数据融合、动态演算、地图操作与交互接口等，其相关功能依赖于开源框架Cesium,Cesium地球引擎只支持特定的数据 格 式GeoJSON因 此 在 服 务 层 必 须 完 成 原 始 数 据NetCDF等格式到GeoJSON格式的类型转换5。3.2.3海洋环境数据可视化应用层海洋环境数据应用层负责实现用户界面和应用逻辑，该层实现用户界面和交互功能，例如，数据查询、过滤、显示、操作等，也负责实现海洋环境数据可视化，支持风场、流场、地形、三维声场等多类数据的可视化展示。同时，在海洋环境GIS服务的支撑下，该层可利用前端框架提供的标绘和统计分析等附加功能。系统设计主要包括完成数据发布的对话窗、环境分析的工具栏和GIS地图浏览的菜单栏3部分。其主要框架采用Qt与Web联合开发的方式进行设计，将浏览器通过自带的QWebEngineView继承嵌入到客户端应用程序中完成适配，通过QWe-bChannel完成应用框架到浏览器的消息传递，在浏览器端基于HTML5的Canvas元素，先以标签的形式嵌入JavaScript脚本的AP1，再通过调用JavaScript内的We-bGL应用程序编程接口实现对三维图形的各类处理6。4实现效果地形可视化效果如图8所示。图8地形可视化效果(下转第176页)1482023.6电脑编程技巧与维护流场可视化效果如图9所示。5结语介绍基于WebGL的海洋环境数据三维可视化系统的设计和实现。该系统可以实现对海洋环境风场、底质、声场等多类要素数据的可视化展示，该系统采用分层架构，包括海洋环境数据层、海洋环境数据服务层和海洋环境数据可视化应用层。其中，海洋环境数据层采用关系型数据库进行存储；海洋环境数据服务层采用Node.js实现；海洋环境数据可视化应用层采用WebGL技术实现。所采用的方法具有处理大数据量、大计算量和广时空分布的能力，但其颗粒度相对依赖于显卡的性能。如果粒子数远大于GPU单元数，就会造成计算延迟、系统卡顿。后续的研究方向将从分布式环境构建考虑，同时引入基于内存的并行技术，进一步扩展内存，优化三维可视化系统，提高系统的可扩展性和可维护性，同时将系统应用于更广泛的海洋环境数据分析场景中，为海洋环境保护和可持续发展做出更大的贡献。参考文献1王孟博,董泽,石轲,等.WebGL技术探索及几种基 于WebGL的 引 擎 比 较J.中 国 科 技 信 息,2021(5):89-90.2杨秋琪.海洋环境数据可视化的研究与应用D.北京:北方工业大学,2016.3马亮,王彬.WebGL三维技术、建模分析及优化研究J.长春师范大学学报.2022,41(2):64-69.4孙强,王世航,鹿凤.网络环境下海洋标量场数据三维可视化研究J.2019,42(8):105-107.5郭晓非,朱俊利,万剑华,等.基于Cesium的海洋环境要素三维可视化研究J.海洋科学,2021,45(5):130-136.6吴文蔚.基于WebGL的三维图形渲染系统的设计研究J.山西电子技术,2022(5):79-81.图9流场可视化效果针对实时定位，通过对变电站重要设备进行定位，设置标签，确定基站的位置和数量并计算覆盖面积，在此基础上对变电站设备的经纬度进行准确计算。实例验证结果表明，该定位精度可以达到厘米级别。针对设备状态诊断，利用神经网络对关键信息进行数据挖掘，得出设备运行状态为正常、一般缺陷、严重缺陷和危急缺陷4种状态。诊断的设备包括变压器、开关、互感器、避雷器、组合电器等。针对故障预警，在设备状态诊断的基础上，对于严重及以上缺陷状态进行预警，并结合设备状态、故障位置、修复时间和停电时间等指标给出解决方案，以供运维人员参考。3结语在IEC 61850标准体系中搭建变电站网络结构模型，利用多层BP神经网络对关键信息进行数据挖掘，采用数字孪生UWB定位模型对变电站设备进行精准定位，建立了基于数字孪生技术的变电站设备故障定位预警模型，并对该模型的应用效果进行了实例验证，证实该模型的实时诊断和故障预警具有较高的应用价值。参考文献1李启迪,黄治翰,汪晗,等.基于IGA优化SVM的变压器故障诊断J.黑龙江电力,2021,43(4):342-345.2张艺,李万银,付根.基于深度学习的智能变电站二次系统故障定位研究J.四川水力发电,2022,41(4):112-118.3荆澜涛,董雪情,杨超,等.面向数字孪生应用的变压器温度场有限元降阶建模方法研究EB/OL.高电压技术,2022.4卜英伟.数字孪生技术在强智能电网中的应用J.智能建筑与智慧城市,2022(10):177-179.5韩国政,陈羽,徐丙垠.基于IEC 61850的配电网故障检测与保护信息模型J.供用电,2019,36(7):8-12.6祁海清,赵宏宝,纪彤,等.基于神经网络的变电站规约转换装置开发与设计J.光源与照明,2022(5):158-160.7熊一,詹智红,柯方超,等.基于改进BP神经网络的变电站检修运维成本预测J.电力科学与技术学报,2021,36(4):44-52.8龙玉江,李洵,舒彧,等.数字孪生技术的应用及进 展J.上 海 电 力 大 学 学 报,2022,38(4):409-414.(上接第148页)176