基于Cesium的数据可视化技术在水利上的应用

乐世华，董 静，张 煦，刘卫林，田春思，李亦凡，吴志明，刘德龙

(1.北京中水科水电科技开发有限公司，北京 100038；2.中国水利水电科学研究院自动化所，北京 100038;3.南昌工程学院江西省水文水资源与水环境重点实验室，江西 南昌 330099)

随着科学技术的发展，数值模拟、计算机图形学、计算机视觉、虚拟现实等技术手段的不断提升，传统的静态展示已无法满足各个领域对科学可视化的视觉需求。科学可视化是20世纪80年代兴起的一门技术，广泛运用于医学、气象、空气动力学、地球物理勘探等领域，运用此技术可通过对海量数据的提取分析来洞察物理现象、发现事物的规律，因而也成为制约科学计算质量和效率关键因素之一[1]。典型的可视化软件包括Vis5D、EVS、LYNX、AVS、apE、DX等[2]，通过这些可视化软件可有效展示可视化数据，但无法集成到已有的三维平台，造成一套数据需要多套软件或平台进行展示现象，与水利部“一张图”号召相违背，因而，有必要对相关可视化技术进行研究，并将其集成到现在系统。刘成堃等[3]在Open Scene Graph中实现了真实的三维地形地貌环境下进行洪水过程的动态推演分析；Zhi Guozheng等[4]通过将城市排水模型、洪水模拟模型和3D可视化相结合，以3D动态可视化的形式分析了洪水变化过程方法；耿敬等[5]基于GIS构建了三维场景，结合Mike21二维洪水数学模型，实现了依兰航电枢纽区段洪水淹没三维动态可视化；康子非等[6]在Google earth完成虚拟场景的搭建，并对二维水动力数值计算进行仿真，实现了流场的实景可视化；许小华等[7]采用3D Max结合CityEngine规则建模的方式进行三维场景的搭建，实现了鄱阳湖在不同水位下的三维地形信息展示，再现了鄱阳湖水利信息虚拟场景；高学平等[8]研制了大型景观湖仿真演示系统，实现了景观仿真和水利设施的仿真；周正印等[9]在GIS系统中对溃坝洪水水情信息进行分析，评估了溃坝洪水预警的管理效果;张越[10]构建了一种地下巷道中流体三维可视化模拟系统，有效展示巷道内流体流动细节。以上系统均能有效实现数据三维可视化，但多数基于单机版平台构建，而面对全球化分布式协同合作的趋势，单机版平台极大地限制了以这种Web端进行数据可视化展示方式的发展，终端的Web化将更加有利于解决远程协作可视化的问题。因而，有必要在B/S端对进行数据可视化方面的研究，以满足远程多用户对数据信息访问及科学数据可视化的需求。

本文以Cesium为基础，并在其上进行多种可视化技术的有机融合和集成应用。Cesium是用于创建3D虚拟地球和2D地图的开源JavaScript库，它利用WebGL进行硬件加速且无插件，并提供跨平台和跨浏览器的功能[11]。当前已有多人基于Cesium实现了对不同场景、不同数据的展现，实现了Web化的数据可视化。毕硕本等[12]基于Cesium进行了热带气旋灾害信息可视化研究；连芳等[13]基于Cesium对大气环境信息可视化进行了系统设计，实现了河南省全境全覆盖的大气环境网格面源数据三维可视化的应用；乐世华等[14]基于Cesium搭建了虚拟流域场景，并完成了流场可视化研究[15]。苏昊翔等[16]基于Cesium对卫星载荷可视化仿真分析平台进行了研究，使用B/S架构及WebGL技术，实现了数据计算与实时渲染分离，完成了仿真结果同步共享；本文通过对热力图、纹理投影映射、等值线实时绘制等可视化技术的研究，并对其进行有效融合和集成，实现水电站传感器、视频、监控、统计等观测和计算预警数据的三维化、动态化、实时化、可交互化，丰富了平台展示效果，满足平台的通用性，可集成性的要求，为三维平台更广泛应用奠定基础。

1 系统架构设计

