Niagara实现procedural浪花

『部分工程文件点我下载』
『知乎转载链接』
『有点相关的Unreal Circle演讲』

Summary

因为本文涉及到的内容比较广,关于Niagara最基础的一些部分比如怎么新建、怎样添加使用模块就不详细说明了,没用过的同学可以先看一下Epic官方文档的介绍:
Niagara核心概念

和贾越同学的系列教学直播:
https://www.bilibili.com/video/av73602807

本次工程效果:

为了实现海浪拍到岩石上激起千层浪的感觉,我们可以看到有几个表现上的关键点

  • 在岩石附近生成水花
  • 水花激起的时机和位置与海水的流动匹配
  • 出射速度受到海水运动和石头表面的撞击情况影响
  • 激起后水花的体积感

海面的模拟 – Gerstner Waves

游戏里模拟海水的途径是一门艰深的课题,本文就不多涉及了。这里为了制作需要,介绍一下相对直观实用的Gerstner Waves。

在流体动力学中,Gerstner Waves是周期表面重力波的欧拉方程方程的精确解。它计算机图形技术之前很久就出现了,用来描述不可压缩流体的表面波动。

单一Gerstner Wave材质应用在一个平面上的效果如图:

数学时间


我们可以看到每一个点不止有Z轴方向的运动,也有XY轴的运动。并且这不是一个简单的sin波而是带有‘浪尖’的波形,这些都是Gerstner Wave的重要特征。

因为篇幅原因这里就不具体说公式了,本节末尾提供了我做好的材质节点可以直接下载取用。详细算法可以参考:

Chapter 1. Effective Water Simulation from Physical Models

https://developer.download.nvidia.com/books/HTML/gpugems/gpugems_ch01.html

简单说来,定义一个波形的属性有:

[高度, 前进方向, 波长, 陡峭度]

我们定义相位φ

φ = 方向 ⋅ 位置 / 波长 + 频率 * 时间

其中

频率 = sqrt(重力 * 2π / 波长)

那么以

z轴偏移 =  高度 * sin(φ)

xy轴偏移 = 陡峭度 * 高度 * 方向 * cos(φ)

的形式去移动海面的顶点,顶点会沿着椭圆绕圈(左图),一系列的顶点组合在一起就会形成具有浪尖的波形。

引擎内实现

在引擎里的实现可以用HLSL写在Custom节点里,你也可以选择用节点连。执行效率上,节点连出来的公式和HLSL代码没有区别。

材质函数 MF_GerstnerWave

核心部分:

float3 d = float3(sin(DirectionInDegrees * 0.0174533), cos(DirectionInDegrees * 0.0174533), 0);  // 为了控制方便,输入并不是一个向量而是角度,这里转换一下

float w = 6.2831854 / L;

float theta = sqrt(6.2831854 * Gravity / L); // 由波长算出频率

float q = Stiffness / (Amplitude * w); // q是控制浪尖陡峭度的系数

float phase = dot((w * d).xy, WorldPosition.xy) – theta * Time; // 喂给cos和sin的相位

float3 offset = float3(q * Amplitude * d.xy * cos(phase), Amplitude * sin(phase)); // 照抄上面公式

这部分我放在了BlueprintUE.com里,点下面链接直接把节点复制粘贴到UE材质编辑器里就可以得到图上的节点:

https://blueprintue.com/blueprint/tt5p124n/

波形叠加

显然,一条波并不能说非常炫酷,Gerstner Wave的典型做法是把多条波叠加在一起。上面提到每条波可以控制的变量有:[高度, 前进方向, 波长, 陡峭度]

要合并多个波形,首先考虑的是波长,因为能组合的波长数量有限(8个已经很多了),我们无法完全参照真实世界的海洋数据,只能尽可能利用能付出的资源。由于波长相似的wave在叠加时看起来更有错综复杂的动态表现,我们可以在输入参数里首先给一个波长的中值LengthMedian,然后让不同wave的波长围绕这个中值变化。这样只要保留所有wave的波长与LenghMedian的比例,就可以通过改变LengthMedian来调整整个海洋的波浪大小:

在定义一组waves的结构FGerstnerWavesParameters中,美术可以在海洋的蓝图Actor上直接填写LengthMedian。

接下来,美术可以手动填写各个wave和LengthMedian的比例,也可以像我一样偷懒,填一个LengthMultiplierRange然后随机选取范围内的比例,在场景里拖动Seed直到随出一个好看的组合。

类似的方法同样适用于高度, 前进方向, 陡峭度。要注意的是,wave的高度和波长存在正相关关系,简单的做法是定义一个常数比例,让每个wave高度和和波长的比例保持一致。而在定义前进方向时会类似的给出一个DirectionRange定义前进方向的范围。

Niagara GPU粒子的生成

匹配水面位移

上面说了这么多,海面Shader内的位移数据其实并不能被外界直接读取,为了让Niagara能获取到海面的位移数据从而实现位置的同步,我们需要额外做一些工作:

