洪水演進三維動態可視化方法研究與應用

范仲麗，江雨田，張 焱，趙思遠，朱從飛，王曉曉

（寧波市水利水電規劃設計研究院有限公司，浙江寧波315192）

壩體潰壩后洪水將威脅其下游建筑及人民的生命財產安全，并對生態環境造成惡劣影響。對潰壩洪水演進進行數值模擬與可視化研究，能形象、宏觀地反映潰壩洪水的淹沒過程，為洪水災害的應急管理提供決策依據，具有非常重要的社會意義和經濟意義［1］。

近年來，國內外學者對洪水演進可視化研究取得了一定的進展。美國Memphis 大學通過構建城市模型［2］，對城區內部的洪水演進進行了二維可視化研究，該方法注重場景的精細化建模，洪水淹沒范圍作為輔助，展示淹沒效果。譚青生［3］等采用三維場景的高效壓縮及渲染以提升渲染效果，該方法能夠緩解網絡傳輸帶來的數據可視化問題，但其重點還是在于場景的渲染和傳輸問題，沒有探討洪水淹沒過程及渲染。我國的三維GIS系統GeoBeans［4］通過壓縮地形、降低影像數據精度，能夠解決較大場景下數據的傳輸問題，但展示效果略為粗糙，只可作簡單的模型展示。王曉航［5］等研發了二維潰壩洪水演進的數值模擬及可視化系統。鐘登華［6］等研發了三維潰堤洪水演進場景仿真系統，該系統針對特定三維場景做了精細化渲染，難以進行大規模推廣。

以上可以看出，目前對洪水演進可視化的研究注重于對數值模擬成果的平面表達，無法更形象、直觀地展示洪水演進情景。而在三維可視化方面諸多研究集中在小型三維場景模型的精細化建模上，可擴展性差且在網絡傳輸及內存消耗上仍存在較大的問題。

本文利用Cesium 高效的大場景三維動態渲染功能，及其優秀的矢量、圖形數據的繪制能力，結合HTML5 新增的Canvas 技術，進行洪水演進的三維可視化研究，將研究重點放在動態的洪水演進過程的渲染上，最大程度地優化展示效果，直觀、立體、形象地表達洪水演進過程，方法具有較強的可移植性和可擴展性，能夠為洪水災害的預防和搶險救災提供理論依據和決策支持。

1 研究方法

Cesium 是面向三維地球的世界級JavaScript 開源產品。通過提供功能豐富的JS API，幫助用戶快速搭建一個零插件的虛擬地球Web 應用，可以顯示海量三維模型數據、全球地形高程和影像數據、矢量數據等，在性能、精度、跨平臺等方面表現優越［7］。因此選擇Cesium 作為本次研究的在線地圖引擎。

Cesium 動畫實現語言（CZML）是一種基于JSON 架構的、用于描述動態場景的語言。從數據結構來看，CZML 是一個包含多個對象的數組JSON，每個對象稱為Packet，每個Packet 有多個屬性。通過設置屬性值，描述對象的紋理、位置、時間間隔及唯一性。多個Packet 并列式存放，通過設置時間區間同時顯示或先后展示［8］。靈活的數據結構使得CZML 可擴展性很強，且對象格式不局限于矢量數據，也支持多種格式的圖像、模型等。這為本文后期渲染優化洪水演進展示效果提供了良好的擴展基礎。

HTML5 是HTML、CSS、Java Script技術的組合，能夠很大程度地減少瀏覽器對第三方功能性插件的使用，具有良好的獨立性，支持本地離線存儲［9］。Canvas 能夠精確定位到頁面中每個像素，為數據的可視化提供了極為便捷的方法［10，11］。同時，WebGL直接工作在顯卡的圖形處理器層面，能夠充分發揮硬件性能，使得頁面的展示和運行更為流暢［12］。本文利用Canvas 技術對洪水淹沒網格的渲染效果及加載速度進行優化。

2 研究區域概況

寧波市位于浙江省東北部的東海之濱，屬我國季風頻繁活動帶。氣候溫潤，降雨充沛。受臺風及熱帶風暴影響，汛期（4-10月）降水量約占地區全年降水總量的75%。

保國寺是寧波郊區靈山之麓的一座寺院，是中國現存最古老的木結構建筑之一，有重大的社會和歷史價值。其西北方向建設一座容積約500 m3山塘，該山塘壩高7～8 m，壩厚0.6 m 左右。根據區域內高精度地形圖進行分水嶺劃分，得到可能遭受保國寺山塘潰壩洪水影響的范圍，面積約0.23 km2（如圖1）。

圖1 山塘潰壩洪水風險分析范圍圖

以該山塘瞬時潰壩為研究對象，研究洪水演進的三維動態可視化方法，為汛期的避險轉移工作提供依據［13，14］。

3 方法應用

3.1 洪水淹沒平面圖

對山塘潰壩洪水影響范圍進行淹沒網格劃分，淹沒網格共9 083 個，劃分結果如圖2。甬江流域屬于濕潤半濕潤地區，采用三水源新安江模型進行產流計算，這里對計算過程不作過多介紹。

圖2 淹沒網格劃分

各時段的洪水淹沒水深圖（如圖3），反映了潰壩發生后不同時刻洪水的淹沒情況，可以從宏觀角度觀察洪水整體的運動狀態。通過區域水深圖可以確定需要重點防范的位置、場景，從而有針對性地制定防洪應急避難案計劃，進而為洪水災害應急管理提供決策依據［15］。洪水淹沒平面圖可以借助前端頁面設置一定的時間間隔進行循環播放，達到動態顯示的效果。若加入三維地形數據，展示效果可以更加立體、形象。

