基于WebGL的小型湿地风浪动态模拟研究

陈文君,徐翠羽,王艺衡,刘吉祥,赵志婷,苏 慧,徐 良,曾 岳

(1.金陵科技学院软件工程学院,江苏 南京 211169;2.中国科学院南京地理与湖泊研究所 流域地理学重点实验室,江苏 南京 210008;3.金陵科技学院教务处,江苏 南京 211169)

小型湿地是地球上水陆间相互作用形成的独特生态系统,在保护生物多样性、调节区域气候等方面有着重要的生态和社会效益。同时它作为一种高效的碳汇,对促进国家实现碳达峰、碳中和目标具有积极作用。在这些小型湿地中,风浪效应对其生态系统具有一定的影响作用,因此对小型湿地进行风浪动态模拟具有重要的研究价值。

目前许多学者对风浪模拟进行了相关研究。Peachey[1]用正弦函数和二次函数的线性组合来模拟水波的形状,使水波表面的真实性大大提高;Fournier等[2]首次将流体动力学模型应用到模拟中,用参数曲面解决了波峰卷曲的建模难题,提高了水波模拟的细节;Schroeder等[3]利用Perlin噪声函数实现了基于GPU的实时水波模拟;童若锋等[4]对雨点波和短峰波进行分类构建模型,模拟了水波的近似形态;张艺衡等[5]针对波形模拟计算量较大的问题提出了一种实时交互式的算法,使得系统更加高效。

本研究采用的三维模拟技术包括WebGL、OpenGL和Three.js。WebGL是一种三维绘图协议,可以为HTML5 Canvas提供高性能的图形渲染,同时还能调用GPU来加速硬件渲染过程[6];OpenGL是一种跨平台、跨语言的图形应用程序编程接口,可用于二维或三维图形的处理和渲染;Three.js可对常见的WebGL方法进行简单封装,支持多种渲染器进行场景绘制[7]。据此,罗维佳等[8]提出了适用的雨粒子系统和属性,有效再现了三维地形场景中的雨场景,对风浪的实现有较大帮助。徐利明等[9]提出了一种在大型场景漫游系统中实时模拟雨雪的方法,大大提高了三维场景的模拟真实度。

本文基于WebGL、Three.js和OpenGL等技术,研究了构建风浪物理模型的方法,对风浪形态进行动态改变,实现了较为真实的小型湿地场景的构建与风浪的仿真模拟,拓展了虚拟三维场景的应用,对湿地监测辅助决策具有促进作用。

1 实验方法

1.1 风浪模型与WebGL耦合

简单的水体模拟研究主要针对水面形态和运动状态进行显示建模，一般采用快速傅里叶变换(fast Fourier transform, FFT)算法[10]。本文基于FFT方法构建风浪模型，将水面波动分解为由多个正弦或余弦波的叠加，波高场表示为在x-z平面上与时间有关的一系列复杂正弦曲线的叠加，由此实现不同风力和风向下水面的有效仿真，具有高度真实感[11-13]。将水平位置X=(x,z)处的波高h(K,t)表示为随时间变化的正弦波之和，表达式如下：

(1)

式中，X为水平网格点的位置；K为二维向量，大小由输入的波长决定；h(X,t)为t时刻|K|个输入波振幅与相位的叠加，h(K,t)为三维谱函数。

设高度场对应的水面面积为S，水面网格大小为r，则二维向量K的表达式为K=(kx,kz)=(2πn/S,2πm/S) ，其中n和m为[-r/2,r/2]区间内的整数，为了便于实际应用，设r为2的幂，取值范围为16～2 048像素。

为了模拟后期的水面渲染，还需计算高度场各点的梯度向量，以获取网格平面的法向量。通过公式(2)，使用FFT方法分别求得梯度在x和z方向上的分量，并得到精确的斜率矢量。

(2)

基于风浪模型原理，将风浪模型与WebGL耦合，本文使用了Three.js库，首先建立一个风浪的仿真平面，将其作为一个分布着不同顶点的网格平面；然后根据风浪的模型来驱动这个网格平面上顶点所产生水平和垂直方向上的位移，并渲染顶点上的纹理坐标，以便于耦合，结果如图1所示。

1.2 多种条件下风浪的动态模拟