方块:Niagara GPU particles

因为Gerstner Wave算法是确定性的,即给定同样的 [ 高度 | 前进方向 | 波长 | 陡峭度 ] 这样一组参数,不管在哪算出来的波形都是一样一样的。所以我们只要把与海面同样的参数传入Niagara System,就可以让Niagara粒子去‘追踪‘海面的粒子。(如上图)

传参

Normal难度:

上面说到,海面的波形是由好几个不同的Gerstner Wave组成,这里我用了8个,那么需要匹配海面的形状,其实在生成浪花时我们不用考虑所有8个waves,只考虑最大的一或两级wave,视觉上就很难看出不完全吻合的细节差别了。

Hard难度:

这一块可选阅读,可以跳过,对下面内容的理解没有影响。

可是如果我觉得这样做身体不适,非想传所有数据达到完美同步呢? 也不是没有办法。4个参数 x 8组 = 一共32个float变量,手动命名并且在蓝图里拉面条,再在Niagara模块上一个一个拖上去也不是不行.. 如果你想做得灵巧些,我发掘了一个输入数组的hack:

因为Niagara还在beta阶段,一些功能还在持续改进中,这个hack可能以后也不需要。我介绍一下的另一个原因是觉得对增加对Niagara的理解有所帮助。

开始我想把数据通过DrawToRenderTarget写到一张贴图上,让Niagara读,但因为操作太不友好并且不支持CPU粒子放弃了。后来发现Niagara里的Curve型变量是同时支持CPU和GPU的,读取也很方便。我在蓝图里把需要的变量写入到一个Curve asset里,Niagara内reimport更新就可以,很方便。

不过Curve key的格式是有讲究的,Niagara CPU sim在读curve时,直接就读对应位置的key value。但GPU sim上会首先把curve编码成一个1×128像素的Lookup table,然后再读对应位置的数据,这就导致如果key的time位置不是100%对到LUT的像素位置上,encode后会出现偏差,这个偏差在我们现在的应用中是无法容许的。

好在encode的逻辑非常直接,只是取第一个key和最后一个key的time看范围,normalize到[0.0, 1.0]之间:

所以要达到key和LUT的像素对齐,最简单的方式是让time = [0, 1, 2… 127],这样不需要额外操作,在GPU sim上读取即可。

最后一个key的time是127.0

这样我们就实现了可以在一个curve里记录128个float值。剩下要做的就是再BP里根据一定规则把8个wave的一系列参数编码,再从Niagara模块里通过相同规则解码。这里4个参数*8个wave,规则就是很简单的按照一定间隔记录了32个值。

按照一定间隔,在整数Time上记录了每一组parameters

在Niagara module中通过类似方式解压

定义GPU粒子的碰撞行为

Distance Field Collision

系统提供的collision模块非常健全,包括CPU trace碰撞,GPU depth / distance field碰撞等分支可以在下拉菜单中选择使用。我们这里使用GPU distance field碰撞,depth碰撞比较适合比较粗犷的效果,比如下雨下雪,稍微有点问题也看不出来,但如果水浪使用depth碰撞,岩石背面屏幕看不到的地方就会出错。

我们想有一些比较细腻的控制逻辑,比如这里水花撞到石头上,如果用默认的collision碰撞,反弹是朝着下图绿色的反射向量方向飞出去的,而流体撞到刚体的行为并不是这样完美的反弹,我们更想让它偏向下图紫色的角度。

下面三个gif分别展示不同反射角度的视觉:

反弹方向为绿色反射角
反弹方向为紫色切线角
反弹方向反射和切线之间的随机角度

定义这样的碰撞行为需要自己写模块,幸运的是这种逻辑都可以用Niagara的节点实现。引擎提供的Collision模块本身是一个宝藏,里面有各种碰撞的实现方式和模块编辑的best practice。在Collision – CollisionQueryAndResponse模块中我们探索一下可以发现:

点进去最底层的模块是:

即给出world position获得global distance field的数值和gradient,和材质里的DistanceToNearestSurface / DistanceFieldGradient结果是一样的,都是GPU内的query。

知道了这些,我们就可以很方便的自己写一个简单的collision判断:

并且在后面接上上面说到的反射角和切线角的逻辑–如果发现水浪粒子进行了第一次和岩石碰撞,那么就沿着我们想要的角度给一个初速度:

距离优化

同时因为有了distance field信息,可以在particle spawn时判断水浪粒子是否在岩石附近,如果不在就直接删除。

Smear

水花的材质想做好也是一项涉及很广的任务,我这里就是用了一个比较简单的云的贴图,稍微加工了下。值得一提的是通过particle的速度可以在材质里实现速度拉伸效果,对表达浪花飞溅的夸张形态非常有帮助:

Smear = 0
Smear =3
Smear = 15

实现方式也很简单,因为粒子sprite是朝向camera的,我们只要以local position和移动速度的点积缩放sprite即可:

1 thought on “Niagara实现procedural浪花

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.