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

(1.大連理工大學(xué) 建設(shè)工程學(xué)部，大連 116024；2.國家海洋環(huán)境監(jiān)測中心，大連 116023；3.遼寧對外經(jīng)貿(mào)學(xué)院，大連 116052)

為了研究水流運(yùn)動的時空特性，越來越多的水動力學(xué)模型應(yīng)用到工程實(shí)際中，例如 HydroInfo、Delft3D、EFDC、MIKE、Flow-3D等等[1-4]。然而這些模型都是作為桌面應(yīng)用程序?qū)崿F(xiàn)的，需要在每臺電腦上安裝相應(yīng)的軟件包才能夠運(yùn)行，很少用來作為公共網(wǎng)絡(luò)計(jì)算服務(wù)。此外，它們的后處理模塊大多是以二維水平或垂直平面的方式呈現(xiàn)的[5]。計(jì)算結(jié)果的可視化對用戶交互以及用戶控制有所限制，包括缺少對自由縮放、平移、旋轉(zhuǎn)以及更高級交互分析的支持[6]。

為了在 Web平臺上得到如 PC端應(yīng)用的體驗(yàn)度，許多的解決方案應(yīng)運(yùn)而生。1994年 Mark Pesce和 Tony Parisi創(chuàng)建了稱為 Labyrinth(迷宮)的瀏覽器，這是萬維網(wǎng)上3D瀏覽器的早期原型。1997年12月 VRML 作為國際標(biāo)準(zhǔn)正式發(fā)布，1998年1月正式獲得國際標(biāo)準(zhǔn)化組織 ISO批準(zhǔn)，簡稱 VRML97，它是最初的 Web3D標(biāo)準(zhǔn)[7]。作為 ISO/IEC國際標(biāo)準(zhǔn)，VRML的穩(wěn)定性得到保證，迅速地推動了網(wǎng)絡(luò)三維技術(shù)的應(yīng)用。2002年 Web3D 聯(lián)盟發(fā)布了 X3D標(biāo)準(zhǔn)草案。2004年8月，X3D規(guī)范被 ISO批準(zhǔn)為 ISO/IEC 9775國際標(biāo)準(zhǔn)。隨后，Cult3D、Viewpoint、Java3D、Unity3D、Flash3D等三維可視化技術(shù)相繼出現(xiàn)。

Web3D的一個優(yōu)點(diǎn)就是它能夠與可視化生態(tài)系統(tǒng)的現(xiàn)代工具更好的結(jié)合在一起。此外，在構(gòu)建和共享可視化模式中，網(wǎng)絡(luò)是與平臺依賴最小的一種。很多學(xué)者將 Web3D相關(guān)的網(wǎng)絡(luò)技術(shù)應(yīng)用到水動力學(xué)模型計(jì)算結(jié)果的展示中。Liang[8]等人針對 Tamshui河開發(fā)了基于 GIS的虛擬水動力模型系統(tǒng)，他們將模型的預(yù)測結(jié)果轉(zhuǎn)化為 VRML的格式，然后將地形、水流以及泥沙分布集成到虛擬環(huán)境中。Wenisch[9]等人展現(xiàn)了基于計(jì)算流體力學(xué)的可交互的轉(zhuǎn)向系統(tǒng)，將虛擬現(xiàn)實(shí)環(huán)境與一臺高性能計(jì)算機(jī)相連接。Zhang[10]等人運(yùn)用 MultiGen軟件制作了船舶的三維視圖，船舶的紋理都是取自真實(shí)的船舶照片。Thekkedan[11]等人運(yùn)用 VRML為執(zhí)行檢查任務(wù)的遙控車輛創(chuàng)建了虛擬現(xiàn)實(shí)場景。然而上述提到的不同種類的 Web3D技術(shù)，要么只適用于特定的瀏覽器，要么瀏覽器通常需要安裝不同的插件實(shí)現(xiàn)模型的渲染和顯示。同一種 Web3D技術(shù)，插件的不同也會生成不同質(zhì)量的渲染畫面。因此，用戶需要考慮瀏覽器插件對不同系統(tǒng)以及瀏覽器的兼容性，根據(jù)用戶對畫面質(zhì)量的要求選擇合適的插件，大大影響了用戶體驗(yàn)。這些研究都沒有充分利用快速發(fā)展的網(wǎng)絡(luò)技術(shù)帶來的便利。

