近年来, 伴随着海洋观测技术和仪器设备的进步, 积累了大量海洋环境要素数据, 加之其多源、异构等特点, 难以直接从中获得有效信息^[1], 需借助专业软件实现海洋环境信息提取, 原有二维海图无法完全满足当前生产研究需求, 简便流畅的三维场景可视化渲染对海洋环境要素信息展示尤为重要^[2]。

国外Cameron Beccario创建的Earth网站(https://earth.nullschool.net)为全球气候实时变动提供了可视化数据展示平台, 捷克气象公司创办的VentuSky提供了实时监测全球气象数据的可视化门户网站^[3], 二者均可以在网页浏览海洋环境要素可视化情况, 但用户无法直接获取原始海洋环境要素数据; iOcean中国数字海洋公众版采用B/S架构, 倾向于信息发布和业务数据展示, 但浏览前需要安装插件; 中国科学院海洋研究所发布的IOCAS-MSDC系统^[4]基于Leaflet地图框架开发, 在二维地图上具有较好的展示效果, 但不具备三维可视化效果。

Cesium是一款基于JavaScript和WebGL的免费开源三维地图框架, 支持浏览器无插件访问, 同时支持GeoJSON、KML等多种网络数据显示^[5], 环境配置简单, 可移植性强, 已广泛应用于地学各个领域。当前国内外海洋三维可视化平台多基于WebGL等技术由底端进行数据渲染, Cesium地球引擎在海洋环境要素数据三维渲染中尚未得到广泛应用。海洋环境要素数据可视化常用方法有点方式可视化法、点图标映射法和流线法等, 在Leaflet、OpenLayers等二维开源地图框架上均有较好渲染结果, 但在Cesium三维开源地图框架中使用较少。

本文将渲染效果较好的数据可视化方法应用于Cesium开源地图框架中, 数据渲染维度由二维转为三维, 实现了海洋环境标量要素与矢量要素的三维可视化渲染。

1 海洋环境要素可视化渲染方法

海洋环境要素数据用于描述海洋环境现象和过程的空间分布, 主要分为标量要素场和矢量要素场。本文以海表面温度场和海面风场数据为例, 阐述了基于Cesium开源地图框架的海洋数据场三维可视化方法。

1.1 标量场可视化

海洋标量场仅用数值大小即可完整表征, 本文利用几何图形对象的可视化方法, 借助Cesium中Entity API实现了基于点图形可视化方法的海洋标量场数据渲染^[6]。Entity API重点在于数据展示而非底层可视化机制, 区别于传统的栅格图像贴图方法, 根据数据直接在三维球体上进行绘制渲染, 数据即来即用, 节省了后台生成标量场栅格图的时间。

点方式可视化是在三维场景中直接以点状对象进行要素可视化表达, 根据数据范围对颜色分级, 场中每个点的数值对应一种颜色, 通过不同颜色反映数据场中数值大小及变化情况。当原始数据空间分辨率较低时, 离散的标量场采用插值算法重建相邻数据点间的关系, 并将插值得到的数值对应不同颜色分级, 主要流程如图 1所示。

以海表面温度数据为例, 进行可视化渲染的具体步骤如下:

1) 根据读入的数据按照经纬度划分规则格网, 判断待操作区域是否需要插值。插值结果与格网大小, 即数据精度有关, 格网过小插值任务加重, 效率降低; 格网过大插值精度降低, 达不到理想效果。本文规定若数据空间分辨率低于0.5°, 则进行插值, 否则不进行插值, 以提高系统可视化效率。

2) 使用克里金插值方法, 得到插值格网的数据值, 并根据结果颜色分级, 实现海表面温度数据可视化渲染。

1.2 矢量场可视化

矢量场数据既有大小, 也有方向, 常见矢量场可视化方法包括点图标映射法、流线法、纹理映射法等^[7]。本文使用点图标映射法和流线法实现静、动态矢量场可视化渲染, 流程如图 2所示。

(1) 点图标映射法

点图标映射法在风场可视化算法中最易实现且效率较高, 常用图标有箭头、椎体、有向线段等^[8-9]。本文通过Cesium的Primitive API绘制箭头图标与颜色映射表对应, 实现静态矢量场的可视化渲染, 箭头颜色表示数据点数值大小, 偏转方向表示矢量场方向。以风场数据为例, 进行可视化渲染的步骤为:

1) 确定箭头的大小, 基于计算机屏幕及人体视觉因素的考虑, 根据地图缩放等级确定箭头大小, 并设定地图等级与箭头数量线性相关。设箭头基础长度为3, 每层级的密度增加幅度为40, 共18个等级。