采用Three.js库中的dat.gui图形用户界面来创建控制菜单栏，利用二维向量vector2(x，y)来实现风向和风力的控制。其基本思想是先创建一个gui对象，通过add方法添加2个按钮；然后通过添加回调函数来监听栏目中的数值，当控件的属性值发生改变时，调用对应的回调函数来更新风力、风向的二维向量值，处理流程如图2所示。

在风浪模拟中，需要将风力、风向的值带入基于快速傅里叶变换的Phillips风浪统计模型中，从而改变时间间隔，得到不同时刻水面的高度场[14-15]，表达式如下：

(3)

式中，A表示振幅；k表示波向量的模；W表示风向量，影响水波方向；l=v2/g，v和g分别表示风速和重力加速度，影响风浪最大浪高；向量K表示波的方向。为了消除风速垂直方向上波的影响，将用户改变的二维向量值作为输入参数代入到模型着色器中，再通过计算水面的高度场，根据不同风力和风向产生不同的风浪模拟效果。

图1 风浪模拟流程

图2 输入实现流程

1.3 WebGL场景的构建与仿真实验

三维地形数据使用数字高程模型[16],通过Excel表格记录下每个高程数据点的经度、纬度和海拔。采用开源的EasyPoi工具将表格中的数据转换为Json格式自定义的键值对,以便程序直接读取数据。地形数据处理采用规则网格模型,但由于简单的地形区域存在大量的冗余数据,还需要改变网格的大小。

地形的三维起伏效果可以通过Three.js库提供的平面接口Three.js:PlaneBufferGeometry加以实现。由于该接口基于规则网格来模拟平面地形,并且原始三维地形数据也十分接近规则网格,因此选择初始数据中少量的偏差数据点进行纠正,使其满足规则网格的要求,进而在能够降低计算复杂度的前提下,实现较为真实的三维地形[17-18]。

模拟风的吹动过程可以添加风的粒子效果,通过Three.js库中的ParticleBasicMaterial对象为粒子添加基础属性[19],使用粒子系统Particle System来创建多粒子组成的集合,实现风的粒子效果分为五步:1)通过Scene对象创建初始场景;2)创建基础的粒子模型,给每个粒子表面设置基本的材质;3)通过双层for循环设置粒子的初始位置,然后用push方法将所有的粒子添加到基本的几何体中;4)创建风粒子模拟系统对象,通过风的图片纹理来渲染风的形态、融合材质和三维几何图形;5)使用场景对象的add方法添加模拟的风粒子系统,完成风粒子的效果模拟。

2 风浪模型的实现

在三维地形的基础上,采用四联通种子边界填充算法[20]来遍历满足水面的顶点与边缘点，其大致思想如下:首先将三维地形的四条边作为边界,获得水面区域的最低点,指定水面的高度。其次以已知的最低点为中心,查看其上、下、左、右4个方向上的地形坐标是否在边界中,并判断该4个方向上顶点的y值是否大于水面高度。如果小于水面高度就将该顶点坐标存放到数组中，然后将该点作为最低点，递归执行上面步骤;若大于水面高度,就连接该点与中心点成为一条直线,求出平面的切点作为边缘点，最后将小于水面的顶点与边缘点的y值设为水面高度,从而产生了生成水面所需要的顶点数据。主要处理流程如图3所示,生成的水面如图4所示。

图3 水面顶点实现流程

(a)水面边缘点

(b)水面所有顶点

采用Three.js库中的BufferGeometry几何体来创建水面。在获得顶点数据后,需要为顶点指定片面索引来绘制基础的三角形图元,每个三角面都与3个顶点的索引相关,当顶点数据和索引数据都建立完成后才能绘制出最后的水面。索引的建立采用小于水面高度的顶点数组,该数组在排列上是规则的。首先对该顶点数组以z轴进行排序,然后再以x轴进行排序,最后用这2个数组分别存放该顶点数组第一行、第二行顶点的索引和原三维地形中顶点所在的索引,并依此类推。图5(a)为4个点都存在的情况,以abd、bcd绘制了2个三角形图元;只有3个点存在的情况如图5(b)所示;图5(c)是最后一种情况,a点为最右侧顶点,且下一行的右侧还有顶点存在。将所有索引数据存放在数组中,建立的水面结构如图6所示。再将边缘顶点进行单独处理,并结合FFT方法生成风吹浪动的动态模拟[21],水面最终效果如图7所示。