隨著網(wǎng)絡(luò)技術(shù)的提高，瀏覽器正在由簡單的網(wǎng)頁展示工具向可用度高的網(wǎng)絡(luò)應(yīng)用平臺轉(zhuǎn)變。這其中一個重大的提高就是 HTML5標(biāo)準(zhǔn)及其相關(guān)的 API的出現(xiàn)。HTML5是最新的 HTML標(biāo)準(zhǔn)，是一種用于萬維網(wǎng)中構(gòu)建和展示內(nèi)容的語言[12]。它擴(kuò)展了傳統(tǒng)的 HTML 的一些特征，如二維圖形、網(wǎng)絡(luò)傳輸、本地?cái)?shù)據(jù)存儲等，并使得復(fù)雜的網(wǎng)絡(luò)應(yīng)用程序能夠在不同的系統(tǒng)中運(yùn)行。2009年8月，Khronos提出了一種針對網(wǎng)絡(luò)上三維圖形的 API-WebGL，它是 HTML5中 canvas元素的一個擴(kuò)展[13]。首先，它利用 JavaScript腳本語言在網(wǎng)絡(luò)中不借助于任何瀏覽器插件實(shí)現(xiàn)可交互的三維動畫；其次，它借助于底層硬件加速能力來完成圖形的渲染。在過去，用戶只能依賴于插件或是下載本地應(yīng)用程序來完成3D體驗(yàn)；由于 WebGL技術(shù)的出現(xiàn)，只需要簡單的代碼就能實(shí)現(xiàn)在網(wǎng)絡(luò)中的三維可視化。無論是在電腦還是移動端，WebGL現(xiàn)在已經(jīng)被所有最新版本的主流瀏覽器所支持。HTML5和 WebGL掃除了基于網(wǎng)絡(luò)的可交互多媒體應(yīng)用程序發(fā)展的障礙。

云計(jì)算通過瀏覽器以完全動態(tài)的方式為企業(yè)和個人提供虛擬計(jì)算、存儲以及網(wǎng)絡(luò)資源。為了滿足使用大量處理能力的應(yīng)用程序的峰值性能需求，云計(jì)算正受到越來越多的關(guān)注。Sun[14]等人運(yùn)用云計(jì)算服務(wù) Google Drive開發(fā)了環(huán)境決策支持系統(tǒng) (EDSS)。Ercan[15]等人應(yīng)用微軟公司的 Azure云環(huán)境去執(zhí)行一個模型率定工具，用于率定水文模型SWAT。將這個工具用到6個不同的模型中，結(jié)果表明這種方式大大提高了模型率定的速度。Wan[16]介紹了一種基于公共云平臺的洪水網(wǎng)絡(luò)基礎(chǔ)設(shè)施——CyberFLood。CyberFLood為決策者和用戶實(shí)時收集、組織、管理和可視化多個全球洪水?dāng)?shù)據(jù)庫。Kurtz[17]等人開發(fā)了一種基于云的用于實(shí)時預(yù)報(bào)和管理地下水的系統(tǒng)。該系統(tǒng)允許數(shù)據(jù)同化，并與云環(huán)境中的水文模型相結(jié)合，使用生成的預(yù)報(bào)數(shù)據(jù)進(jìn)行地下水管理。

本文的研究重點(diǎn)是設(shè)計(jì)和開發(fā)一個基于云平臺的水動力計(jì)算系統(tǒng)，該系統(tǒng)旨在為高校師生、科研工作者等相關(guān)人員利用水動力學(xué)模型解決環(huán)境水流問題時提供建模以及計(jì)算服務(wù)。用戶只需要使用瀏覽器就能夠完成復(fù)雜的水動力學(xué)自動化建模以及計(jì)算模擬，與傳統(tǒng)的水動力學(xué)數(shù)學(xué)模型相比，省去了繁瑣的軟件安裝過程；將系統(tǒng)部署在云服務(wù)器中，用戶不需要很高的計(jì)算機(jī)配置，可以充分利用云端的計(jì)算資源。此外，基于全新的網(wǎng)絡(luò)應(yīng)用平臺，應(yīng)用者模擬計(jì)算遇到困難時，系統(tǒng)開發(fā)人員或是模型專家能夠提供遠(yuǎn)程指導(dǎo)服務(wù)，提高了工作效率。系統(tǒng)內(nèi)置了一系列的相關(guān)模型模板，一定程度上簡化了模型建立的復(fù)雜度；此外，將模型以及計(jì)算結(jié)果集成到 WebGIS平臺，實(shí)現(xiàn)無插件、GPU硬件加速、空間多維度展示水動力計(jì)算結(jié)果，為決策制定者提供科學(xué)依據(jù)。

1 理論與方法

