移动端海洋实时仿真技术研究与实现

r囧r小猫 2022-06-11 02:29 151阅读 0赞

http://blog.csdn.net/jxw167/article/details/54646773

笔者介绍：[姜雪伟][Link 1]，IT公司技术合伙人，IT高级讲师，CSDN社区专家，特邀编辑，畅销书作者，国家专利发明人;已出版书籍：《手把手教你[**架构**][Link 2]3D游戏引擎》电子工业出版社和《[**Unity3D**][Unity3D]实战核心技术详解》电子工业出版社等。

前端时间在CSDN开始了关于《[算法与游戏技术实战][Link 3]》系列讲座，主要是讲解了一些游戏实战中常用的[算法][Link 4]，在这里也是使用数学方程解决海水渲染问题，告诉开发者数学算法对游戏开发非常重要，我们可以使用数学运算解决很多问题：包括人工[智能][Link 5]，[深度学习][Link 6]，游戏开发，[VR][]/AR等。

**摘 要** 针对目前海浪的研究都是基于PC端的问题，为了实现在移动端实时仿真模拟海洋，提出了一种可以在移动端运行的算法，利用快速傅里叶变换算法（FFT）建立海浪高度场，结合LOD（Levelof Detail）算法生成多块网格无缝拼接形成无限海水；采用GPU编程技术对海水表面实现海面光照，反射，折射效果以及海面颜色渲染处理；最后通过Perlin噪音在海面产生海浪泡沫效果，从而更加逼真的实现了海水模拟可以在移动端运行。实验结果表明，该算法满足了海水在移动端运行，并且达到了预期效果。

1 概述

海洋仿真的逼真度来源于海浪的波形及运动的真实性，海浪建模的方法有多种，Foumier和Reeves\[1\]提出一个基于深海小振幅波的海浪模型；Jensen\[2\]和Tessendorf\[3\]分别详细描述了采用统计模型和快速傅里叶变换（FFT）方法模拟海浪的方法。在合成过程中采用规则矩形来完成绘制，降低了图像的质量和真实感。徐迎庆\[4\]等提出了一个基于物理模型的模拟海浪的计算机动画方法。Mastern\[5\]等提出了一种利用Fourier变换来合成一块水波区域的方法；其结果显得非常自然。Chen\[6\]采用数值迭代方法求解二维的水力学方程组（Navier-Stokes）来模拟海浪。杨怀平\[7\]等利用海浪频谱和方向谱的相关公式，实现了基于海频谱的波浪造型及显示，能够快速的模拟海浪。以上的海水研究都是基于PC端的，随着移动端硬件的快速发展，提出了一种新的海洋模拟方法，该方法不仅局限于PC端和Web端仿真，可以同时运行在移动平台。通过快速傅立叶变换（FFT）建立海浪高度场，采用LOD技术实现多块网格无缝拼接形成无限海洋表面，而且实现了海浪随风起伏的效果，最后通过GPU编程实现了水面光照、反射以及折射效果。

2 建立海浪模型

由于海水的运动形式是在不断变化的，在统计模型中，海浪的高度方程![20170121210909891][]是随着给定的位置 ![20170121210927798][]和时间t而生成的，通过傅里叶快速变换（FFT)将一个海浪谱从频率域转换到空间域，形成海浪高度场。下面求解高度方程![20170121210950735][]，假设网格大小为M\*N，水面面积为![20170121211002204][]。表达式如下所示：

![20170121211244722][] (1)

其中![20170121211304264][]，

![20170121211317831][] (2)

![20170121211349499][] (3)

![20170121211403769][] (4)

![20170121211425593][] (5)

本文引入参数![20170121211522001][]和![20170121211531970][]，设定它们的范围分别是0,1，...,N-1和0,1，...,M-1。

因此有表达式：![20170121211631505][]，![20170121211641177][]，将其代入（4）,（5）方程可得到n，m的表达式：

![20170121211841397][] (6)

![20170121211849255][](7)