2) 计算箭头偏转方向, 根据经纬度、箭头基础长度和风场数值, 计算箭头的偏转方向^[10]。调用Cesium中Primitive API进行绘制, 可省略箭头尾部绘制, 只需计算箭头整体偏转角度, 提高可视化渲染速度。根据数据起始点、方位角计算箭头的起始位置和终止位置, 其中, 方位角以由南至北经线为0度作为起始位置顺时针旋转。

3) 确定箭头颜色, 根据地图缩放层级对数据进行抽稀与插值操作, 由生成的风场数据值计算各个箭头的RGB颜色分量值。

(2) 流线法

矢量场点图标绘制简单方便, 但可视化范围的数据量直接影响渲染结果, 数据量较大时箭头出现叠加现象, 可视化杂乱, 绘制效率低。流线描述的是场中数据点的切线方向, 对于场空间的任意点, 某时刻有且仅有一条流线通过该点, 该点处流线的切线方向表示对应矢量场方向, 不同颜色表示数值大小。相比于点图标映射法, 流线法可以连续表示矢量场动态变化。以风场数据为例, 进行可视化渲染的步骤为:

1) 根据数据经纬度划分格网, 在格网上随机生成风粒子并设置持续时间、流动快慢等基本属性, 绘制初始生成的风粒子^[11-12]。

2) 对于生成的每个粒子, 基于该点风场数据获得当前位置风粒子的速度, 计算偏转角度确定粒子未来移动方向, 在格网中不断运动更新。数据空间分辨率不满足要求时(本文假定低于0.5°), 前端绘制前使用克里金插值法进行插值, 以确保风粒子绘制时不会出现空白区域。

3) 风场颜色通过Cesium中OpenGL提供的片段着色器计算得到, 根据风速大小划分颜色等级, 为片段着色器赋值, 实时更新风粒子的停留时间和对应颜色, 给定风粒子速度阈值以确定何时在格网中删除旧粒子, 绘制新定位的粒子, 最终实现Cesium三维球体流线法可视化。

4) 风场流线法绘制时增加每秒传输帧数(frames per second, FPS)参数, 用于监测动态矢量场可视化流畅程度。

2 应用实例

基于上述可视化方法研究和Cesium三维地图框架, 编程实现海洋环境标量场和矢量场数据的三维可视化渲染。

2.1 数据预处理

Cesium地球引擎支持特定的数据格式, 初始获得的NetCDF、ASCII、HDF等数据格式无法直接用于Cesium进行可视化渲染, 均需预处理为GeoJSON格式。GeoJSON是基于JavaScript对象表示法(JavaScript object notation, JSON)的地理空间信息数据交换格式, 主要用来表示空间地理信息。

随着海洋数据采集技术的不断和进步, 海洋数据呈现出类型多样化、维度丰富化、数据量暴增等特征, 海洋环境要素数据通常以NetCDF(network common data form)文件格式进行存储和交换, 该格式作为一种通用数据存储格式, 与其他文件存储格式相比(ASCII文件、二进制文件、HDF格式等)更易转换为GeoJSON格式, 便于在Cesium中进行可视化渲染。

本文数据来自欧洲中期天气预报中心(European centre for medium-range weather forecasts, ECMWF)和美国国家环境预报中心(national centers for environmental prediction, NCEP), 均为NetCDF格式。主要数据类别为风场、海流、海表面波高、海表面温度及海洋叶绿素浓度等, 为方便数据统一管理, 制定新的命名规则为: 类型_范围_分辨率_时间.nc, 示例结果如表 1所示。

Cesium数据可视化渲染支持GeoJSON格式, 不同海洋环境要素NetCDF数据组织^[13-14]存在差异, 将NetCDF文件解析重组织为Cesium支持的格式是可视化的基础工作。本文基于JAVA语言实现NetCDF数据预处理, 表 2以风场数据为例, 列出了解析NetCDF文件用到的基本函数。数据解析重组中, 原始数据精度较高, 全部在Web端显示易出现绘制卡顿、内存溢出的问题。针对该问题, 采用数据抽稀算法处理NetCDF数据, 减少数据量, 自定义适用于三维可视化的GeoJSON数据格式, 供前端快速响应。数据抽稀^[15]后可视化渲染效果与抽稀前结果基本一致, 绘制效率显著提高。

本文使用的NetCDF数据为规则格网全球数据, 数据间隔较小, 默认相邻点间数据变化较小。曲线抽稀算法中的步长法是沿连续曲线每隔一定步长抽取一点, 其余点全部压缩^[16], 借鉴该思想, 后端采用等间隔抽稀方法, 以抽稀间隔、前端显示经纬度范围为参数, 在不改变数据正确性的前提下, 最大限度减少数据量, 提高绘制效率。计算公式如下:

$ {\rm{lat}} = {\rm{origin\_lat}} + \left[ {{\rm{origin\_lat/space}}} \right], $

(1)