1.1 水動力學(xué)模型HydroInfo

HydroInfo是由大連理工大學(xué)開發(fā)的計(jì)算復(fù)雜水流與輸運(yùn)問題的大型數(shù)值模擬模型。在理論研究，算法分析與工程應(yīng)用的過程中，HydroInfo進(jìn)行了大量的解析數(shù)值驗(yàn)證、試驗(yàn)室測量數(shù)據(jù)驗(yàn)證與原型觀測數(shù)據(jù)驗(yàn)證，廣泛的實(shí)際工程應(yīng)用顯示了該模型的可靠性、穩(wěn)定性與并行計(jì)算的高效性。它的理論基礎(chǔ)是以下幾組方程

根據(jù)流動的特點(diǎn)，前人進(jìn)行了多種方式的簡化近似處理。對于環(huán)境流動問題，針對問題幾何尺度的特點(diǎn)，HydroInfo應(yīng)用的數(shù)學(xué)模型有一維圣維南方程組、平面二維淺水模型、三維靜壓模型、動水壓強(qiáng)模型、短波 Boussinesq方程、工程泥沙模型等。計(jì)算模塊將庫群、河網(wǎng)、泄水建筑物、堤壩、蓄滯洪區(qū)與淹沒區(qū)等作為大系統(tǒng)統(tǒng)一處理，根據(jù)實(shí)際問題的特點(diǎn)及空間分辨率要求，采用分區(qū)動態(tài)耦合算法分別采用水量平衡關(guān)系、河網(wǎng)一維、平面二維的流動、自由表面三維的流動與輸運(yùn)微分方程組作為控制方程。利用系統(tǒng)的分解-協(xié)調(diào)算法，為建立基于網(wǎng)絡(luò)計(jì)算的實(shí)時預(yù)報(bào)與決策系統(tǒng)提供計(jì)算服務(wù)。HydroInfo的功能模塊主要有流域河網(wǎng)與管網(wǎng)、流動與輸運(yùn)、二維水流泥沙波浪、三維自由表面流動、多維耦合、滲流與穩(wěn)定。

1.2 系統(tǒng)架構(gòu)

不同于傳統(tǒng)的基于桌面應(yīng)用的水動力學(xué)軟件，本文開發(fā)的系統(tǒng)基于 Browser/Server架構(gòu)，系統(tǒng)架構(gòu)如圖1所示。在服務(wù)器端，水動力學(xué)模型 HydroInfo提供計(jì)算服務(wù)，是整個系統(tǒng)的核心，包括離散方法、數(shù)值模型、文件系統(tǒng)、數(shù)據(jù)庫引擎等部分。數(shù)據(jù)庫提供整個系統(tǒng)的數(shù)據(jù)支持，包括圖形數(shù)據(jù)、建模數(shù)據(jù)、計(jì)算數(shù)據(jù)、水文數(shù)據(jù)等；在瀏覽器端，主要有兩部分：建模部分以及流場展示部分。主要功能為數(shù)值模型建模、參數(shù)設(shè)置、模擬結(jié)果統(tǒng)計(jì)查詢以及流場的展示等；Ajax 技術(shù)用于在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸(HTTP 請求)，這樣可在不重新加載頁面的情況下與 Web 服務(wù)器交換數(shù)據(jù)，即不需要刷新整個頁面，就可以產(chǎn)生局部刷新的效果。

圖1 系統(tǒng)架構(gòu)Fig.1 System architecture

由于本文基于云的水動力計(jì)算系統(tǒng)的整個用戶體驗(yàn)都是基于網(wǎng)絡(luò)的，因此前端設(shè)計(jì)對于平臺整體的可用性具有關(guān)鍵的作用?，F(xiàn)在的前端框架允許以組織良好和高效的方式來管理大型項(xiàng)目，本文采用了功能強(qiáng)大的前端框架 VUE。本系統(tǒng)涉及到強(qiáng)交互的網(wǎng)絡(luò)內(nèi)容，包括表單、表格、圖形等，是 VUE項(xiàng)目的典型應(yīng)用場景。同時采用 VUE框架大大提高了源代碼的可維護(hù)性。

1.3 三維可視化

本文采用成熟并且開源的 WebGL 3D引擎圖形庫 Three.js[18]以及其他一些 JavaScript庫在瀏覽器中建立三維場景。編程者無需知道 WebGL復(fù)雜的底層細(xì)節(jié)和著色語言，就能方便快捷的建立具有真實(shí)感的三維場景。