水利业务数据动态可视化大多涉及空间信息内容，如流域内河道、水库等的空间分布，本文基于Cesium三维引擎构建Web三维系统，可实现地理空间上水利数据的三维可视化。具体架构见图1，系统架构分平台数据层、渲染引擎层及终端表现层，见图1右半部分；其中数据层为构建三维场景所需地形、影像、水利业务数据等，终端表现层为用户提供直接交互展示界面，实现远程Web端跨平台展示，渲染引擎层采用Cesium作为渲染引擎。渲染引擎见图1左半部分，引擎内核部分包括支撑引擎的线性代数、坐标系统、矩阵、时钟等部件；基于引擎内核可构建视图Viewer,Viewer包括Scene、Camera、InfoBox、CesiumWidget、Entity、DataSourceCollection等;Scene用于构建地球与地图组件，包括Globe、SceneMode、FrameState、MapProjection、PrimitiveCollection、相机、图层等；PrimitiveCollection中的基元(Primitives)是Cesium图形渲染栈最顶层，通过它可构建真实世界对象。借鉴threejs里Mesh、Geometry、Matherial的渲染方式[17]，本文在Primitives上进行封装，构建新的Mesh、Geometry、MeshMatherial，见图1虚线框部分，并通过Uniforms、顶点与片元着色器，可灵活展现各种材质，同时也可实现并行计算[15]，此方式较Cesium原生Primitive结构更加清晰，使用更加便捷。本文所构建河道水体水面、热力图网格、卫星云图网格等均使用封装后的Geometry、MeshMatherial，实现水利数据灵活呈现。

图1 系统架构设计示意

2 水利业务可视化技术方法及原理

对水利业务数据(水情、雨情、气象、水力要素、水利工程、经济社会用水信息等)进行可视化，有助于水利从业者直观形象理解其含义。本文拟结合标量视化、投影纹理映射、卫星云图数据可视化、实时等高线与等值面绘制、电力生产数据统合展示等对几项常用水利业务相关的可视化技术展开可视技术与仿真平台集成研究。标量可视化以颜色对不同指标进行表达，卫星云图以图像对卫星数据进行展示，实时等高线(等值面)可直观反映水深大小，综合展示系统对各种生产数据进行二三维图表化表示；各技术组合有效构成了Web三维可视化平台各个组件，形成有效的水利科学可视化工具。

2.1 标量可视化

随着科技的快速发展，传统的静态展示及散点展示已无法满足各个领域对可视化的视觉需求。为了更好地观察设备的趋向，利用传感器、视频、监控、统计的方式实现动态监测。以标量图来实现动态监测结果可清晰明了表达空间数据变化趋势，为决策者分析做出更好的决策方案提供支撑，有效应用于河湖的水深、浓度、温度等指标的展示。

2.1.1热力图

通过热力图简单聚合大量数据，并采用一种渐变色带的优雅表现形式，可以直观地展现空间数据的疏密程度或频率高低。其生成的原理可概括为以下4步[18-19]：①创建缓冲区，以监测数据点为圆心，设定一半径值，并创建缓冲区；②设置灰度值，对每个监测点的缓冲区，使用渐变的灰度色带从内而外，由浅至深地填充；③缓冲区叠加，对于有交叉的缓冲区区域，进行灰度值叠加，因而缓冲区交叉的越多，灰度值越大，但值域仍保持在0～255；④颜色映射，以叠加后的灰度值为索引，从彩虹色带中映射颜色，并对图像重新着色，从而生成热力图，结果见图2。

图2 生成的热力图

2.1.2水深(水温)图

对于水库、河道的属性数据如水深的大小(或水温高低、污染物浓度的高低)，通过不同颜色的可视化表达，可更清晰展示其效果。汪金城等[20]已实现对河流污染物扩散可视化模拟，详细介绍了模拟网格进行划分，颜色的填充，逼真地展现了污染的扩散过程。本文将在Web端进一步完成水深渲染可视化工作，具体原理过程见图3a，通过离散点，经过顶点变换、图元装配生成水体网格，最终结果见图3b。

a)水体网格构建原理

2.2 投影纹理映射

投影纹理映射是Segal等[21]在1992年提出的概念，用于将纹理映射到物体上，其纹理坐标通过视图矩阵与投影矩阵等进行变换而成。其目的主要是实现纹理坐标和三维空间顶点之间的匹配，该方式无需像传统纹理映射方式那样将纹理坐标从CPU传递至GPU赋值给对应模型的顶点，而只需在着色器中通过视图投影矩阵计算得到，从而实现纹理坐标和顶点坐标的匹配，另外，还能避免纹理扭曲变形现象，可有效应用于水利虚拟仿真三维场景中的监控视频融合。

