基于WebGL的海岛环境场三维可视化

杨晨曦 王平 温玉波马华栋

(1.国家海洋局南海信息中心 广州 510000;2.自然资源部海洋环境探测技术与应用重点实验室 广州 510000)

1 研究背景

海岛数据三维可视化是指利用相关虚拟现实、3S(GPS、RS、GIS)和WebGIS等地理信息技术以及OpenGL和WebGL等计算机图形技术,对海岛数据进行三维展示,主要应用于海岛周边风场、流场、浪场和温度场等环境场的三维实时动态可视化。

目前国内外对海洋环境场三维可视化平台的研究主要分为2 个类型:①基于单机或C/S架构的三维可视化平台(如EV-Globe、OSG 和Google Ocean),其存在环境部署复杂、更新维护较难且定制平台开发周期较长等弊端;②基于B/S架构的三维可视化平台(如Super Map、Three.js和Cesium),其避免单机或C/S架构存在的问题,但存在渲染速度慢、人-机交互不流畅和可视化效果较差等弊端。

海洋环境场的可视化方法主要包括对标量场和矢量场的可视化,由于矢量场能较好地展示环境场的变化情况,矢量场可视化方法逐渐成为热门研究方向。矢量场可视化方法主要包括3 个类型。①基于几何形状的可视化方法,如点图标法[1]、矢量线和矢量面法[2-3]以及粒子流法[4-5]。李志炜等[6]构建海洋时空过程对象并进行纹理填充,以点、线、面、体的形式实现对海洋环境场的矢量化表达;樊宇等[7]基于OSG 三维可视化平台,利用点图标映射法实现海洋风场的动态可视化;廖明[8]基于矢量场和WebGL 技术构建多尺度动态风矢量场,并以粒子流的方式实现鄱阳湖风场的三维动态可视化。点图标法以及矢量线和矢量面法等方法在表达环境场时欠缺连续性和特征性,粒子流法在表达大范围和高精度环境场时存在计算量大和渲染速度慢等问题。②基于纹理的可视化方法,如点噪声法[9]、线积分卷积法(LIC)[10]和基于图像的流场可视化[11]。其中,LIC 的应用最为广泛,并衍生Fast LIC[12]、Volume LIC[13]、UFLIC[14]和OLIC[15]等众多优化算法。马颖异等[16]基于LIC 和OLIC 算法,同时引入人类视觉感知理论,对模拟旋风数据进行可视化。该方法存在计算量巨大和计算效率较低等问题,难以满足实时渲染的需求。③基于特征的可视化方法,即主要基于矢量场中的现象和变化等有意义的特征形状进行可视化。沈恩亚等[17]提出交互式模糊特征提取算法,实现对流程特征的三维可视化。该方法过于依赖环境场特征信息,在环境场特征信息不明显时,可视化效果较差。标量场可视化方法主要包括颜色映射法、等值线法、等值面法和体绘制法:徐胜华等[18]构建点和面的三维动态模型,实现海洋环境标量场的三维可视化;董文等[19]采用体绘制法构建变高长方体模型,并采用等值线和颜色映射等方法,实现海洋环境标量场的三维可视化。

近年来,随着硬件设施和计算机图形学的快速发展,B/S架构下基于WebGL的可视化技术快速发展,基于WebGL对海洋环境场进行三维可视化逐渐成为海洋数据可视化的研究热点。本研究通过对海岛环境场数据的处理分析,针对B/S架构平台存在的弊端,构建顾及视角感知的多尺度变换模型和海岛环境场可视化模型,同时利用GPU 快速计算和渲染技术,实现B/S架构下海岛环境场的实时渲染展示。

2 海岛环境场可视化模型

本研究针对海岛环境场中的矢量场和标量场提出高效的计算渲染模型。在矢量场表达中,构建顾及视角感知的多尺度变换模型,并采用二阶欧拉积分算法计算粒子运动对象,以粒子流的形式存储矢量场的运动特征;在标量场表达中,采用双线性插值算法生成标量场网格数据;最终基于GPU 的三维渲染技术,实现海岛环境场的三维可视化(图1)。

图1 海岛环境场三维可视化的流程

2.1 基于二阶欧拉积分的粒子流算法

粒子追踪属于流体动力学范畴,通过当前粒子的位置和速度函数,采用积分方法计算粒子轨迹,计算公式为:

式中:y(t+Δt)为粒子在t+Δt时刻的位置;v[p(t),t]为速度函数。

为使流线追踪更加平滑,通过二阶欧拉数值积分法对粒子进行追踪,从而得到粒子的运动模型,计算公式为:

在获取粒子的运动模型后,须对粒子的生命周期进行控制。本研究通过网格控制粒子的出生和消亡,在可视化时控制粒子的数量和密度(图2)。

图2 粒子运动控制的流程

2.2 基于线性插值的标量场可视化算法

采用面绘制法对标量场进行可视化时,因分辨率较低,会出现颗粒感和像素感。为解决该问题,使可视化效果更加平滑,本研究采用双线性插值算法处理标量场数据,基本原理为根据当前网格周围的4 个值进行插值分析,进而得到当前网格的值(图3)。

图3 双线性插值

式中:f(N)函数为第N个网格点的值;x和y为当前网格周围网格的坐标值。

基于以上模型进行面绘制时须分级设色,在分级设色中为避免异常值导致分级不均匀,采用正态分布中距平均值3个标准差的值作为最大值和最小值参与分级计算,最终实现渲染颜色的平滑过渡。

2.3 顾及视角感知的多尺度变换模型

对于网页端的渲染而言,屏幕空间是固定的,不会随视角的改变而改变。然而视角的改变会改变地理空间,可视化的细节层次在不同地理空间下有所不同。基于该原理,本研究构建顾及视角感知的多尺度变换模型,通过用户视角的改变获取当前视角特征值,并基于视角特征值生成表达对象的细节层次。对于矢量场而言,粒子数量即细节层次。

当视角足够高或足够低时,人眼感知都将弱化。因此,本研究设定视角高度空间,当超过视角高度空间时,粒子数量将不再改变。基于以上样本数据,采用多项式拟合算法确定视角高度(h)与粒子数量(Particlesnums)之间的关系,计算公式为:

视角高度与粒子数量的关系如表1 和图4所示。

表1 视角高度与粒子数量的关系

图4 视角高度与粒子数量的关系

2.4 基于GPU 的三维渲染技术

传统的基于CPU 进行环境场渲染的计算速度过慢。本研究基于GPU 技术,实现对矢量场的快速计算和实时渲染;对于标量场的渲染,主要利用着色器原理,实现浏览器端标量场的大范围、多时相和海量数据的实时高效动态可视化(图5)。

图5 标量场渲染的流程

对于矢量场而言,首先重新组织矢量场数据,并利用纹理的RGBA 颜色通道存储原始数据和粒子位置信息;然后利用GPU 并行计算,将粒子追踪和粒子渲染的过程由CPU 转到GPU 执行,极大地提升数据计算速度(图6)。

图6 矢量场渲染的流程

3 方法应用

应用上述方法,以海岛和全球海洋2种尺度为研究区域,基于Java Script、WebGL、Open GL ES和.Net等技术研发三维可视化系统平台。海洋环境场数据来自欧洲中期天气预报中心,底层三维平台为Cesium。选取某时刻的海洋环境场数据并对数据加密处理,生成基本纹理图。

采用矢量场可视化方法对海岛环境场和全球海洋环境场进行三维动态可视化,在海岛小范围和全球海洋大范围2种尺度下进行缩放、旋转和倾斜时,粒子数量和表达层次有明显差异。在大尺度下能明显表现矢量场的具体特征,而在小尺度下则能表现更多的细节信息。

为验证方法的性能,分别验证基于CPU 和基于GPU 三维渲染2种模式的渲染效率。根据对比结果,GPU 三维渲染模式的帧率最高可达60 FPS,60万粒子数以下的帧率最低也可达31 FPS,与CPU 模式相比性能提升1.6～5.0倍,基本满足实时渲染的需求。

与采用传统方式的标量场可视化效果相比,基于本方法的标量场可视化能很好地克服颗粒感和像素感的问题,能对标量场进行平滑展示,同时能很好地突出海洋环境场与陆地的边界,也能明显展示海洋现象。

4 结语

本研究以海岛环境场为研究对象,从标量场可视化、矢量场可视化、多尺度变换和GPU 快速渲染4个方面入手,提出B/S架构下海岛环境场三维可视化的新方法,并将其延伸至全球海洋环境场的三维可视化。与传统方法相比,本方法在计算速度、渲染效率和渲染效果等方面均有较大提升,在高密度粒子下也能实时高效渲染海洋环境场信息,可为网页端海岛环境场的仿真和三维动态可视化等研究领域提供新的思路,同时可为海洋灾害预警和航线规划等业务提供科学依据。

本研究主要关注海岛环境场的三维可视化并取得较好效果,后续将继续研究海岛地形、海底地形以及水上/水下一体化等的三维可视化,并通过与海洋环境场的结合,更加真实和直观地展示海岛和海洋信息,为开展相关业务提供数据支持。