MMD联动Unity学习笔记 Vol.24 ShaderGraph龙卷风实例

前言

    这期我们继续练习ShaderGraph。今天我们要使用ShaderGraph制作龙巻风效果。这期的内容来自油管一位大神，B站有同学将视频搬运过来了。我在下面贴了视频的地址，有需要的小伙伴可以对照学习。这期需要使用Blender和PS制作素材，Up使用的是Blender 2.79。所以使用2.8版本的同学要注意一下差异问题。另外我们这里还要使用一款Blender插件，UvSquares。

    下载地址如下：https://github.com/Radivarig/UvSquares

    安装方法可以参考之前的笔记，这里不多赘述。

具体步骤

    首先我们打开Blender，将场景中的方块删除掉。选中方块按X键或者Delete键。

    在Create选项中找到Cylinder（或者在场景中按Shift+A键选择圆柱体）。

    将Vertives的值改为160。

    我们点击Tools工具栏Shading下面的Smooth按钮。让圆柱体变得光滑。

    我们再点击这个改为Edit Mode（编辑模式），（或者按Tab键）。我们按G键，沿着Z轴移动。

    我们点击上图的图标来切换至面片的编辑（或者按Ctrl+Tab键切换）。旋转到可以看到底部的角度，选择下面的圆形面片，点击X键或者Delete键删除面片。同样方法再删除最顶部的圆形面片。

    我们再切换到点编辑，环选（按住Alt键同时点鼠标右键）最下方的点，缩小圆的大小。再环选最上方的一圈点，缩小圆的大小。编辑成类似下面的结果。

    接着我们按Ctrl+R键将环切，将圆柱体纵向细分。滚动鼠标中键，增加分段数量，大概分出67段左右。

    我们再用环选选择一条纵向的截面，按Ctrl+E键选择Mark Seam（标记接缝）。

    我们再点击分出一个窗口。

    将窗口设为UV/Image Editor。

    在编辑模式下全选，点选U键，选择Unwrap，将UV展开。

    我们可以在UV编辑器窗口看到UV已经展开。

    如果我们安装好UvSquares这个插件后，可以在UV编辑器中按T键打开工具栏，找到Mics的选项卡，点击UV Squares下面的To Grid By Shape按钮。将网格根据形状转换成方形。

    点击后可以看到网格并没有覆盖整张图，我们再使用S键缩放网格比例，按S键后再按X键或Y键可以控制缩放的轴向，我们将网格调整覆盖整张图大小。如下图：

    下面我们切换到3D视窗，在编辑模式下，环选最顶部一圈的点，我们再打开Proportional Editing（比例编辑），设置为Enable（可用）。

    再将右侧的Proportional Editing Falloff（比例编辑衰减）设置为Linear（线性）。

    我们确认选择最顶端的一圈点，按R键，再按Z键锁定在Z轴旋转，滚动鼠标中键，控制可以影响旋转的范围。我们转动180度左右。

    我们按A键全选，再按Ctrl+E键，选择Clear Seam，清除标记线。

    我们退出编辑模式，按R键，再按X键，让物件绕X轴旋转90度。再按Ctrl+A键选择Rotation & Scale。

    接着我们导出FBX文件。按下面选项设置：

    下面我们打开Unity，将FBX文件导入进去。

    打开Unity之前我们先要找一打龙巻风的无缝贴图，我们就利用视频的截图来制作一张无缝贴图。下面这张是视频的贴图。

    下面我们打开PS，我们点选背景层，给图片复制一个图层。

        下面是关键的一步来啦，我们选择滤镜>其它>使用位移滤镜改变图像查看其变化。

        切换到仿制图章工具对其过度部位进行涂抹，直至看不出合并的接口。

    重复以上两个步骤，直至出现图片不在出现合并的接口。如果缝合的不好的话，在位移图像会出现不自然的接缝，如果没有下面就可以保存图像，再次使用时已经是无缝贴图了。

    下面我们制作龙卷风的Shader，附予材质的步骤以前的笔记写得很详细了，我们这里不再赘述。我们只把关键的部分研究清楚。

    下面这部分输出给主节点的Emission和AlphaClipThreshold端口。

    这里附加Fresnel节点，给物件表面增加一层发光，从左到右三个变量控制Fresnel的表面力度，发光强度和发光颜色。

    上面这张图添加一张贴图（我们刚才制作的无缝贴图），用Time来控制贴图的偏移，使贴图可以自动运动，这样可以形龙卷风转动的效果，然后这两个部分用一个Add节点叠加起来。

    上面这张图可以控制龙卷风的可见度，我们在黑板上创建一个命名为Alpha的Vector1变量并暴露出去（这个变量我们可以考虑用滑杆模式），当我们调整Alpha的变量时（在1和0之间），这部分就可以根据贴图的内容判断哪些内容可见，哪些内容不可见。

    另一个主要部分是连接主节点的Position端口的节点群。

    其实这部分实现的功能效果只是抖动而已，但却非常复杂。原理嘛Up脑壳痛……

Up用缩略图再显示一次，如果还看不清，请小伙伴参照下面的视频组装。

    最后我们复制两个龙卷风的物件，尝试修改物件的Scale值，我们可以让X和Y保持一致，修改Z值可以产生出不同高度的龙卷风，我们再创建两个新的材质球，也给它们附上Tornado的着色器，这样我们可以分别给这几个龙卷风设置不同的参数，这样龙卷风就可以产生多个层次的感觉。

    可能是贴图精度不高的问题，Up的龙卷风还是有点问题。不过大体有点那个意思了。我们可以再调整一下参数来获得更好的效果。