【转载】UE4 —— 雨点和水滴滑落效果笔记

479 阅读3分钟

原文链接:UE4---雨点和水滴滑落效果笔记

涟漪 Mask 制作

贴图的 R 通道存储的是涟漪的范围,涟漪中心为最亮,往四周渐变为黑色

image.png

利用 Texture.R - (1 - frac(time * 涟漪变化速度)) 得到沿涟漪中心往外伸展的效果

image.png

img

利用同样的 Distance 获取涟漪的边缘,并缩放到 0-1,最后取反

image.png

可以看到,涟漪的而结束很生硬,没有淡入淡出

GIF 2021-1-5 21-32-16.gif

利用数学运算创造一个过度平缓的函数周期,实现淡入淡出效果

image.png

image.png

最后要解决的就是涟漪的连续问题,同样解决的方法与 Flowmap 那篇文章 相同,创建两个涟漪动画,一个涟漪动画偏移一段时间,然后用 Lerp 函数将两端动画进行融合

image.png

image.png

就是重复感有点强烈

GIF 2021-1-5 21-32-16.gif

各种混合

得到涟漪 Mask 之后一切就好做很多了,接下来就是各种属性混合

涟漪法线 Lerp 的 Alpha 用的是 Mask 动画融合的 Alpha,与输入法线混合 用的是涟漪 Mask

image.png

基础颜色混合,输入的基础颜色与水颜色、水亮度相乘得到的就是水涟漪颜色,大多数金属材质在潮湿的情况下会变暗,所以下面的基础颜色根据金属度进行一定的 Lerp 操作。

image.png

金属度和粗糙度混合

image.png

最终涟漪

这里我随便找了一个 UE4 自带金属材质连接 MF_RainSurface 进行测试

image.png

GIF 2021-1-5 21-32-16.gif

水滴滑落材质

水滴滑落大多数会出现倾斜的情况,以正方体为例,雨水从上方落下,那么滑落情况只会出现在侧面

image.png

我们从这个方面开始入手,用世界空间位置作为水滴滑落纹理的采样 UV,由于只是需要侧面进行正确的采样,所以我们只需要在 XZ 平面YZ 平面进行贴图采样,根据顶点法线的 X 轴 Mask 进行 lerp 操作

image.png

得到效果如下

image.png

法线也用同样的 UV 去采样,同样的 Alpha 去 Lerp

image.png

同样我们需要采样贴图的B通道,得到的是向下移动块状的渐变图

image.png

image.png

我们将从 G 通道获取的水滴图减去 B 通道得到的块状渐变图,可以形成水滴滑落的错觉

image.png

GIF 2021-1-5 21-32-16.gif

将水滴法线与正常的法线方向根据水滴滑落 Mask 进行混合 (0.5,0.5,1),才能得到正确的法线

image.png

水滴滑落效果和涟漪结合

首先要获取永远朝上的 Mask 贴图,其实就是将法线方向从切线空间切换到世界空间,只获取 B 通道

image.png

后面与 1.1 相乘是为减弱水滴拉伸的出现,可以看到当平面轻微倾斜的时候,会出现水平拉伸的情况

image.png

得到 Z 轴 Mask 贴图之后,将涟漪和水滴滑落 Mask 做最后的混合

image.png

最终效果

GIF 2021-1-5 21-32-16.gif

  • 全家福

image.png