三維場景采用水動力學(xué)模型計(jì)算的結(jié)果來構(gòu)建，它們通過文件的形式存儲在服務(wù)器端。利用 Ajax技術(shù)向服務(wù)器端發(fā)送請求，接收到服務(wù)器端返回的數(shù)據(jù)之后，通過瀏覽器進(jìn)行解析。有了數(shù)據(jù)支持之后，就可以進(jìn)行三維場景的繪制。具體步驟如下：(1)創(chuàng)建 THREE.Scene對象，它是存放所有不同對象的容器；(2)在場景中添加攝像機(jī)，Three.js提供了兩種不同的攝像機(jī)：正交投影攝像機(jī)和透視投影攝像機(jī)。本文中選用能夠產(chǎn)生更逼近真實(shí)世界效果的透視投影攝像機(jī)，距離攝像機(jī)越遠(yuǎn)，物體就會被渲染的越?。?3)向場景中添加光源，以使得渲染的場景可見。Three.js中包含了大量的具有不同用法的光源，本文中的光源為 THREE.AmbientLight和 THREE.DirectionalLight。THREE.AmbientLight的顏色會疊加到場景現(xiàn)有物體的顏色上，THREE.DirectionalLight可以用來創(chuàng)建陰影；(4)創(chuàng)建三維網(wǎng)格，這一步是整個過程中最困難也是最重要的部分。它由兩部分組成，幾何體和材質(zhì)。THREE.Geometry定義了物體的形狀。利用水動力學(xué)模型生成的非結(jié)構(gòu)網(wǎng)格信息，分別將網(wǎng)格的節(jié)點(diǎn)坐標(biāo)以及連接關(guān)系賦給 THREE.Geometry的實(shí)例對象的 vertices以及 faces屬性，執(zhí)行 computeFaceNormals方法決定每個面的法向量，完成幾何體的創(chuàng)建；本文采用 THREE.MeshLambertMaterial定義了物體的外觀和材質(zhì)，它是一種考慮光照影響的材質(zhì)，用于創(chuàng)建暗淡的、不光亮的物體，根據(jù)幾何體高程值的大小來確定每個頂點(diǎn)的顏色，為這個材質(zhì)創(chuàng)建漸變的效果。最后將幾何體和材質(zhì)合并成能夠添加到場景中的網(wǎng)格；(5)坐標(biāo)變換，通過平移、縮放、旋轉(zhuǎn)等坐標(biāo)變換方式，將需要渲染的物體適中顯示；(6)WebGLRenderer將利用電腦顯卡將場景在瀏覽器中渲染出來。

網(wǎng)絡(luò)環(huán)境下普通三維可視化場景能夠達(dá)到與康蘇海[19]以及張南[20]展示的相同的渲染效果。他們基于客戶端/服務(wù)器(C/S)架構(gòu)，利用WPF技術(shù)在客戶端實(shí)現(xiàn)了潰壩水流的三維流場展示。本文利用 A-Frame框架可以將上述繪制的普通三維場景變?yōu)樘摂M現(xiàn)實(shí)場景。將前文所述的場景中的對象分別添加到 A-Frame組件，然后組合成為不同類型的實(shí)體。從而完成三維虛擬現(xiàn)實(shí)場景的建立。此時的屏幕被切割為兩部分，兩個屏幕所顯示的內(nèi)容具有一定的差異，用戶借助手機(jī)和 Google Cardboard 就能產(chǎn)生沉浸感的體驗(yàn)。此外，用戶還能夠利用基于凝視(Gaze-Based)的光標(biāo)組件與虛擬現(xiàn)實(shí)場景進(jìn)行交互。

2 結(jié)果與討論

2.1 系統(tǒng)功能及實(shí)現(xiàn)

本文自主開發(fā)的環(huán)境水流云計(jì)算模擬系統(tǒng)的開發(fā)環(huán)境為 JetBrains WebStorm 2018.1.1 x64和 Microsoft Visual Studio 2010，測試瀏覽器 Google Chrome 67。系統(tǒng)的前端開發(fā)解決方案具體組成如下：(1)整個前端項(xiàng)目以Vue作為開發(fā)框架，充分利用Vue具備的MVVM思想以及組件化開發(fā)頁面方式，可以有序處理水動力計(jì)算產(chǎn)生的復(fù)雜數(shù)據(jù)結(jié)構(gòu)，便于代碼組織管理以及開發(fā)效率的提高，增強(qiáng)了系統(tǒng)的可維護(hù)性；(2)Maptalks作為地圖引擎以及強(qiáng)大的插件生態(tài)為系統(tǒng)提供WebGIS功能。利用它的圖層系統(tǒng)高效率管理WebGIS可視化模塊；(3)用Three.js在瀏覽器中繪制三維模型，簡化了流場三維可視化的過程。充分發(fā)揮它功能豐富、速度快、擴(kuò)展性強(qiáng)等優(yōu)勢；(4)利用Element UI組件庫提供的配套設(shè)計(jì)資源，簡化系統(tǒng)UI設(shè)計(jì)流程，將更多精力專注于系統(tǒng)的業(yè)務(wù)層面。