投影纹理映射的流程是根据投影相机的物理参数，如空间位置、投影角度、坐标信息等，通过空间投影变换计算出模型中各个顶点相匹配的纹理坐标，并通过纹理坐标索引查得相应的纹理值，具体地可以通过以下步骤计算投影纹理映射坐标[22-23]：①将顶点坐标从物理空间转换到世界空间坐标系；②将世界空间坐标系坐标转换到以投影点为中心的投影空间坐标系；③再将投影空间坐标系坐标转换到投影裁剪空间坐标系；④将获得的投影顶点坐标归一化到[0,1]空间中，得到投影纹理坐标。

在顶点着色器中，物体的顶点坐标(x,y,z,w)T可用Cesium中内置变量position表示，相机的模型视图矩阵MV可用内置变量ModelViewMatrix表示。顶点着色器计算完纹理坐标后，通过varying变量projectorClipCoords传入片段着色器，然后进行纹理索引和颜色计算，得到最后投影的结果[24]。

通过使用投影纹理映射技术，可将实时视频或监控视频投影到三维模型上，监控视频需使用RTSP对视频监控图像进行解析，并转码成OGG格式流数据，实现在HTML5上播放[25]，构建虚实结合、真实感强的三维虚拟场景。

2.3 卫星云图数据可视化

气象数据是水文分析重要资源，通过与气象数据相结合，对气象云图进行展示，实时掌握区域内的天气情况，为区域的水文分析工作提供支撑。为了实现数据加载式的卫星云图展示，需要了解数据传递解析过程。

Cesium使用WebGL来进行硬件加速图形化的地图引擎，WebGL是浏览器与显卡之间的通信接口，为了满足 JavaScript 与显卡之间大量的、实时的数据交换，保证显示性能，它们之间的数据通信须使用二进制的格式，而非传统的文本格式。二进制数组由三类对象组成：ArrayBuffer对象、TypedArray视图和DataView视图。ArrayBuffer对象代表原始的二进制数据，TypedArray视图用来读写简单类型的二进制数据，DataView视图用来读写复杂类型的二进制数据。DataView视图支持Int8、Uint8、Int16、Uint16、Int32、Uint32、Float32、Float64 等8种数据类型，实现对不同长度的数据进行分类加载，进而实现定量化控制[26]。

2.4 实时等高线与等值面绘制

传统水动计算与可视化往往是分开的，待计算结果完成后，通过第三方软件如tecplot进行可视化，这样将失去了实时交互的可能性。平台通过结合GLSL语言完成浅水方程在GPU中的计算，计算的同时可对结果进行展示，从而实现实时交互性。基于式(1)的浅水方程组[27]建立流体物理方程，充分利用GPU并行能力以加速计算，实现高性能运行，在片元着色器中完成对流通量计算求解，得到水深值，并对计算水深进行等值线与等值面的绘制，实现等高线与等值面实时绘制效果。

(1)

式中h——水深；u、v——x、y方向平均流速；hu、hv——x、y方向流量；g——重力加速度，取9.81 m/s2；Zb——地形。

图形学中线的绘制原理[28]为：判断像素位置是否在直线内，如果像素点到直线的距离小于直线宽度的一半，则像素点在直线内部，进行线的着色绘制，否则，像素点不在直线内部，丢弃不进行绘制。

经过在GPU中浅水方程计算完成后得到水深h，对一定间隔的h进行线的绘制，即可得到等深线，因计算与显示同时在GPU中完成，减少了CPU-GPU之间的数据，增加实时交互的可能，并减少了传统数据后处理步骤，大大提高工作效率。

同理，也可实现等值面的绘制，两等值线间用一种颜色进行填充，这样便得到等值面，不同的间隔值可通过式(2)得到：

value=floor(height·levels)/levels

(2)

式中 floor——向下取整函数；levels——间隔密度控制参数。

3 应用案例与实验结果

通过上述热力图、水深属性标量可视化、投影纹理变换、气象云图绘制、水深等值线与等值面实时绘制等可视化技术的相关技术原理及方法，可以实现B/S端Web化基于Cesium的三维仿真平台在水利上的应用，更加有利于解决远程协作三维可视化的问题。

3.1 应用案例

3.1.1热力图

对于生成的热力图，一般为二维平面图，若将其作为纹理，映射到三维曲面，实现纹理贴图映射，可实现从二维到三维的转变，进一步扩展其应用，以江西电力生产数据为例，对其进行热力图展示，生成热力图作为纹理传递至MeshMaterial中的fragmentShader,经过坐标变换，完成与曲面Geometry的匹配，最终贴图效果见图4。渲染模块涉及Viewer、Scene、Camera、Primitive、Mesh、Geometry、MeshMaterial等。

图4 江西电力生产热力图

3.1.2水深(水温)图