$ {\rm{lon}} = {\rm{origin\_lon}} + \left[ {{\rm{origin\_lon/space}}} \right]. $

(2)

origin_lat、origin_lon为可视化区域原始经纬度范围, space为抽稀间隔, lat、lon为数据抽稀后对应的经纬度范围。以风场数据为例, 前端将给定的抽稀间隔(0.25°、0.5°、0.75°和1.0°四种抽稀间隔)作为参数传入后端, 判断经纬度范围能否整除抽稀间隔, 若无法整除, 则对抽稀后的数据范围进行取整操作, 得到抽稀后经纬度对应的原始风场数据点, 计算风速存入新建数组中, 转换为GeoJSON格式, 图 3为重组织成GeoJSON数据的文本描述。

2.2 基于Cesium的海洋环境要素三维可视化系统实现

本文依托JAVA和JavaScript开发语言, 基于Cesium的三维可视化结果构建了海洋环境要素三维可视化系统, 总体框架如图 4所示。

海洋环境要素数据三维可视化系统分为数据层、逻辑层与用户层。数据层主要对NetCDF格式的海洋环境要素数据进行预处理, 转换为GeoJSON格式供Web端快速响应; 逻辑层主要通过Spring Boot框架^[17-18]实现数据服务和海洋环境要素三维可视化渲染; 用户层根据需要展示海洋环境要素在三维地球模型上的可视化结果, 系统功能设计如图 5所示。

由图 5可知, 海洋环境要素三维可视化系统主要实现以下功能。

数据预处理模块实现不同来源NetCDF数据的解析重构与数据抽稀, 并转换为GeoJSON格式与Web端快速响应。可视化模块主要包括地图基本操作及海洋环境要素数据三维表达, 地图基本操作支持地图缩放、二三维切换和地图底图变换; 海洋环境要素三维可视化支持标量场数据基于点方式可视化的三维渲染、矢量场数据点图标映射法和流线法的可视化渲染。数据管理模块实现了海洋环境要素数据简单管理, 主要包含数据下载、上传和删除功能。系统整体界面如图 6所示。

在系统可视化展示中, 基于点方式的可视化方法实现了全球海洋环境标量场数据三维可视化, 以海表面温度为例, 不同颜色表示海表面温度的高低(由红色到蓝色表示温度从高到低), 海表面温度数据渲染结果如图 7a所示。该方法通过颜色值变化表示不同位置海表面温度值的渐变, 直观明了。基于点图标映射法和流线法实现了全球海洋环境矢量要素的三维可视化, 以风场数据为例, 点图标映射法通过不同颜色表示风速强弱(从红色到蓝色表示风速由强到弱), 箭头偏转方向表示该点当前风向(图 7b), 该方法易于实现, 但数据密度较大时, 易出现图标堆叠现象, 不利于信息的进一步分析; 流线法同样以不同颜色表示风速强弱(由红色到黄色表示风速从强到弱), 流线流动方向表示风向变化, 相比于点图标映射法, 增加了数据的动态特征, 提高了可视化渲染效果, 绘制结果如图 7c所示。

由海洋环境要素数据可视化结果可知, 基于点方式的标量场可视化方法通过不同颜色表示数值大小, 简单直观, 有效提高了标量场可视化效率; 基于点图标映射法的矢量场可视化方法通过箭头偏转方向表示风速方向, 箭头颜色表示风速大小, 绘制便捷高效, 但数据密度较大时箭头易出现杂乱重叠现象, 且无法显示矢量场连续变化; 基于流线法的矢量场可视化方法中流线方向表示矢量场运动方向, 流线颜色表示矢量场数值大小, 相比于点图标法, 增加了矢量场的动态特征, 更加形象地模拟了矢量场在三维地球中的存在情况。

3 结论

本文结合海洋环境要素数据的特点, 主要实现了不同可视化方法在Cesium开源地图框架下的三维渲染, 得出以下结论: 1) Cesium支持特定的数据格式, 将NetCDF数据格式转换为Cesium开源框架支持的GeoJSON数据格式是可视化渲染的基础工作。2) 将二维可视化渲染中效果较好的点方式可视化法、点图标映射法和流线法应用于Cesium三维地球引擎, 实现了海洋环境标量场与矢量场数据的三维可视化渲染。与二维海洋环境要素可视化结果相比, 更加直观形象地模拟了真实海洋环境, 为用户了解复杂海洋环境提供借鉴。

目前系统基于Cesium的标量场可视化结果未与岸线完全贴和, 下一步将尝试使用不同数据插值方法提高岸线周边的绘制精度; 当前只使用了NetCDF单一数据格式, 未考虑三角格网数据和空间分布不均匀数据等复杂数据, 下一步将研究不同格式海洋环境要素数据用于Cesium的可视化渲染方法。