(a)4个点存在

(b)3个点存在

(c)2个点存在

图6 水面结构

图7 水面最终效果

3 实验验证

图8 最终实现效果

实验采用Windows 10操作系统、WebStorm平台,利用WebGL实现图形构建、三维渲染,在Firefox浏览器中进行场景展示。硬件配置包括Intel Core i7-9750H@2.60 GHz CPU、16 GB DDR内存及NVIDIA GeForce GTX 1660显卡。图8为最终实现效果,运行流畅,视觉效果较好。基于此,从用户输入、风粒子效果、风吹浪动效果这三方面加以验证。

通过手动输入不同的值来改变风力和风向,并在左侧的显示框内准确显示风力和风向的数值,确保系统能够根据用户的输入来改变风力和风向,以实现正确的显示,结果如图9所示。图9(a)为风向东南风,风速2.8 m·s-1,图9(b)为风向东北风,风速8.3 m·s-1。这两张图还分别描述了在不同风力、风向的情况下,风粒子的动态显示,验证了系统能够根据用户的输入动态来改变粒子的下落速度和下落方向,动态仿真效果较好。

(a)风向东南风,风速2.8 m·s-1

(b)风向东北风,风速8.3 m·s-1

分别改变用户输入的x,y值,观察不同风向下风粒子运动的动态变化,以及在不同风速下风粒子下落速度的变化,结果如图10所示。图10(a)为风向西南风,风速16.8 m·s-1,图10(b)为风向西北风,风速3.9 m·s-1。在不同的风向和风速下水面波动幅度会发生变化,方向也会发生变化,从而验证了不同风力、风向下风浪产生的对应变化,视觉效果良好，能够较好地模拟风浪的变化情况。

(a)风向西南风,风速16.8 m·s-1

(b)风向西北风,风速3.9 m·s-1

对实际湿地场景进行模拟验证,以句容市茅山风景区某小型湿地为实验样本,其中该小型湿地的面积约为1.5 hm2，形状大致为圆形。在气象站通过仪器对当天的风力、风向进行观测。以湿地边缘某标志物为高程零点，设置2个风浪观测点,观测点1位于湖中心,观测点2位于湖的边缘,采用乘船的方式和尺子等测量工具，对2个观测点的风浪浪高进行测量,并求得平均测量浪高。表1展示了部分湿地风浪观测与模拟数据,图11为特定风力区间下模拟结果与实测浪高的相关性,1∶1线以上部分为低估的模拟点位,1∶1线以下部分为高估的模拟点位,表明模拟值在实测浪高的区间内。决定系数R2为0.93,表明拟合度高,符合预期效果,从而验证了其有效性。误差可能是由测量精度导致,后续可以进一步完善。

表1 湿地风浪观测与模拟数据

图11 模拟结果与实测浪高的相关性

4 结 语

本文针对现有方法在风浪动态模拟中精度较低、仿真效果较弱的问题，将前端三维技术WebGL和Three.js库与风浪物理模型耦合，对小型湿地风浪动态的三维场景进行模拟，实地勘测数据，并采用多种条件输入的方法验证了本文方法的合理性，使模拟达到了预期效果，为风浪模拟的研究提供了更加直观、更加真实的体验与交互场景，为小型湿地中的风浪预测、水质污染、养殖灌溉等研究提供了新的思路和方法，具有较好的应用价值。

本文研究的不足与需改进之处主要包括：1)不同风浪形态的研究。本文所提出的物理模型对湿地地形和风浪形态进行了概化，但仅模拟了风浪的基础形态，自然界中还有风浪拍打在岸边所产生的涌浪，风浪拍打在一起产生的浪花现象，仍需继续深入研究，构建与实际情况更加相符的耦合模型。2)风浪高度的实时测量。在实现风浪模拟的基础上，可以对不同时刻的风浪高度进行测量，风浪高度的实时测量在当前具有很高的应用价值，有待于进一步完善，使基础数据更加精细化。3)宽阔水域的风浪模拟。本文是在风向和风量稳定的情况下，模拟了小型湿地中的一小块水面，运用其中的风浪建模方法可以对更加宽阔的水域中的风浪进行三维模拟，具有较高的扩展性，未来需要进一步研究，以扩大风浪模型应用的范围。