基于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数据来自