Contents

UE4ZenGardenRake材质分析

ZenGarden Rake 材质分析

https://img-blog.csdnimg.cn/20200217140417568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMDMwODQz,size_16,color_FFFFFF,t_70

今天要讨论的问题就是这个随着鼠标的拖动,能够形成痕迹的效果是怎么实现的

逻辑控制

https://img-blog.csdnimg.cn/20200217140421577.png

主要的逻辑控制实在这个actor里面,和之前的讨论一样,如果它被点击的花,会触发它的interaction interface 事件。它会做如下的事情:

  1. 将点击点信息存储到LastHitResult中,并将HasLearned打开。

  2. 重置SplinePoint数组,LastHitResult加入数组(这个事情只在开始的时候和重置的时候做)。

  3. 判断新加入的点是否和之前的痕迹有关联(也就是是不是和之前的是连在一起的),如果不是的话,说明是从其他地方另开了一个线,那么就修改材质中的N1值为当前的坐标。如果是的话,那么说明是鼠标进行的拖动,是连续的,这个时候直接进行··时间相关的`TouchDeltaTime`和1`LastTouchTime`的设置,然后根据这个点和之前的点的距离与参数Segment的大小比较,判断是使用哪一个,最后更新数组和LastHitResult。

  4. 最主要的一步就是DrawSplineWithMesh

  5. 最后就是播放动画,音效等信息。

1.1DrawSplineWithMesh

我们主要来看一下DrawSplineWithMesh主要实现的逻辑有哪些:

https://img-blog.csdnimg.cn/20200217140426798.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMDMwODQz,size_16,color_FFFFFF,t_70

其首先是有一个针对segment片段的最大限度的判断,如果超过了这个,会对一开始的进行删除。

https://img-blog.csdnimg.cn/20200217140429955.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMDMwODQz,size_16,color_FFFFFF,t_70

之后,动态创建StaticMesh,并添加到Actor里,然后设置它的Translucent优先值。然后把新的组件添加到SplineMeshList,之后还有一个判断,最多有5个,如果多于5个的话,把第一个的材质参数值修改为现在的,而不是简单的删除再创建。如果是还有有到5个的话,动态的创建材质。然后传给材质参数值。

https://img-blog.csdnimg.cn/20200217140433523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMDMwODQz,size_16,color_FFFFFF,t_70 具体的意义我们按下不表,基本的流程大概就这么多

材质分析

2.1曲线效果

对于曲线效果

https://img-blog.csdnimg.cn/20200217140437638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMDMwODQz,size_16,color_FFFFFF,t_70 主要是根据给出的参数值,建立B-样条曲线,修改Mesh的顶点值,来完成弯曲的效果,最后在传入世界场景偏移当中。

我们将变换的顶点法线信息的XY值传入CUV1中,方便之后使用

2.2 突出的山脊凹凸效果

我们将存储的法线(NX,NY)

https://img-blog.csdnimg.cn/20200217140441639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzMDMwODQz,size_16,color_FFFFFF,t_70

进行操作,使得越接近(0,0)的法线越搞,这要就能呈现一个拱形的结构