根据![20170121211902991][]和![20170121211910208][]的值将（2）,（3）代入可以计算出![20170121211954881][]的值，公式如下：

![20170121212103789][](8)

![20170121212110992][] (9)

把以上表达式带入我们原始方程，可达到如下表达式：

![20170121212120274][] (10)

化简方程 (10)可得如下表达式：

![20170121212502029][] (11)

将（8）和（9）代入（11）可得如下方程式：

![20170121212523947][](12)

其中![20170121212540343][]表达式方程为：

![20170121212602198][] (13)

参数g是重力加速度![20170121212620370][]将公式（2）和（3）代入（13)可得如下方程式：

![20170121212703636][](14 )

接下来需要解答![20170121212755627][]函数及其复共轭函数![20170121212805237][]。其中![20170121212824253][]方程可用如下方程式表示：

![20170121212835972][](15)

将(8)和(9)代入(15)可得方程式：

![20170121212848019][] (16)

其中参数![20170121213148415][]和![20170121213156184][]是由高斯随机数发生器产生的独立绘制，均值为0，均方差为1。函数![20170121213209903][]是Phillips spectrum，其方程表达式如下：

![20170121213224075][] (17)

其中![20170121213236888][]是波移动的方向，![20170121213246591][]是海水升起的最大可能的波长度，V是持续的风的速度。K为波的数量，![20170121213300870][]是归一化的风向，消除了海浪在运动方向上和风向垂直部分的能量，从而保证海浪运动方向大致与风向一致。由此得到方程：

![20170121213314716][] (18)

其中![20170121213331902][]，![20170121213341558][]

将(18)代入(16)可得到![20170121213408295][]方程，由于![20170121213427513][]和![20170121213453920][]是复共轭函数，也可得到![20170121213515467][]，再向上逆推可解得波高度函数方程![20170121213835425][]，从而获得海洋波高度场，接下来我们需要评估一个位移矢量来生成波涛汹涌的海浪和在每个顶点照明计算法向量。位移矢量方程如下所示：

![20170121213847062][] (19)

化简(19)可得方程式：

![20170121213856750][] (20)

解得法线向量的公式如下：

![20170121213914000][]

![20170121213926281][] (21)

在解方程的过程中，本文假定M=N（N是2的n次方）和![20170121213946068][]，运用欧拉方程对于任意的实数x满足下面的方程：

![20170121213959521][] (22)

以上建模算法利用快速傅里叶变换完成了对海浪几何建模以及海面光照法线矢量的计算。

3 生成海水网格

为了完成对实时性要求比较高的大面积海域在移动平台的模拟，鉴于目前移动平台的处理能力，采用的是将海面定义成6\*6个海洋网格块，每块网格的三角形数量是32\*32，每块网格的大小是128\*128。建立网格无缝拼接，为了消除不同细节层次网格边缘的裂缝，采用的是细节层次LOD（Level Of Details）\[8\]，最大分层为4，保证它们之间LOD级别相差1之内即可。然后利用快速傅里叶变换（FFT）海水仿真算法生成动态的海水高度场，并将高度场存入到定点纹理中，在顶点着色器中通过取顶点纹理的值对网格进行扰动，形成动态的海水效果。海面网格如图1-1，算法流程图如图1-2。

![20170121215008519][]

![20170121215031066][]

从程序执行的流程图中可以看出，首先需要定义要生成的网格数量，生成对应的网格块并对网格数据进行初始化，利用快速傅里叶变换进行2次傅里叶变换生成海浪高度场，采用LOD处理块与块之间出现裂缝，最后通过GPU编程对海面进行实时渲染。如图1-3和1-4海浪在风力作用下的效果图

![20170121215134411][]

![20170121215149943][]

4 GPU渲染

