基于WebGL的小型濕地風(fēng)浪動態(tài)模擬研究

陳文君,徐翠羽,王藝衡,劉吉祥,趙志婷,蘇 慧,徐 良,曾 岳

(1.金陵科技學(xué)院軟件工程學(xué)院,江蘇 南京 211169;2.中國科學(xué)院南京地理與湖泊研究所 流域地理學(xué)重點實驗室,江蘇 南京 210008;3.金陵科技學(xué)院教務(wù)處,江蘇 南京 211169)

小型濕地是地球上水陸間相互作用形成的獨特生態(tài)系統(tǒng),在保護生物多樣性、調(diào)節(jié)區(qū)域氣候等方面有著重要的生態(tài)和社會效益。同時它作為一種高效的碳匯,對促進國家實現(xiàn)碳達峰、碳中和目標具有積極作用。在這些小型濕地中,風(fēng)浪效應(yīng)對其生態(tài)系統(tǒng)具有一定的影響作用,因此對小型濕地進行風(fēng)浪動態(tài)模擬具有重要的研究價值。

目前許多學(xué)者對風(fēng)浪模擬進行了相關(guān)研究。Peachey[1]用正弦函數(shù)和二次函數(shù)的線性組合來模擬水波的形狀,使水波表面的真實性大大提高;Fournier等[2]首次將流體動力學(xué)模型應(yīng)用到模擬中,用參數(shù)曲面解決了波峰卷曲的建模難題,提高了水波模擬的細節(jié);Schroeder等[3]利用Perlin噪聲函數(shù)實現(xiàn)了基于GPU的實時水波模擬;童若鋒等[4]對雨點波和短峰波進行分類構(gòu)建模型,模擬了水波的近似形態(tài);張藝衡等[5]針對波形模擬計算量較大的問題提出了一種實時交互式的算法,使得系統(tǒng)更加高效。

本研究采用的三維模擬技術(shù)包括WebGL、OpenGL和Three.js。WebGL是一種三維繪圖協(xié)議,可以為HTML5 Canvas提供高性能的圖形渲染,同時還能調(diào)用GPU來加速硬件渲染過程[6];OpenGL是一種跨平臺、跨語言的圖形應(yīng)用程序編程接口,可用于二維或三維圖形的處理和渲染;Three.js可對常見的WebGL方法進行簡單封裝,支持多種渲染器進行場景繪制[7]。據(jù)此,羅維佳等[8]提出了適用的雨粒子系統(tǒng)和屬性,有效再現(xiàn)了三維地形場景中的雨場景,對風(fēng)浪的實現(xiàn)有較大幫助。徐利明等[9]提出了一種在大型場景漫游系統(tǒng)中實時模擬雨雪的方法,大大提高了三維場景的模擬真實度。

本文基于WebGL、Three.js和OpenGL等技術(shù),研究了構(gòu)建風(fēng)浪物理模型的方法,對風(fēng)浪形態(tài)進行動態(tài)改變,實現(xiàn)了較為真實的小型濕地場景的構(gòu)建與風(fēng)浪的仿真模擬,拓展了虛擬三維場景的應(yīng)用,對濕地監(jiān)測輔助決策具有促進作用。

1 實驗方法

1.1 風(fēng)浪模型與WebGL耦合

簡單的水體模擬研究主要針對水面形態(tài)和運動狀態(tài)進行顯示建模，一般采用快速傅里葉變換(fast Fourier transform, FFT)算法[10]。本文基于FFT方法構(gòu)建風(fēng)浪模型，將水面波動分解為由多個正弦或余弦波的疊加，波高場表示為在x-z平面上與時間有關(guān)的一系列復(fù)雜正弦曲線的疊加，由此實現(xiàn)不同風(fēng)力和風(fēng)向下水面的有效仿真，具有高度真實感[11-13]。將水平位置X=(x,z)處的波高h(K,t)表示為隨時間變化的正弦波之和，表達式如下：

(1)

式中，X為水平網(wǎng)格點的位置；K為二維向量，大小由輸入的波長決定；h(X,t)為t時刻|K|個輸入波振幅與相位的疊加，h(K,t)為三維譜函數(shù)。

設(shè)高度場對應(yīng)的水面面積為S，水面網(wǎng)格大小為r，則二維向量K的表達式為K=(kx,kz)=(2πn/S,2πm/S) ，其中n和m為[-r/2,r/2]區(qū)間內(nèi)的整數(shù)，為了便于實際應(yīng)用，設(shè)r為2的冪，取值范圍為16～2 048像素。

