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

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

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

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

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

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

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

1 研究方法

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

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

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

2 研究區(qū)域概況

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

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

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

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

3 方法應(yīng)用

3.1 洪水淹沒平面圖

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

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

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

圖3 洪水淹沒水深平面圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié) 語

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

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