洪水演進(jìn)三維動態(tài)可視化方法研究與應(yīng)用

范仲麗，江雨田，張 焱，趙思遠(yuǎn)，朱從飛，王曉曉

（寧波市水利水電規(guī)劃設(shè)計研究院有限公司，浙江寧波315192）

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

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

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

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

1 研究方法

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

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

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

2 研究區(qū)域概況

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

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

圖1 山塘潰壩洪水風(fēng)險分析范圍圖

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

3 方法應(yīng)用

3.1 洪水淹沒平面圖

對山塘潰壩洪水影響范圍進(jìn)行淹沒網(wǎng)格劃分，淹沒網(wǎng)格共9 083 個，劃分結(jié)果如圖2。甬江流域?qū)儆跐駶櫚霛駶櫟貐^(qū)，采用三水源新安江模型進(jìn)行產(chǎn)流計算，這里對計算過程不作過多介紹。

圖2 淹沒網(wǎng)格劃分

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

圖3 洪水淹沒水深平面圖

3.2 洪水淹沒三維動態(tài)展示

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

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

圖4 CZML 數(shù)據(jù)結(jié)構(gòu)

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

圖5 基于CZML 的洪水淹沒演進(jìn)效果

3.3 洪水淹沒三維動態(tài)渲染

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

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

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

圖6 采用Canvas 渲染的洪水淹沒演進(jìn)效果

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

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

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

4 結(jié) 語

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

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