為了模擬后期的水面渲染，還需計算高度場各點的梯度向量，以獲取網(wǎng)格平面的法向量。通過公式(2)，使用FFT方法分別求得梯度在x和z方向上的分量，并得到精確的斜率矢量。

(2)

基于風(fēng)浪模型原理，將風(fēng)浪模型與WebGL耦合，本文使用了Three.js庫，首先建立一個風(fēng)浪的仿真平面，將其作為一個分布著不同頂點的網(wǎng)格平面；然后根據(jù)風(fēng)浪的模型來驅(qū)動這個網(wǎng)格平面上頂點所產(chǎn)生水平和垂直方向上的位移，并渲染頂點上的紋理坐標，以便于耦合，結(jié)果如圖1所示。

1.2 多種條件下風(fēng)浪的動態(tài)模擬

采用Three.js庫中的dat.gui圖形用戶界面來創(chuàng)建控制菜單欄，利用二維向量vector2(x，y)來實現(xiàn)風(fēng)向和風(fēng)力的控制。其基本思想是先創(chuàng)建一個gui對象，通過add方法添加2個按鈕；然后通過添加回調(diào)函數(shù)來監(jiān)聽欄目中的數(shù)值，當(dāng)控件的屬性值發(fā)生改變時，調(diào)用對應(yīng)的回調(diào)函數(shù)來更新風(fēng)力、風(fēng)向的二維向量值，處理流程如圖2所示。

在風(fēng)浪模擬中，需要將風(fēng)力、風(fēng)向的值帶入基于快速傅里葉變換的Phillips風(fēng)浪統(tǒng)計模型中，從而改變時間間隔，得到不同時刻水面的高度場[14-15]，表達式如下：

(3)

式中，A表示振幅；k表示波向量的模；W表示風(fēng)向量，影響水波方向；l=v2/g，v和g分別表示風(fēng)速和重力加速度，影響風(fēng)浪最大浪高；向量K表示波的方向。為了消除風(fēng)速垂直方向上波的影響，將用戶改變的二維向量值作為輸入?yún)?shù)代入到模型著色器中，再通過計算水面的高度場，根據(jù)不同風(fēng)力和風(fēng)向產(chǎn)生不同的風(fēng)浪模擬效果。

圖1 風(fēng)浪模擬流程

圖2 輸入實現(xiàn)流程

1.3 WebGL場景的構(gòu)建與仿真實驗

三維地形數(shù)據(jù)使用數(shù)字高程模型[16],通過Excel表格記錄下每個高程數(shù)據(jù)點的經(jīng)度、緯度和海拔。采用開源的EasyPoi工具將表格中的數(shù)據(jù)轉(zhuǎn)換為Json格式自定義的鍵值對,以便程序直接讀取數(shù)據(jù)。地形數(shù)據(jù)處理采用規(guī)則網(wǎng)格模型,但由于簡單的地形區(qū)域存在大量的冗余數(shù)據(jù),還需要改變網(wǎng)格的大小。

地形的三維起伏效果可以通過Three.js庫提供的平面接口Three.js:PlaneBufferGeometry加以實現(xiàn)。由于該接口基于規(guī)則網(wǎng)格來模擬平面地形,并且原始三維地形數(shù)據(jù)也十分接近規(guī)則網(wǎng)格,因此選擇初始數(shù)據(jù)中少量的偏差數(shù)據(jù)點進行糾正,使其滿足規(guī)則網(wǎng)格的要求,進而在能夠降低計算復(fù)雜度的前提下,實現(xiàn)較為真實的三維地形[17-18]。

模擬風(fēng)的吹動過程可以添加風(fēng)的粒子效果,通過Three.js庫中的ParticleBasicMaterial對象為粒子添加基礎(chǔ)屬性[19],使用粒子系統(tǒng)Particle System來創(chuàng)建多粒子組成的集合,實現(xiàn)風(fēng)的粒子效果分為五步:1)通過Scene對象創(chuàng)建初始場景;2)創(chuàng)建基礎(chǔ)的粒子模型,給每個粒子表面設(shè)置基本的材質(zhì);3)通過雙層for循環(huán)設(shè)置粒子的初始位置,然后用push方法將所有的粒子添加到基本的幾何體中;4)創(chuàng)建風(fēng)粒子模擬系統(tǒng)對象,通過風(fēng)的圖片紋理來渲染風(fēng)的形態(tài)、融合材質(zhì)和三維幾何圖形;5)使用場景對象的add方法添加模擬的風(fēng)粒子系統(tǒng),完成風(fēng)粒子的效果模擬。

