UE4中用Niagara实现procedural浪花

UE4中用Niagara实现procedural浪花

About me

大家好,我是Asher,Epic Games的Developer Relations Techical Artist,平时我的工作包括帮助各种大小游戏工作室解决技术/美术问题及实现相关引擎功能,有时间也会用引擎制作内容作为演讲和教程的示例。流程化的炫酷效果一向是我很感兴趣的领域,还在beta中的Niagara示例内容并不多,希望这篇解析可以给大家一些启发。

Summary

本篇特效的实验性质比较强,最初是为了探索BP-Material-Niagara协同工作的可能性,因为在Unreal Circle上反响很好所以决定写一篇更详尽的分析,希望可以使UE4开发者拓展对引擎框架的认识。

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

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

本次工程效果:

Niagara procedural wave splashhttps://www.zhihu.com/video/1196146896954314752


部分工程文件下载:
asher.gg/?


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

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

海面的模拟 – Gerstner Waves

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

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

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

数学时间

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

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

Chapter 1. Effective Water Simulation from Physical Models
developer.download.nvidia.com

简单说来,定义一个波形的属性有:
[高度, 前进方向, 波长, 陡峭度]

我们定义相位φ
φ = 方向 ⋅ 位置 / 波长 + 频率 * 时间

其中
频率 = 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材质编辑器里就可以得到图上的节点:
blueprintue.com/bluepri

波形叠加

1层Gerstner wave
2层Gerstner wave
4层Gerstner wave + 随机角度


显然,一条波并不能说非常炫酷,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编码成一个1x128像素的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个值,规则是简单的按照一定间隔记录它们。

每组间隔6.0,一组4个参数
在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即可:

叨叨完了

因为这个项目涉及的知识和技巧很多,很多地方只能大概说下思路。开头提供了部分实现的工程下载,有兴趣的同学可以下载看看。有问题可以留言讨论。

下期文章计划解析Volumetric Fog的一些细节表现方法,也就是去年(已经是去年了)11月Gears 5在Unreal Dev Day活动上展示的一些云雾表现,演讲发出后很多开发者都表现了强烈的兴趣。所以上个月杭州Unreal Circle我也做了些研究并做了一些解析,可以先看这里:
bilibili.com/video/av81

期待下期再见!

Asher Zhu
Tech Artist, Epic Games

编辑于 01-03

文章被以下专栏收录