環境水流的云計算模擬系統

趙仕霖，金 生，金 戈，張 南

(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相集成的流場三維可視化。云計算描述了一種新的信息技術與商業服務的消費與交付模式。基于云的水動力計算系統使用戶能夠僅僅通過瀏覽器就能像安裝在個人計算機中的應用程序那樣完成模擬。在云中，模型建立以及計算相關的資源都獨立于個人電腦存放在服務器中，利用網絡相關的工具或是應用以服務的形式提供給用戶。因此，用戶利用系統內置的模型模板，除了通過瀏覽器給“云”發送指令和接受數據外，經過很少的操作就能夠完成計算模擬。針對新的工程項目，系統設置了建模導航，用戶可以依據建模導航完成新模型的建立，一定程度上降低了模型建立的復雜度。用戶端電腦無需太高的配置，可以借助于部署在云端的高性能計算機完成整個計算過程，大大降低了計算所需的時間。將來作者還會針對提高系統的三維可視化效率以及增加網絡虛擬現實效果進行進一步的研究。