高分辨率海洋标量场大屏动态可视化方法研究

张广宇，张小垒

(青岛大学计算机科学与技术学院，青岛 266071)

随着海洋观测技术的不断发展，海洋数据可视化广泛应用于海洋渔业、交通、环境检测等领域[1]。数据收集设备的改进使海洋数据的分辨率越来越高[2]，能满足大屏可视化需求[3-4]并提供精准信息，但同时也增加了渲染数据量，增大了可视化难度。目前，金字塔模式[5]、LOD动态调度算法[6-8]需要提前准备不同层级[9]下，不同数据源的图层切片[10]，通过视野范围、数据源发生变化时调用对应的瓦片，实现动态可视化。虽能节省数据渲染的时间，但是降低了系统可视化的实时性，限制了屏幕大小，占用大量内存。GPU渲染[11-13]的效率要高于传统CPU渲染。分析读取不同数据源的文件之后，使用WebGL调用GPU渲染，可以提升数据渲染速率，实现动态可视化。为此，本文提出一种时变海洋数据预处理和组织替换的方法，利用GPU渲染，基于web端研究全球视角下高分辨率海洋标量数据在不同时刻的实时渲染以及三维时变动态可视化，以期提升渲染效率，节省存储空间。

1 平台方案

1.1 分布式架构

全球海洋标量数据动态可视化系统可以对多种数据进行动态时变可视化渲染[14]。系统渲染经过预处理组织优化的时变数据，展示动态可视化效果，向用户提供交互服务。系统基于Cesium框架开发，使用分布式架构并发组织优化时变数据。系统包括1台主服务器和4台通讯服务器，如图1(a)所示。主服务器负责时变数据预处理、接收响应前端请求、提供接口；通讯服务器负责存储时变数据文件、读取发布数据。使用浏览器/服务器(B/S)架构，浏览器利用JavaScript语言，使用GPU渲染时变数据；服务器使用Node.JS开发语言，利用WebSocket进行前后端通讯[15-17]。系统框架包括数据层、服务层、逻辑控制层、可视化层、应用层，如图1(b)所示。

图1 系统体系架构(a)分布式结构；(b)系统框架

1.2 系统组成

系统设计了数据预处理、时变可视化渲染以及交互三大模块以适应数据自身特性和系统应满足的可视化需求。数据预处理模块需要完成时变数据的优化组织和数据文件更新，实现全球范围高分辨率海洋标量数据的动态可视化，面临的首要问题就是庞大的数据量。因此，时变数据需要通过预处理从而提高渲染效率。由于引入变化阈值会导致变化数据的筛选出现误差，需要提前处理更新文件。时变可视化模块是对时变数据的加载渲染及显示，利用点对象的不同的颜色可视化表达信息要素值，每个渲染点组成全球范围的整体可视化效果。交互模块中，系统提供要素值信息查询、自定义范围划定、可视化进程控制、渲染帧请求方式改变等功能，附加要素信息颜色参考表，为用户掌握数据变化规律，预测后期态势提供更加精准、直观的信息参考，给予用户良好的交互体验。

2 高分辨率时变数据可视化

海洋标量场的可视化主要采用色差方式来表达标量场中的数据分布，不同标量值用不同颜色标示，颜色相近的两个网格表示其位置的标量数据取值也是相近的。本文提出的面向高分辨率海洋标量场数据的高效时变可视化方法是根据人眼色差识别度的研究结果，确定数据时变阈值。渲染流程如图2所示，如果某个位置在两个连续时间点的数据变化小于时变阈值，将不重新渲染该位置，这能减少时变渲染数据量。同时，精准定位需要更新的渲染命令，按需更新，能够提高可视化效率。

图2 时变渲染流程

2.1 时变阈值确定

调研时随机抽取30人，调研内容包括设置多个差值作为候选阈值，要素值区间经过细分使每种颜色再细分出三种深浅不一的颜色，每种颜色对应的两个要素值在不同差值时循环交替渲染，检验参与人员是否可以观察到颜色变化，变化是否明显。利用CIEDE2000色差公式计算不同差值下的色差，结合调研结果，确定最终的变化阈值。

不同差值时观察到颜色变化的人数和色差结果统计见表1。可以看出，人眼不易识别出蓝色和红色的变化，差值敏感度较小，差值大于0.3时可以观察到颜色变化；紫色、棕色和黄色差值敏感度较大，差值大于0.1时观察到颜色变化。CIEDE2000 色差公式取NBS色差单位[18]，可以更加客观地反应人眼对不同颜色色差的辨别能力，给出与目视评价更一致的结果[19]。NBS单位色差值不同范围内对应的感觉色差程度见表2。结合调研结果和计算得到的色差值，为了覆盖更多变化数据，选取0.1为变化阈值，即要素值差值大于等于0.1，则称数据发生变化。

表1 观察到颜色变化的人数以及色差计算统计(30人)

表2 NBS单位色差值范围感觉色差程度

2.2 时变数据组织结构

