在UE4中实现锥体下雨效果

终于不懒，打起精神更新一下前段时间做过的一些东西。。

本文主要讲述一个特别的下雨效果在UE4中的制作过程。这个效果是模仿《天涯明月刀》手游的下雨效果做的，一开始是参考了知乎上的一篇剖析天刀下雨效果的文章；之后一路顺藤摸瓜，摸到了那篇文章所参考的教程，也找到了天刀端游当时的文章，以及CSDN上一篇很实用的文章；再有一些英语的资料，把这些综合起来，成为了我学习这整个效果制作的基础；在此也要感谢无数的前辈们踩了这么多坑还愿意发到网上来分享，让我们这些后来者已经省了不少功夫。

过程

锥体

首先参考的文章为腾讯游戏学堂的文章，这个阶段的主要目标是获取到原项目的代码（教程是开源的），然后跟着教程摸清楚整个效果的实现原理。记录一下思路，大概就是，所有的这些下雨效果都是基于《微软模拟飞行2004》中所提出的方法——即在摄像机前绘制一个双锥体，然后在锥体上滚动播放雨滴纹理，达到一种下雨的效果。不同之处在于，我们如何表现这些雨幕的纵深感；如何让雨幕和环境实现交互等等，但是基本的思想就是使用一个双锥体（这不就是模拟人生里面小人顶在头上的那个吗）。

图1 梦开始的地方：锥体

知道了这一点后，下一步就在于如何体现出雨滴的纵深感。比如说我们观察就会发现，远处的雨滴相对于我们来说下落的速度比较慢，而近处的就比较快；远处的雨滴会更加细小，而且密集，近处的则会更加细长，更加稀疏；还有远近体现出的颜色深浅的效果等等。教程中给出的解决方案：给每层雨幕都自己设定两个值，一个是雨幕开始的深度a，一个是雨幕的厚度b；再加上雨滴纹理本身的B通道中存储的深度信息c，我们可以算出整张雨滴纹理的深度即为a + b * c；然后在摄像机视角获取场景深度，用这个真实的深度和我们自己拟定的虚拟深度作差；最后再经过saturate，我们就得到了一个scale，用来表示大概有多少雨是在这个像素的深度之前的；用这个值我们就可以控制雨幕的纵深感，如果设置一个远距离的雨幕，近距离的物体就不会被淋到，整个雨幕的纵深感立刻就体现出来了。

垂直遮挡s

到此为止，这篇腾讯学堂的文章已经教会了我所有它能教的，下一步要继续参考知乎的文章，来进行下一个效果的制作：垂直遮挡。也就是说，有屋顶的地方不应该还下雨，这是很正常的事情，所以也是必须实现的效果。要实现这个效果，我结合了一下CSDN的文章和知乎的文章的做法，思路大概是：

先设置一个在高处的摄像机拍一张高度图；
通过虚拟深度和视点的位置，还原出每一滴雨的虚拟世界坐标；
在高度图中取对应点的深度和我们计算出的，以高度摄像机为视点得出的虚拟深度作比较，深度比高度图的深度要大的，自然说明有遮挡物，也就不该渲染。

其实这就类似Shadowmap的实现方法，只不过是把阴影换成了雨滴而已。

途中也踩了很多很多很多很多坑，比如教程中使用的是unity的深度（0-1），还涉及到透视投影的深度是否线性这样的问题；而在UE4中，首先高度图采用的是正交投影，所以不涉及到透视相关的问题；其次不管是拍出的高度图，还是节点中给出的SceneDepth和PixelDepth，都是以真实的深度表示的，而且已经做好了深度矫正，也就是说是完全正确的深度，而不会说由于透视投影的关系，在同一个平面上的两个点会因为距离摄像机的中心距离不同而有不同的深度值。弄明白了这个才终于成功算出了虚拟的世界坐标；然后又涉及到一些从世界坐标对应到高度图的UV，以及一些UV上的各种奇奇怪怪的问题，好在最后终于是成功做出了这个垂直遮挡的效果。

最后还有一点bug，和知乎的文章第二篇所提到的一模一样，就是在进入遮挡物时，会出现一种类似于掀开帘子的效果，显得非常突兀；最后还是参考文章的做法来解决了这个问题，但是这一点在最后得到解决的时候，我都没有搞明白为什么这样做就可以做出一个进入遮挡物时的渐变效果。但至少可以确认的是，确实和导师说的一样与整个雨幕的厚度有关，因为当厚度变得非常小时，这个问题又会再次出现（并没有测试这个效果出现的厚度阈值是多少）

图2 下雨效果，左上角为垂直深度图

收尾

至此，基本上已经完成了整个效果的核心部分，接下来就是一些调优的问题。还有一些小效果本来想做，比如说CSDN的文章中提到的，雨滴对玩家的运动产生反应，有一种互动的感觉；但是后来参考了天刀手游中的实际效果，是没有做这样的交互的，效果也一样很好，于是就暂时搁置；以及，天刀手游在表现大雨时，会间歇性地有一些雨雾的产生，给人一种风大雨大的感觉，很有氛围；这个效果在我对雨幕进行调优时意外地找到了差不多的模仿方法，只要加一层雨幕，用噪声给他UV狠狠地扰乱了，就能给出看起来差不多的效果，甚至我这个看着雨还更大一点。。

来张效果预览吧：

图3 效果预览

后来一段时间，再次Review整个效果时，又加上了一个Splash的小特效，用的是快要过时的Cascaded Paticle System。。

最后，参考文献如下：

Water drop 2a – Dynamic rain and its effects | Sébastien Lagarde (wordpress.com)

天刀下雨效果分析和复现（一） - 知乎 (zhihu.com)

教程 | 在Unity中实现逼真的下雨效果-腾讯游戏学堂 (qq.com)

移动端天气系统–【下雨】效果之【雨滴】的实现和分析_lyuavery的博客-CSDN博客

《天涯明月刀》中的雨景渲染-腾讯游戏学堂 (qq.com)

天刀下雨效果分析和复现（二） - 知乎 (zhihu.com)

[Sci-Hub | ACM Press ACM SIGGRAPH 2004 Sketches - Los Angeles, California (2004.08.08-2004.08.12)] ACM SIGGRAPH 2004 Sketches on - SIGGRAPH '04 - Rendering falling rain and snow | 10.1145/1186223.1186241

以及"ATI Toyshop Demo" from AMD