如圖2所示為系統(tǒng)的主頁面，主要由建模導(dǎo)航區(qū)、圖形展示區(qū)、顯示控制區(qū)等組成。建模導(dǎo)航區(qū)提供給用戶自動化建立水動力學(xué)模型的流程向?qū)?。圖形展示區(qū)主要負(fù)責(zé)對計(jì)算結(jié)果的三維展示，與 GIS系統(tǒng)集成，并且借助于圖表形式，生動且互動性高的展示水力要素分布的時變過程，如圖3所示。系統(tǒng)同時實(shí)現(xiàn)了流場任意位置處的不同水力要素的時間變化過程圖表展示，如圖4所示。系統(tǒng)在包括手機(jī)瀏覽器在內(nèi)的主流瀏覽器中測試運(yùn)行良好，圖5展示了系統(tǒng)在手機(jī)瀏覽器中的運(yùn)行狀況，分別為建模導(dǎo)航、水文氣象條件設(shè)置、流場三維展示以及基于虛擬現(xiàn)實(shí)的流場可視化。

圖4 水力要素時間變化過程圖表展示Fig.4 Time-varying process of the hydraulic elements

2.2 系統(tǒng)建模過程——以渤海海冰模擬為例

將本文研發(fā)的系統(tǒng)應(yīng)用在渤海海域2010年冰情模擬之中，整個過程分為前處理、遠(yuǎn)程計(jì)算模擬、后處理三個階段。前處理階段，將渤海計(jì)算域邊界的CAD文件導(dǎo)入到系統(tǒng)，依據(jù)建模導(dǎo)航，確定網(wǎng)格尺度并完成網(wǎng)格劃分；然后將地形、水位初值、糙率等數(shù)據(jù)自動化插值到網(wǎng)格節(jié)點(diǎn)；輸入邊界條件從而完成模型的建立。建模導(dǎo)航如圖6-a所示。模型建立完成之后，輸入計(jì)算參數(shù)進(jìn)行遠(yuǎn)程模擬，如圖6-b所示。計(jì)算完成之后，進(jìn)行后處理。如圖7所示，分別展示了渤海海域水深、速度、溫度、冰厚等水力要素的分布圖。在渤海計(jì)算域內(nèi)任意一點(diǎn)都能夠查看水力要素隨時間的變化過程，如圖4所示。

3 結(jié)論與展望

本文建立的環(huán)境水流的云計(jì)算模擬系統(tǒng)，用于水流的水動力及輸運(yùn)過程模擬。實(shí)現(xiàn)了自動化建模、遠(yuǎn)程計(jì)算、與 WebGIS相集成的流場三維可視化。云計(jì)算描述了一種新的信息技術(shù)與商業(yè)服務(wù)的消費(fèi)與交付模式?；谠频乃畡恿τ?jì)算系統(tǒng)使用戶能夠僅僅通過瀏覽器就能像安裝在個人計(jì)算機(jī)中的應(yīng)用程序那樣完成模擬。在云中，模型建立以及計(jì)算相關(guān)的資源都獨(dú)立于個人電腦存放在服務(wù)器中，利用網(wǎng)絡(luò)相關(guān)的工具或是應(yīng)用以服務(wù)的形式提供給用戶。因此，用戶利用系統(tǒng)內(nèi)置的模型模板，除了通過瀏覽器給“云”發(fā)送指令和接受數(shù)據(jù)外，經(jīng)過很少的操作就能夠完成計(jì)算模擬。針對新的工程項(xiàng)目，系統(tǒng)設(shè)置了建模導(dǎo)航，用戶可以依據(jù)建模導(dǎo)航完成新模型的建立，一定程度上降低了模型建立的復(fù)雜度。用戶端電腦無需太高的配置，可以借助于部署在云端的高性能計(jì)算機(jī)完成整個計(jì)算過程，大大降低了計(jì)算所需的時間。將來作者還會針對提高系統(tǒng)的三維可視化效率以及增加網(wǎng)絡(luò)虛擬現(xiàn)實(shí)效果進(jìn)行進(jìn)一步的研究。