环境水流的云计算模拟系统

赵仕霖，金 生，金 戈，张 南

(1.大连理工大学 建设工程学部，大连 116024；2.国家海洋环境监测中心，大连 116023；3.辽宁对外经贸学院，大连 116052)

为了研究水流运动的时空特性，越来越多的水动力学模型应用到工程实际中，例如 HydroInfo、Delft3D、EFDC、MIKE、Flow-3D等等[1-4]。然而这些模型都是作为桌面应用程序实现的，需要在每台电脑上安装相应的软件包才能够运行，很少用来作为公共网络计算服务。此外，它们的后处理模块大多是以二维水平或垂直平面的方式呈现的[5]。计算结果的可视化对用户交互以及用户控制有所限制，包括缺少对自由缩放、平移、旋转以及更高级交互分析的支持[6]。

为了在 Web平台上得到如 PC端应用的体验度，许多的解决方案应运而生。1994年 Mark Pesce和 Tony Parisi创建了称为 Labyrinth(迷宫)的浏览器，这是万维网上3D浏览器的早期原型。1997年12月 VRML 作为国际标准正式发布，1998年1月正式获得国际标准化组织 ISO批准，简称 VRML97，它是最初的 Web3D标准[7]。作为 ISO/IEC国际标准，VRML的稳定性得到保证，迅速地推动了网络三维技术的应用。2002年 Web3D 联盟发布了 X3D标准草案。2004年8月，X3D规范被 ISO批准为 ISO/IEC 9775国际标准。随后，Cult3D、Viewpoint、Java3D、Unity3D、Flash3D等三维可视化技术相继出现。

Web3D的一个优点就是它能够与可视化生态系统的现代工具更好的结合在一起。此外，在构建和共享可视化模式中，网络是与平台依赖最小的一种。很多学者将 Web3D相关的网络技术应用到水动力学模型计算结果的展示中。Liang[8]等人针对 Tamshui河开发了基于 GIS的虚拟水动力模型系统，他们将模型的预测结果转化为 VRML的格式，然后将地形、水流以及泥沙分布集成到虚拟环境中。Wenisch[9]等人展现了基于计算流体力学的可交互的转向系统，将虚拟现实环境与一台高性能计算机相连接。Zhang[10]等人运用 MultiGen软件制作了船舶的三维视图，船舶的纹理都是取自真实的船舶照片。Thekkedan[11]等人运用 VRML为执行检查任务的遥控车辆创建了虚拟现实场景。然而上述提到的不同种类的 Web3D技术，要么只适用于特定的浏览器，要么浏览器通常需要安装不同的插件实现模型的渲染和显示。同一种 Web3D技术，插件的不同也会生成不同质量的渲染画面。因此，用户需要考虑浏览器插件对不同系统以及浏览器的兼容性，根据用户对画面质量的要求选择合适的插件，大大影响了用户体验。这些研究都没有充分利用快速发展的网络技术带来的便利。

随着网络技术的提高，浏览器正在由简单的网页展示工具向可用度高的网络应用平台转变。这其中一个重大的提高就是 HTML5标准及其相关的 API的出现。HTML5是最新的 HTML标准，是一种用于万维网中构建和展示内容的语言[12]。它扩展了传统的 HTML 的一些特征，如二维图形、网络传输、本地数据存储等，并使得复杂的网络应用程序能够在不同的系统中运行。2009年8月，Khronos提出了一种针对网络上三维图形的 API-WebGL，它是 HTML5中 canvas元素的一个扩展[13]。首先，它利用 JavaScript脚本语言在网络中不借助于任何浏览器插件实现可交互的三维动画；其次，它借助于底层硬件加速能力来完成图形的渲染。在过去，用户只能依赖于插件或是下载本地应用程序来完成3D体验；由于 WebGL技术的出现，只需要简单的代码就能实现在网络中的三维可视化。无论是在电脑还是移动端，WebGL现在已经被所有最新版本的主流浏览器所支持。HTML5和 WebGL扫除了基于网络的可交互多媒体应用程序发展的障碍。

云计算通过浏览器以完全动态的方式为企业和个人提供虚拟计算、存储以及网络资源。为了满足使用大量处理能力的应用程序的峰值性能需求，云计算正受到越来越多的关注。Sun[14]等人运用云计算服务 Google Drive开发了环境决策支持系统 (EDSS)。Ercan[15]等人应用微软公司的 Azure云环境去执行一个模型率定工具，用于率定水文模型SWAT。将这个工具用到6个不同的模型中，结果表明这种方式大大提高了模型率定的速度。Wan[16]介绍了一种基于公共云平台的洪水网络基础设施——CyberFLood。CyberFLood为决策者和用户实时收集、组织、管理和可视化多个全球洪水数据库。Kurtz[17]等人开发了一种基于云的用于实时预报和管理地下水的系统。该系统允许数据同化，并与云环境中的水文模型相结合，使用生成的预报数据进行地下水管理。