系统实验数据的分辨率为0.05°×0.05°，数据划分规则如图3所示。单日海洋温度数据一共被划分成512个数据块，每一个数据块中包含225×225个数据，代表经纬度范围是11.25°×11.25°。循环遍历相邻两天的数据，差值计算，引入变化阈值筛选变化数据。结合划分规则，记录下该数据的初次划分序号i、数据块号j、在数据块中的序号k以及变化数据值value，其中k=225×m+n(m，n分别

图3 数据划分规则

图4 时变数据结构

代表变化数据在数据块中的行下标和列下标)，时变数据结构如图4所示。参照i值，将时变数据写入对应文件，预处理流程如图5所示。对比相邻两天的数据文件，其中一份数据称为待比较数据，另一份称为比较数据。比较数据中大于变化阈值的数据作为变化数据会被记录，待比较数据中相同位置的数据更新为变化数据，数据文件更新完成。更新后的数据参与下一轮比较，避免筛选误差。

图5 数据预处理

2.3 使用前端GPU时变渲染

使用4台通讯服务器读取、组织数据，整理成数据块，转换为JSON格式，利用WebSocket传给主服务器。主服务器循环遍历块中数据，转换数据类型，调用GPU进行数据点渲染，并生成一条渲染命令。系统存储渲染命令，记录命令标识，依次执行渲染命令完成全球范围海洋数据的初始渲染。系统通过更新初始渲染命令完成时变渲染。渲染命令不是按序存储，根据时变数据结构，通过i，j计算得到命令标识，计算公式为i× 128 +j，可以准确查找渲染命令。k值确定待更新的要素值在命令中的位置，转换value值完成数据更新，生成一条新的渲染命令，更新渲染命令，完成时变渲染。由此，去除了经纬度冗余数据，避免每次时变渲染由于渲染命令的无序性而对所有数据进行更新，减少数据传输量和需要渲染的数据量，提高数据的传输速度和渲染速度。

3 实验结果

选取2018年全年(1个月为时间跨度)，数据分辨率0.05°×0.05°的海洋温度数据进行验证。系统采用分布式架构，每一台服务器硬件相同，操作系统为64位win10系统，处理器为Intel Core i5，内存16 G，显卡为NVIDIA GeForce GTX 1050 Ti，使用Google Chrome浏览器进行可视化界面展示。

3.1 全球海洋标量数据时变动态可视化

2018年不同时期全球海洋温度可视化效果如图6所示。每台通讯服务器对应主服务器的一个前端子进程，实现数据的并发处理，结合GPU渲染，提高渲染速度。系统按照时间顺序读取预处理好的时变数据文件，组织渲染时变数据，展示动态可视化效果。由于不同日期的高分辨率数据一次性渲染，无论视角如何改变，都可以直观地观察到清晰、详细的海洋温度变化情况，为之后的工作提供指导。系统优化了渲染帧的请求进程，只有在移动镜头时才会请求渲染帧，从而避免移动卡顿。

图6 时变海洋温度可视化(a)2018年1月1日；(b)2018年3月1日；(c)2018年10月1日

3.2 海洋标量场信息查询与范围划定

海洋标量信息查询是该系统所提供的主要交互功能之一，用户点击鼠标获取对应位置的数据信息。如图7(a)所示，系统能获取到该点经纬度和对应日期，通过判断数据所处文件及其在文件中的位置，获取对应要素值，可在屏幕上同步显示。该系统还可以实现自定义范围划定，如图7(b)所示。用户点击鼠标确定起始点，移动鼠标划定范围；点击鼠标确定终点，照相机会自动定位到该范围位置，从而查看自定义范围数据变化全过程。用户不需要使用滑轮调整照相机与三维模型的距离，便可以快速掌握特定范围的数据变化信息。

图7 系统交互功能(a) 海洋标量数据查询；(b)自定义范围划定

3.3 时变数据渲染速度对比

不同经纬度范围内经过优化的海洋数据与未优化的海洋数据时变渲染所需平均时间如图8所示。对比发现，经过优化之后的时变数据渲染所需时间远小于未经过优化的时变数据，且在不同时间段内渲染所需时间有着较为明显的变化。引入变化阈值减少了大量非必需数据的渲染，提高了渲染效率。同时，系统的渲染命令并非是有序的。没有经过优化的时变数据无法正确匹配渲染命令，不同日期的数据需要全部重新渲染，严重影响更新渲染效率。时变数据优化之后，通过命令标识准确定位渲染命令和命令中待更新数据的位置，更新数据得到新的渲染命令，完成时变渲染。优化方法在数据传输过程中去除经纬度冗余数据，减少数据传输量，提高数据传输速度；更新渲染命令，加快数据渲染速度，提升时变更新效率，所需时间的快慢取决于变化数量。

图8 不同范围时变用时差异对比(a)纬度(-90°，0°)，全经度时变渲染用时差异；(b)纬度(0°，90°)，全经度时变渲染用时差异

4 结论

本研究实现了面向高分辨率大屏展示的海洋标量场时变动态可视化方案，提出了基于时变阈值的高效时变可视化方法，以海洋温度为实验数据验证方法可行性。该方法在不影响可视化效果的前提下，减少了渲染更新数据量，利用GPU渲染需要更新的渲染命令提高了渲染效率，实现了多种数据实时可视化渲染且节省了内存空间，为大屏可视化提供了思路。由于本研究是在三维地球模型加载了实时渲染图层，仍是基于二维的动态可视化,下一步研究通过提高渲染效率实现三维动态可视化。