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

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

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

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

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

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

1 研究方法

Cesium 是面向三維地球的世界級JavaScript 開源產(chǎn)品。通過提供功能豐富的JS API，幫助用戶快速搭建一個零插件的虛擬地球Web 應用，可以顯示海量三維模型數(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 有多個屬性。通過設置屬性值，描述對象的紋理、位置、時間間隔及唯一性。多個Packet 并列式存放，通過設置時間區(qū)間同時顯示或先后展示［8］。靈活的數(shù)據(jù)結(jié)構(gòu)使得CZML 可擴展性很強，且對象格式不局限于矢量數(shù)據(jù)，也支持多種格式的圖像、模型等。這為本文后期渲染優(yōu)化洪水演進展示效果提供了良好的擴展基礎。

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

2 研究區(qū)域概況

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

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

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

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

3 方法應用

3.1 洪水淹沒平面圖

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

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

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

圖3 洪水淹沒水深平面圖

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

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

為了讓洪水“動起來”，本文采用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)洪水隨時間序列進行動態(tài)變化（如圖5）。

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

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

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

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

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

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

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

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

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

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

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

4 結(jié) 語

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

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