本文的研究重点是设计和开发一个基于云平台的水动力计算系统，该系统旨在为高校师生、科研工作者等相关人员利用水动力学模型解决环境水流问题时提供建模以及计算服务。用户只需要使用浏览器就能够完成复杂的水动力学自动化建模以及计算模拟，与传统的水动力学数学模型相比，省去了繁琐的软件安装过程；将系统部署在云服务器中，用户不需要很高的计算机配置，可以充分利用云端的计算资源。此外，基于全新的网络应用平台，应用者模拟计算遇到困难时，系统开发人员或是模型专家能够提供远程指导服务，提高了工作效率。系统内置了一系列的相关模型模板，一定程度上简化了模型建立的复杂度；此外，将模型以及计算结果集成到 WebGIS平台，实现无插件、GPU硬件加速、空间多维度展示水动力计算结果，为决策制定者提供科学依据。

1 理论与方法

1.1 水动力学模型HydroInfo

HydroInfo是由大连理工大学开发的计算复杂水流与输运问题的大型数值模拟模型。在理论研究，算法分析与工程应用的过程中，HydroInfo进行了大量的解析数值验证、试验室测量数据验证与原型观测数据验证，广泛的实际工程应用显示了该模型的可靠性、稳定性与并行计算的高效性。它的理论基础是以下几组方程

根据流动的特点，前人进行了多种方式的简化近似处理。对于环境流动问题，针对问题几何尺度的特点，HydroInfo应用的数学模型有一维圣维南方程组、平面二维浅水模型、三维静压模型、动水压强模型、短波 Boussinesq方程、工程泥沙模型等。计算模块将库群、河网、泄水建筑物、堤坝、蓄滞洪区与淹没区等作为大系统统一处理，根据实际问题的特点及空间分辨率要求，采用分区动态耦合算法分别采用水量平衡关系、河网一维、平面二维的流动、自由表面三维的流动与输运微分方程组作为控制方程。利用系统的分解-协调算法，为建立基于网络计算的实时预报与决策系统提供计算服务。HydroInfo的功能模块主要有流域河网与管网、流动与输运、二维水流泥沙波浪、三维自由表面流动、多维耦合、渗流与稳定。

1.2 系统架构

不同于传统的基于桌面应用的水动力学软件，本文开发的系统基于 Browser/Server架构，系统架构如图1所示。在服务器端，水动力学模型 HydroInfo提供计算服务，是整个系统的核心，包括离散方法、数值模型、文件系统、数据库引擎等部分。数据库提供整个系统的数据支持，包括图形数据、建模数据、计算数据、水文数据等；在浏览器端，主要有两部分：建模部分以及流场展示部分。主要功能为数值模型建模、参数设置、模拟结果统计查询以及流场的展示等；Ajax 技术用于在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求)，这样可在不重新加载页面的情况下与 Web 服务器交换数据，即不需要刷新整个页面，就可以产生局部刷新的效果。

图1 系统架构Fig.1 System architecture

由于本文基于云的水动力计算系统的整个用户体验都是基于网络的，因此前端设计对于平台整体的可用性具有关键的作用。现在的前端框架允许以组织良好和高效的方式来管理大型项目，本文采用了功能强大的前端框架 VUE。本系统涉及到强交互的网络内容，包括表单、表格、图形等，是 VUE项目的典型应用场景。同时采用 VUE框架大大提高了源代码的可维护性。

1.3 三维可视化

本文采用成熟并且开源的 WebGL 3D引擎图形库 Three.js[18]以及其他一些 JavaScript库在浏览器中建立三维场景。编程者无需知道 WebGL复杂的底层细节和着色语言，就能方便快捷的建立具有真实感的三维场景。

三维场景采用水动力学模型计算的结果来构建，它们通过文件的形式存储在服务器端。利用 Ajax技术向服务器端发送请求，接收到服务器端返回的数据之后，通过浏览器进行解析。有了数据支持之后，就可以进行三维场景的绘制。具体步骤如下：(1)创建 THREE.Scene对象，它是存放所有不同对象的容器；(2)在场景中添加摄像机，Three.js提供了两种不同的摄像机：正交投影摄像机和透视投影摄像机。本文中选用能够产生更逼近真实世界效果的透视投影摄像机，距离摄像机越远，物体就会被渲染的越小；(3)向场景中添加光源，以使得渲染的场景可见。Three.js中包含了大量的具有不同用法的光源，本文中的光源为 THREE.AmbientLight和 THREE.DirectionalLight。THREE.AmbientLight的颜色会叠加到场景现有物体的颜色上，THREE.DirectionalLight可以用来创建阴影；(4)创建三维网格，这一步是整个过程中最困难也是最重要的部分。它由两部分组成，几何体和材质。THREE.Geometry定义了物体的形状。利用水动力学模型生成的非结构网格信息，分别将网格的节点坐标以及连接关系赋给 THREE.Geometry的实例对象的 vertices以及 faces属性，执行 computeFaceNormals方法决定每个面的法向量，完成几何体的创建；本文采用 THREE.MeshLambertMaterial定义了物体的外观和材质，它是一种考虑光照影响的材质，用于创建暗淡的、不光亮的物体，根据几何体高程值的大小来确定每个顶点的颜色，为这个材质创建渐变的效果。最后将几何体和材质合并成能够添加到场景中的网格；(5)坐标变换，通过平移、缩放、旋转等坐标变换方式，将需要渲染的物体适中显示；(6)WebGLRenderer将利用电脑显卡将场景在浏览器中渲染出来。