为了提高在移动端的运行效率利用GPU对浮点纹理进行双线滤波和法线计算，然后再用这张经过滤波处理和法线预计算的浮点纹理作为顶点着色器的高度场和法线纹理进行高度扰动，形成海浪效果。同时对海面光照，反射以及折射也通过GPU处理，从而减轻了移动端CPU处理数据的压力，优化了效率。GPU部分核心代码，顶点结构体定义和法线，光照实现方法如下：

**\[cpp\]** [view plain][] [copy][view plain]

1. **struct** v2f 
2. \{ 
3. float4 pos : SV\_POSITION; //位置
4. float4 projTexCoord : TEXCOORD0; //映射纹理
5. float2 bumpTexCoord : TEXCOORD1; //bump纹理
6. float3 viewDir : TEXCOORD2; //视角方向
7. float3 objSpaceNormal : TEXCOORD3; //法线
8. float3 lightDir : TEXCOORD4; //光线方向
9. float2 foamStrengthAndDistance : TEXCOORD5; //风力强度和距离
10. \}; 
11. v2f vert (appdata\_tan v) 
12. \{ 
13. v2f o; 
14. o.bumpTexCoord.xy = v.vertex.xz/float2(\_Size.x, \_Size.z)\*5; //纹理坐标
15. o.pos = mul (UNITY\_MATRIX\_MVP, v.vertex); //矩阵换算
16. o.foamStrengthAndDistance.x = v.tangent.w; //噪音产生方向
17. o.foamStrengthAndDistance.y = clamp(o.pos.z, 0, 1.0); //数据采样
18. float4 projSource = float4(v.vertex.x, 0.0, v.vertex.z, 1.0); //纹理映射
19. float4 tmpProj = mul( UNITY\_MATRIX\_MVP, projSource); 
20. o.projTexCoord = tmpProj; 
21. float3 objSpaceViewDir = ObjSpaceViewDir(v.vertex); //对象空间视角方向
22. float3 binormal = cross( normalize(v.normal), normalize(v.tangent.xyz) );//法线
23. float3x3 rotation = float3x3( v.tangent.xyz, binormal, v.normal ); //旋转
24. o.objSpaceNormal = v.normal; 
25. o.viewDir = mul(rotation, objSpaceViewDir); //视角方向
26. o.lightDir = mul(rotation, float3(\_SunDir.xyz)); //光照方向
27. **return** o; 
28. \}

实现了反射，折射效果如图1-5和1-6所示；

![20170121215353508][]

![20170121215447787][]

5 实验数据

[测试][Link 7]使用了市场比较流行的两个厂家手机：一是韩国产的三星GT-N7100手机，其硬件配置是CPU四核1.6GHz、GPU 为Mali 400MP、内存RAMGB、ROM16GB；[操作系统][Link 8]Anroid4.3；二是国内小米2手机硬件配置是CPU四核1.5GHz、GPU Adreno 320、内存RAM2GB 、ROM16GB、操作系统 MIUI android4.1。

使用的是6\*6块海洋网格，每块网格大小是128\*128，每块网格是由32\*32三角形组成，在移动平台测试了各项实验数据。

![20170121215711632][]

为了在移动端真实模拟海洋效果，我们需要开启反射以及折射，上述测试数据满足了在移动端使用海水的渲染，保证了程序运行的的流程性，目前该技术正运用于3D海战手游开发。

6 结束语

本文通过快速傅里叶变换FFT算法和基于GPU编程实现了海水在移动端的运行，实现了海水随着风力的变化而变化，在移动端实现了海浪的反射以及折射，光照效果。进一步的工作，我们将模拟浪花效果的实现，以及将海洋网格块的生成以及LOD移植到GPU编程处理，使其性能继续提高。

**最后关于移动端海水实现代码和原理可以参考我在CSDN的讲课视频《[移动端海水技术实现][Link 9]》。**

参考文献

\[1\]FOUMIER A. ,REEVES W T. A simple model of ocean waves \[J\]. Computer Graphics and ACMProceedings of SIGGRAPTH,, l986, 20(4):75-84.