圖3 洪水淹沒水深平面圖

3.2 洪水淹沒三維動態展示

利用Cesium 地形切片工具（CesiumLab）將本地高精度地形數據制作成局部精細地形切片，配合洪水淹沒水深數據，能夠展示更為精準、立體的三維淹沒效果。

為了讓洪水“動起來”，本文采用Cesium 動畫實現語言（CZML）創建數據驅動的時間動態場景。洪水淹沒CZML 數據結構如圖4所示，其中每個對象為一個packet，每個packet 有若干屬性，包括id、name、幾何、紋理、時間間隔等。把每個淹沒網格作為一個packet，多個淹沒網格并列式存放，將淹沒水深數據根據需求分配不同的圖例顏色，按照時間區間的方式實現洪水隨時間序列進行動態變化（如圖5）。

圖4 CZML 數據結構

從圖5 中明顯看出，基于CZML 對淹沒網格進行時間、空間上的展示來表現洪水的淹沒過程，相較于洪水淹沒平面圖更加直觀、立體。但此方法存在兩個問題：第一，頁面響應耗時集中在動態加載及渲染淹沒網格，加載時間約0.5 s，使用時會感覺稍有卡頓。造成卡頓的原因是淹沒網格的“分散式”存放方式，不利于頁面整體調度：每個時間區間下頁面載入若干淹沒網格packet，讀取特定屬性字段進行紋理渲染；每個packet 獨立并列式存放，載入耗時受淹沒網格的數量影響；研究范圍越大，淹沒網格越多，或者在數值模擬過程中淹沒網格切割越密集，相同研究范圍內的淹沒網格越多，頁面載入及渲染時間越長。第二，洪水數值模擬計算時為達到量化計算的需求，將洪水在空間上切割并離散化，導致紋理渲染后網格與網格之間的邊界明顯，容易給用戶帶來“馬賽克”式的不適感。綜上這兩個問題為本文的后續研究提出了要求，即優化網格的存放方式及其紋理渲染的過渡問題。

圖5 基于CZML 的洪水淹沒演進效果

3.3 洪水淹沒三維動態渲染

為了減少在數值模擬中將洪水淹沒網格化的離散效果，考慮利用HTML5 提供的Canvas 標簽，把洪水影響范圍作為整體進行渲染。渲染過程分為以下幾步：

首先，將淹沒網格中各頂點數據建立頂點數組（Vertex Array），數組中包含紋理、位置等信息，傳入頂點著色器（Vertex Shader）；頂點著色器將頂點數組按照頂點索引數組中的順序連接成三角形；光柵器（Rasterizer）利用頂點屬性中的紋理數據，在三角形表面做線性插值計算，為屏幕中每個像素生成一個漸變色，以消除顆粒感很大的淹沒網格效果。

利用Canvas 技術對洪水淹沒過程進一步渲染，實質上是將大量的矢量淹沒網格在CZML變量中分別作為對象繪制并加載至前端頁面，轉變為將Canvas 渲染后的圖片文件作為一個整體對象在CZML變量中加載。此方法對大量矢量淹沒網格進行提前處理，利用Canvas 光柵器在相鄰網格頂點之間做插值計算及顏色漸變的渲染，每個時間區間的計算結果形成一個圖片文件，直接從數據結構上減輕了前端的加載壓力，能夠較大程度上提升三維渲染效果，縮短頁面響應時間，改善用戶體驗（如圖6）。

圖6 采用Canvas 渲染的洪水淹沒演進效果

相較于CZML 實時調取矢量淹沒網格進行渲染展示，頁面持續處于高負荷運載導致卡頓的問題，利用Canvas 技術的優化方法，充分發揮WebGL直接工作在顯卡的圖形處理器層面的優勢，其頁面響應耗時集中在首次渲染緩沖過程中，視淹沒歷時的長短緩沖時間相應拉長，一個淹沒歷時的緩沖時間約0.2 s左右，且首次渲染緩沖后再次加載時無需再次等待，緩沖文件存儲于服務器內以便隨時調取，無需頁面實時渲染。

采用Canvas 技術進行洪水演進的三維動態可視化方法，改變了傳統的離散化矢量淹沒網格加載方式，提高了加載效率；利用光柵器對矢量淹沒網格進行頂點的著色過渡，提升了渲染效果，具有一定的創新性。

本方法借助Cesium 框架對底層三維地形進行大范圍渲染，適用于全球范圍任意區域；動態淹沒網格基于底層數值模型計算后，將位置信息及淹沒水深、淹沒歷時等必要信息存入后臺數據庫即可，對原始數據格式不做要求。因此具有較強的適用性。

4 結 語

Cesium 動畫實現語言CZML 在三維動態展示方面有較為成熟的技術體系，結合洪水淹沒的數值模擬成果，能夠較好地展示出洪水演進效果；利用Canvas 技術做緩存處理，能夠快速將數值模擬過程中形成的離散網格數據提前渲染，線型插值網格內部的紋理過渡，能夠較大程度地優化展示效果，提升用戶體驗。

本方法的洪水演進三維可視化依托Cesium 框架實現，因此地形的精度與更新、場景渲染的精細程度，皆依賴于Cesium 自身。而做大場景的三維建模時間和經濟成本極高，未來借助精度及渲染效果更好的第三方城市建模產品如e 都市三維地圖等，應會有更好的展示效果。□