网络环境下普通三维可视化场景能够达到与康苏海[19]以及张南[20]展示的相同的渲染效果。他们基于客户端/服务器(C/S)架构，利用WPF技术在客户端实现了溃坝水流的三维流场展示。本文利用 A-Frame框架可以将上述绘制的普通三维场景变为虚拟现实场景。将前文所述的场景中的对象分别添加到 A-Frame组件，然后组合成为不同类型的实体。从而完成三维虚拟现实场景的建立。此时的屏幕被切割为两部分，两个屏幕所显示的内容具有一定的差异，用户借助手机和 Google Cardboard 就能产生沉浸感的体验。此外，用户还能够利用基于凝视(Gaze-Based)的光标组件与虚拟现实场景进行交互。

2 结果与讨论

2.1 系统功能及实现

本文自主开发的环境水流云计算模拟系统的开发环境为 JetBrains WebStorm 2018.1.1 x64和 Microsoft Visual Studio 2010，测试浏览器 Google Chrome 67。系统的前端开发解决方案具体组成如下：(1)整个前端项目以Vue作为开发框架，充分利用Vue具备的MVVM思想以及组件化开发页面方式，可以有序处理水动力计算产生的复杂数据结构，便于代码组织管理以及开发效率的提高，增强了系统的可维护性；(2)Maptalks作为地图引擎以及强大的插件生态为系统提供WebGIS功能。利用它的图层系统高效率管理WebGIS可视化模块；(3)用Three.js在浏览器中绘制三维模型，简化了流场三维可视化的过程。充分发挥它功能丰富、速度快、扩展性强等优势；(4)利用Element UI组件库提供的配套设计资源，简化系统UI设计流程，将更多精力专注于系统的业务层面。

如图2所示为系统的主页面，主要由建模导航区、图形展示区、显示控制区等组成。建模导航区提供给用户自动化建立水动力学模型的流程向导。图形展示区主要负责对计算结果的三维展示，与 GIS系统集成，并且借助于图表形式，生动且互动性高的展示水力要素分布的时变过程，如图3所示。系统同时实现了流场任意位置处的不同水力要素的时间变化过程图表展示，如图4所示。系统在包括手机浏览器在内的主流浏览器中测试运行良好，图5展示了系统在手机浏览器中的运行状况，分别为建模导航、水文气象条件设置、流场三维展示以及基于虚拟现实的流场可视化。

图4 水力要素时间变化过程图表展示Fig.4 Time-varying process of the hydraulic elements

2.2 系统建模过程——以渤海海冰模拟为例

将本文研发的系统应用在渤海海域2010年冰情模拟之中，整个过程分为前处理、远程计算模拟、后处理三个阶段。前处理阶段，将渤海计算域边界的CAD文件导入到系统，依据建模导航，确定网格尺度并完成网格划分；然后将地形、水位初值、糙率等数据自动化插值到网格节点；输入边界条件从而完成模型的建立。建模导航如图6-a所示。模型建立完成之后，输入计算参数进行远程模拟，如图6-b所示。计算完成之后，进行后处理。如图7所示，分别展示了渤海海域水深、速度、温度、冰厚等水力要素的分布图。在渤海计算域内任意一点都能够查看水力要素随时间的变化过程，如图4所示。

3 结论与展望

本文建立的环境水流的云计算模拟系统，用于水流的水动力及输运过程模拟。实现了自动化建模、远程计算、与 WebGIS相集成的流场三维可视化。云计算描述了一种新的信息技术与商业服务的消费与交付模式。基于云的水动力计算系统使用户能够仅仅通过浏览器就能像安装在个人计算机中的应用程序那样完成模拟。在云中，模型建立以及计算相关的资源都独立于个人电脑存放在服务器中，利用网络相关的工具或是应用以服务的形式提供给用户。因此，用户利用系统内置的模型模板，除了通过浏览器给“云”发送指令和接受数据外，经过很少的操作就能够完成计算模拟。针对新的工程项目，系统设置了建模导航，用户可以依据建模导航完成新模型的建立，一定程度上降低了模型建立的复杂度。用户端电脑无需太高的配置，可以借助于部署在云端的高性能计算机完成整个计算过程，大大降低了计算所需的时间。将来作者还会针对提高系统的三维可视化效率以及增加网络虚拟现实效果进行进一步的研究。