\[2\]JensenL.Deep-WaterAnimationandRendering.[http://www.gamaasutra.com/gdce/2001/Jensen/Jensen\_01.htm,2001][http_www.gamaasutra.com_gdce_2001_Jensen_Jensen_01.htm_2001]

\[3\] TessendorfJ.Simulatiing Ocean Water.GIGGRAPTH 2001 Course notes.

http://home1.gte[.NET][]/tssndrf/index.html,2001

\[4\]徐迎庆，苏成，李华等。基于物理模型的流水及波浪模拟.计算机学报,1996,19(增刊):153-160.

\[5\] G A Mastin,P AWatterberg,J F Mareda.Fourier synthesis of ocean scenes\[J\]. IEEE ComputerGraphics and Application, 1987,7(3):16-23.

\[6\]Chen J X,Lobo NV. Toward INteractive-rate Simulation of Fluids with Moving Obstacles UsingNavier-Stokes Equations.Graphical Model and Image Processing, 1995,57(2):107-116.

\[7\]杨怀平，孙家广.基于海浪谱的波浪模拟.系统仿真学报,2002,14(9):1175-1178.

\[8\]ThatcharUlrich. Chunked LOD:Rendering Massive Terrains using Chunked Level of DetailControl.In:Course at ACM SIGGRAPH’02,2002

[Link 1]: http://www.vr3d-edu.com/
[Link 2]: http://lib.csdn.net/base/architecture
[Unity3D]: http://lib.csdn.net/base/unity3d
[Link 3]: http://edu.csdn.net/course/detail/3682
[Link 4]: http://lib.csdn.net/base/datastructure
[Link 5]: http://lib.csdn.net/base/aiplanning
[Link 6]: http://lib.csdn.net/base/deeplearning
[VR]: http://lib.csdn.net/base/vr
[20170121210909891]: https://img-blog.csdn.net/20170121210909891
[20170121210927798]: https://img-blog.csdn.net/20170121210927798
[20170121210950735]: https://img-blog.csdn.net/20170121210950735
[20170121211002204]: /images/20220611/293485ad2aa34ce982e7470a135d204b.png
[20170121211244722]: /images/20220611/852b158edf794bd5bb7e64ffe1963718.png
[20170121211304264]: /images/20220611/2491bdc829b24056bac5296b8b437c7a.png
[20170121211317831]: /images/20220611/eb15ecfbeb374402b3c0c0b747d4bc5f.png
[20170121211349499]: /images/20220611/e986b1b26a2044ffbf764fddba954ecc.png
[20170121211403769]: /images/20220611/7007cdfd7b574807acba9cd6c7e93a08.png
[20170121211425593]: /images/20220611/0fd1bbebaed44da781ff28c203d86836.png
[20170121211522001]: https://img-blog.csdn.net/20170121211522001
[20170121211531970]: /images/20220611/4428cc9fa0104d93b67fbcd5da0ad236.png
[20170121211631505]: https://img-blog.csdn.net/20170121211631505
[20170121211641177]: /images/20220611/d7a31a2525da4917802a5eef19bba06d.png
[20170121211841397]: /images/20220611/8836b6fcb77d441888caac8c1a7881f4.png
[20170121211849255]: /images/20220611/d6d3746a629d47dfaddc52281605ff02.png
[20170121211902991]: https://img-blog.csdn.net/20170121211902991
[20170121211910208]: https://img-blog.csdn.net/20170121211910208
[20170121211954881]: /images/20220611/8cc1002a6a5e4236ab2069ee02db958d.png
[20170121212103789]: /images/20220611/f024200aba8141b38f91ab3f5534c512.png
[20170121212110992]: /images/20220611/7d24f2fd69124ca3a6c04c55f390f022.png
[20170121212120274]: /images/20220611/779bc6acabc24398bd3157c0f49ed95e.png
[20170121212502029]: /images/20220611/1001094b07c7454c8cc3ae3bb7f24f4d.png
[20170121212523947]: /images/20220611/1130743b612044d792b5b83d4d42369a.png
[20170121212540343]: /images/20220611/86b6d184fae9417cb3b8052b6aaa52f7.png
[20170121212602198]: /images/20220611/de798df7217c446b8e2b2b1cd877a5bf.png
[20170121212620370]: /images/20220611/33096d95a19f4885924dbec0e0e20b72.png
[20170121212703636]: /images/20220611/ddaf94d4306b4d59ad289de393d6f019.png
[20170121212755627]: https://img-blog.csdn.net/20170121212755627
[20170121212805237]: https://img-blog.csdn.net/20170121212805237
[20170121212824253]: /images/20220611/1c0b3afb11374de1b910a7894cf71e74.png
[20170121212835972]: /images/20220611/36ea2c20fd2b490185cfaf8ea62ad13f.png
[20170121212848019]: /images/20220611/c7012a4ede0b4a2b8bdabb2a2304f38c.png
[20170121213148415]: https://img-blog.csdn.net/20170121213148415
[20170121213156184]: https://img-blog.csdn.net/20170121213156184
[20170121213209903]: /images/20220611/378620870d2a4d6d8a0062128935d71a.png
[20170121213224075]: /images/20220611/67a0fd4a606045279c63a088db745a25.png
[20170121213236888]: https://img-blog.csdn.net/20170121213236888
[20170121213246591]: https://img-blog.csdn.net/20170121213246591
[20170121213300870]: /images/20220611/a6b9641e3a1c4c5a864565ebc07b5cb6.png
[20170121213314716]: /images/20220611/bc807fa9bdb844d097c248d9667dca7f.png
[20170121213331902]: https://img-blog.csdn.net/20170121213331902
[20170121213341558]: /images/20220611/4452138e04014f57b97f36e57da52d00.png
[20170121213408295]: https://img-blog.csdn.net/20170121213408295
[20170121213427513]: https://img-blog.csdn.net/20170121213427513
[20170121213453920]: https://img-blog.csdn.net/20170121213453920
[20170121213515467]: https://img-blog.csdn.net/20170121213515467
[20170121213835425]: /images/20220611/6f999715b9bf462a86daa91e1d7b44fd.png
[20170121213847062]: /images/20220611/8da2fd8419764a17957f15e9b187f15a.png
[20170121213856750]: /images/20220611/7b5a880bbc0344568b4dd0244b8d64a3.png
[20170121213914000]: /images/20220611/e2d5125678544fb8af8214679f04ae0a.png
[20170121213926281]: /images/20220611/d10ae986c206457abfadbf1bc4e3269f.png
[20170121213946068]: /images/20220611/5c065604218c4a79b890c9612345bace.png
[20170121213959521]: /images/20220611/4e89c0da694c4943a3cd3b24d1071451.png
[20170121215008519]: /images/20220611/38755954eb0541198fafe917207d97b5.png
[20170121215031066]: /images/20220611/36054fa288414639a215f1312ebd4053.png
[20170121215134411]: /images/20220611/801efdba1fe84823897c531e513fe4a5.png
[20170121215149943]: /images/20220611/f4ee490a90b74249a9933a559d06cb94.png
[view plain]: http://blog.csdn.net/jxw167/article/details/54646773#
[20170121215353508]: /images/20220611/1e23d9dfc7144d679a229c1030d5dc5e.png
[20170121215447787]: /images/20220611/540e6c97b66f43ef9d8d77dad6a9be6f.png
[Link 7]: http://lib.csdn.net/base/softwaretest
[Link 8]: http://lib.csdn.net/base/operatingsystem
[20170121215711632]: /images/20220611/861d05764bf64cdda2d489b2202f09f9.png
[Link 9]: http://edu.csdn.net/course/detail/1046
[http_www.gamaasutra.com_gdce_2001_Jensen_Jensen_01.htm_2001]: http://www.gamaasutra.com/gdce/2001/Jensen/Jensen_01.htm,2001
[.NET]: http://lib.csdn.net/base/dotnet