UE5 材质 Flipbook火焰特效

Posted 2023-05-10 chenglixue

原理

• 因为游戏为了保证舒适的帧数，通常不能临时计算特效，所以一般是提前将动画做成单独的帧，最后渲染至纹理
• 流程
  

UE5提供的FlipBook节点

• 原理

  提供uv坐标，time节点，指定行列即可实现FLipBook

• 实现

  • 使用的flipbook纹理有五行五列，因此提供一个float = 5的节点连接到FlipBook的"Number of rows" "Number of Columns"

  • "Time"节点连接到FlipBook的"Animation Phase"(UE默认30帧，需要更改帧数的话用Time乘以一个value)

  • "TexCoord"节点连接至FlipBook的"UVs"

  • FlipBook的"UVs"连接至"Texture Sample"
    
    

手动实现FlipBook

• 步骤

  • 缩小uv坐标

    比如当前笔者使用的纹理有五行五列，需要实现只显示其中一个纹理图
    

  • 纹理变换

    求得的uv坐标 * 行(列)/1
    
    

  • 从上图可以得出，我们只是在uv纹理图的对角线上移动且有明显的在纹理图上移动的画面，而想达到的效果是一排一排的移动且没有移动的画面(突然变换至下一帧画面)

    • 我们将计算部分拆为两个部分：计算u，和计算v
      

      • 黄色框计算u：Time * 30是求帧数，Floor()是为了实现从一个画面突然变换到下一个画面而没有其中的变换动画
      • 蓝色框计算v：时间除以列数用于v值归0，这样才能实现某一行变换完后跳转至下一行的第一个
        

reference

Flipbook Animation - UE4 Materials 101 - Episode 5 - YouTube

UE4教程，简单冰冻材质图文教程

参考技术A 老样子，先上个最终效果图，冰冻带上一个按照世界坐标位置的从下至上的冻结效果。

这次，依然选用了三张图，分别是冰块反射图，冰块细节纹理图，mask贴图

PS：这次我将细节纹理放入了冰块反射贴图的A通道，后来发现，放入mask贴图的任意通道材质最合适来着，大家做的时候，可以考虑试下...

现在，我们说一下冰块的思路，因为目前我们做的冰冻效果最终输出为自发光通道，属于特效的范畴，所以，就不考虑折射，3S这些真实的物理效果，而且就算加上，有自发光的情况也不会很明显。所以，通常的思路，就是模拟冰块的形态，这里，我们利用到了两个效果表现，reflection和fresnel，单独效果如下。

接下来，我们分开把reflection和fresnel做一个补充效果，我们可以发现反射的效果首先没有冰块的透亮的效果，而且，整块反射显得很平，于是，我们为反射叠加一层细节纹理，并输出一个单通道，做一个颜色的调整。

反射追加细节，调色之后，已经挺像冰冻的效果了，接下来，和fresnel叠加并调节颜色，得到冰块最终效果。

冰块做好了，现在我们需要一个冻结的过程，不准备另外分2U来做mask，所以，我们把世界坐标位置的Y轴加上一个变量，以此来减去物体坐标位置，来得到一个黑白渐变，这个黑白渐变是永远在Z轴方向上，下图提出Z轴的数值之后，给了一个1-x函数，让渐变效果做一个反向，同时给了一个clamp节点，使数据规整在0-1之间，这里为了方便查看，同以往一样，给了两个最终结果做lerp，得到一个动态的数字，方便查看动态。图中的0，0，180和0，0，-180的三维项量是测试出来的大概值，大家可以看效果之后做一个微调，这一块可能有点绕，大家不理解可以一个一个节点拆开连接到自发光通道查看结果。

遮罩做好之后，我们需要做一个处理，毕竟边缘太过于硬了，于是，我们叠加了一层mask贴图来消除硬朗的感觉，关于mask的UV的tiling值，在这里，我们提取了之前的世界坐标位置的x轴和Y轴的值，乘上一个系数做调整，并加上一个朝X轴和Y轴的正方向移动的平移动画，这样形成下面的效果。

最终同冰块叠加，打到我们的最终效果。

PS：这次的图文教程，当中有比较多的参数的调整，大家可以尝试的多调调看，说不定能够发现意想不到的效果~~了

联系方式：0755-81699111

课程网址： http://www.vrkuo.com/course/vr.html