以溃坝水深为例，首先将计算水体进行空间离散，对水体边界内用若干点来表示，每个顶点包含空间坐标(lon,lat)与水深值，使用Geometry构建水面及地形网格。将点数据传递到顶点着色器，经顶点变换、图元装配后传递至片元着色器，同时将彩色色带以纹理形式传递至片元着色器完成MeshMatherial的构建，使用图元上某一具体点的水深值对色带进行采样，得到此位置下所对应的颜色，最后经片段着色器输出得到最终的效果，渲染结果见图5。通过不同时间序列的以上步骤的重复操作，可得到水深的动态变化结果。渲染模块涉及Viewer、Scene、Camera、Primitive、Mesh、Geometry、MeshMaterial等。

图5 溃坝水深绘制

3.1.3投影纹理映射

将实时更新的监控视频投影到三维场景，结果见图6，图中三维场景为基于Cesium建立的三维数字城市模型，同时场景接入了监控视频。通过解码成视频流，将其加载至三维场景中，视频流以纹理形式传递至MeshMaterial中的fragmentShader,经过坐标变换，完成与投影视锥Geometry的匹配，得到河道船舶实时监控页面，为三维场景中通航船舶提供直观展示。渲染模块涉及Viewer、Scene、Camera、Primitive等。

图6 视频投影映射

3.1.4卫星云图数据可视化

本文加载的卫星云数据为Uint8类型，在客户端通过对以二进制数据进行解析，可得到ArrayBuffer对象并直接上传到GPU，可有效避免解码步骤，从而为实时数据更新提供保障。通过以上技术，构建云图空间网格得到曲面Geometry，每个网格点均为一具体云图数据，所有网格点均传递至MeshMaterial中的fragmentShader,经过数值与颜色转换处理，得到一张完整云图。对不同时间系列的云图数据加载，可完成结果的动态展示，结果见图7。渲染模块涉及Viewer、Scene、Camera、Primitive、Mesh、Geometry、MeshMaterial等。

图7 卫星云图三维展示

3.1.5实时等高线与等值面绘制

通过浅水方程的并行求解，结合等值线、等值面实时绘制图技术，可得到溃坝过程不同时刻不同视角下水深等值线实时绘制图，结果见图8。水面构建方法与3.1.2中相似，渲染模块涉及Viewer、Scene、Camera、Primitive、Mesh、Geometry、MeshMaterial等。

a)t1时刻

同时，GPU并行可满足实时交互操作，图9a中为实时交互添加的水注，水注以高斯公式进行增加。以鼠标点击点为中心，建立周边一定半径范围内的高斯方程的水注高度值，水注添加后，水流运动得到图9所示的结果，图9a—9d分别为之后不同时刻水波扩散的结果，等值面可很好反映水位的高低。

a)t1时刻

3.2 实验结果

本文基于Cesium三维引擎搭建三维虚拟仿真B/S平台，在ThinkPad s5笔记本上对前文所述可视化方法进行测试，实验环境使用硬件配置：Inter(R)Core(TM)i7-6700HQ 2.67 GHz 处理器(16 GB内存)，NVIDIA GeForce GTX960(4 G)显卡；软件配置：Windows 10操作系统，基于Cesium 1.31、Google Chrome 76浏览器。在以上环境下实现Web端平台各可视化技术展示，在浏览器分辨率1 396×641下，不同展示方法的帧率均保持每秒30帧以上(实时画面最低要求)，各方法具体运行帧率见图10，各技术均保证了实时交互页面流畅，同时实现了实时交互操作，各技术运行结果画面见3.1节。

图10 不同方法绘制速度对比

4 结语

科学可视化是科学计算中一个重要的模块，数值模拟、传感器监测均会创建大量数据。如何有效解释这些数据，便成为科学可视化的首要任务，通过以上研究可得出以下结论。

a)本文在Cesium三维引擎集成了热力图、投影纹理变换、实时等高线等高面绘制、卫星云图等可视化技术，从各技术的原理及实现方法方面进行了介绍，系统集成展示证明其可行性。

b)本文实现在B/S端完成三维可视化，相比C/S端单机版的应用程序更能满足远程异地协同化合作的需求。

c)本文实时等高线等高面绘制仅在小范围小场景进行试验，尚未应用到大范围场景，后期工作将在未来进一步开展。

d)通过对多种可视化技术的集成融合，将大大丰富原仿真系统在数据展示效果，为实时性、大容量科学计算及展示提供了依据，有望在虚拟现实和科学数据可视化方面得到更广泛应用。