2 風(fēng)浪模型的實現(xiàn)

在三維地形的基礎(chǔ)上,采用四聯(lián)通種子邊界填充算法[20]來遍歷滿足水面的頂點與邊緣點，其大致思想如下:首先將三維地形的四條邊作為邊界,獲得水面區(qū)域的最低點,指定水面的高度。其次以已知的最低點為中心,查看其上、下、左、右4個方向上的地形坐標是否在邊界中,并判斷該4個方向上頂點的y值是否大于水面高度。如果小于水面高度就將該頂點坐標存放到數(shù)組中，然后將該點作為最低點，遞歸執(zhí)行上面步驟;若大于水面高度,就連接該點與中心點成為一條直線,求出平面的切點作為邊緣點，最后將小于水面的頂點與邊緣點的y值設(shè)為水面高度,從而產(chǎn)生了生成水面所需要的頂點數(shù)據(jù)。主要處理流程如圖3所示,生成的水面如圖4所示。

圖3 水面頂點實現(xiàn)流程

(a)水面邊緣點

(b)水面所有頂點

采用Three.js庫中的BufferGeometry幾何體來創(chuàng)建水面。在獲得頂點數(shù)據(jù)后,需要為頂點指定片面索引來繪制基礎(chǔ)的三角形圖元,每個三角面都與3個頂點的索引相關(guān),當(dāng)頂點數(shù)據(jù)和索引數(shù)據(jù)都建立完成后才能繪制出最后的水面。索引的建立采用小于水面高度的頂點數(shù)組,該數(shù)組在排列上是規(guī)則的。首先對該頂點數(shù)組以z軸進行排序,然后再以x軸進行排序,最后用這2個數(shù)組分別存放該頂點數(shù)組第一行、第二行頂點的索引和原三維地形中頂點所在的索引,并依此類推。圖5(a)為4個點都存在的情況,以abd、bcd繪制了2個三角形圖元;只有3個點存在的情況如圖5(b)所示;圖5(c)是最后一種情況,a點為最右側(cè)頂點,且下一行的右側(cè)還有頂點存在。將所有索引數(shù)據(jù)存放在數(shù)組中,建立的水面結(jié)構(gòu)如圖6所示。再將邊緣頂點進行單獨處理,并結(jié)合FFT方法生成風(fēng)吹浪動的動態(tài)模擬[21],水面最終效果如圖7所示。

(a)4個點存在

(b)3個點存在

(c)2個點存在

圖6 水面結(jié)構(gòu)

圖7 水面最終效果

3 實驗驗證

圖8 最終實現(xiàn)效果

實驗采用Windows 10操作系統(tǒng)、WebStorm平臺,利用WebGL實現(xiàn)圖形構(gòu)建、三維渲染,在Firefox瀏覽器中進行場景展示。硬件配置包括Intel Core i7-9750H@2.60 GHz CPU、16 GB DDR內(nèi)存及NVIDIA GeForce GTX 1660顯卡。圖8為最終實現(xiàn)效果,運行流暢,視覺效果較好?；诖?從用戶輸入、風(fēng)粒子效果、風(fēng)吹浪動效果這三方面加以驗證。

通過手動輸入不同的值來改變風(fēng)力和風(fēng)向,并在左側(cè)的顯示框內(nèi)準確顯示風(fēng)力和風(fēng)向的數(shù)值,確保系統(tǒng)能夠根據(jù)用戶的輸入來改變風(fēng)力和風(fēng)向,以實現(xiàn)正確的顯示,結(jié)果如圖9所示。圖9(a)為風(fēng)向東南風(fēng),風(fēng)速2.8 m·s-1,圖9(b)為風(fēng)向東北風(fēng),風(fēng)速8.3 m·s-1。這兩張圖還分別描述了在不同風(fēng)力、風(fēng)向的情況下,風(fēng)粒子的動態(tài)顯示,驗證了系統(tǒng)能夠根據(jù)用戶的輸入動態(tài)來改變粒子的下落速度和下落方向,動態(tài)仿真效果較好。

(a)風(fēng)向東南風(fēng),風(fēng)速2.8 m·s-1

(b)風(fēng)向東北風(fēng),風(fēng)速8.3 m·s-1

分別改變用戶輸入的x,y值,觀察不同風(fēng)向下風(fēng)粒子運動的動態(tài)變化,以及在不同風(fēng)速下風(fēng)粒子下落速度的變化,結(jié)果如圖10所示。圖10(a)為風(fēng)向西南風(fēng),風(fēng)速16.8 m·s-1,圖10(b)為風(fēng)向西北風(fēng),風(fēng)速3.9 m·s-1。在不同的風(fēng)向和風(fēng)速下水面波動幅度會發(fā)生變化,方向也會發(fā)生變化,從而驗證了不同風(fēng)力、風(fēng)向下風(fēng)浪產(chǎn)生的對應(yīng)變化,視覺效果良好，能夠較好地模擬風(fēng)浪的變化情況。

(a)風(fēng)向西南風(fēng),風(fēng)速16.8 m·s-1

(b)風(fēng)向西北風(fēng),風(fēng)速3.9 m·s-1

對實際濕地場景進行模擬驗證,以句容市茅山風(fēng)景區(qū)某小型濕地為實驗樣本,其中該小型濕地的面積約為1.5 hm2，形狀大致為圓形。在氣象站通過儀器對當(dāng)天的風(fēng)力、風(fēng)向進行觀測。以濕地邊緣某標志物為高程零點，設(shè)置2個風(fēng)浪觀測點,觀測點1位于湖中心,觀測點2位于湖的邊緣,采用乘船的方式和尺子等測量工具，對2個觀測點的風(fēng)浪浪高進行測量,并求得平均測量浪高。表1展示了部分濕地風(fēng)浪觀測與模擬數(shù)據(jù),圖11為特定風(fēng)力區(qū)間下模擬結(jié)果與實測浪高的相關(guān)性,1∶1線以上部分為低估的模擬點位,1∶1線以下部分為高估的模擬點位,表明模擬值在實測浪高的區(qū)間內(nèi)。決定系數(shù)R2為0.93,表明擬合度高,符合預(yù)期效果,從而驗證了其有效性。誤差可能是由測量精度導(dǎo)致,后續(xù)可以進一步完善。

表1 濕地風(fēng)浪觀測與模擬數(shù)據(jù)

圖11 模擬結(jié)果與實測浪高的相關(guān)性

4 結(jié) 語

本文針對現(xiàn)有方法在風(fēng)浪動態(tài)模擬中精度較低、仿真效果較弱的問題，將前端三維技術(shù)WebGL和Three.js庫與風(fēng)浪物理模型耦合，對小型濕地風(fēng)浪動態(tài)的三維場景進行模擬，實地勘測數(shù)據(jù)，并采用多種條件輸入的方法驗證了本文方法的合理性，使模擬達到了預(yù)期效果，為風(fēng)浪模擬的研究提供了更加直觀、更加真實的體驗與交互場景，為小型濕地中的風(fēng)浪預(yù)測、水質(zhì)污染、養(yǎng)殖灌溉等研究提供了新的思路和方法，具有較好的應(yīng)用價值。

本文研究的不足與需改進之處主要包括：1)不同風(fēng)浪形態(tài)的研究。本文所提出的物理模型對濕地地形和風(fēng)浪形態(tài)進行了概化，但僅模擬了風(fēng)浪的基礎(chǔ)形態(tài)，自然界中還有風(fēng)浪拍打在岸邊所產(chǎn)生的涌浪，風(fēng)浪拍打在一起產(chǎn)生的浪花現(xiàn)象，仍需繼續(xù)深入研究，構(gòu)建與實際情況更加相符的耦合模型。2)風(fēng)浪高度的實時測量。在實現(xiàn)風(fēng)浪模擬的基礎(chǔ)上，可以對不同時刻的風(fēng)浪高度進行測量，風(fēng)浪高度的實時測量在當(dāng)前具有很高的應(yīng)用價值，有待于進一步完善，使基礎(chǔ)數(shù)據(jù)更加精細化。3)寬闊水域的風(fēng)浪模擬。本文是在風(fēng)向和風(fēng)量穩(wěn)定的情況下，模擬了小型濕地中的一小塊水面，運用其中的風(fēng)浪建模方法可以對更加寬闊的水域中的風(fēng)浪進行三維模擬，具有較高的擴展性，未來需要進一步研究，以擴大風(fēng)浪模型應(yīng)用的范圍。