Unity Shader （Wave Trail）波追踪效果（一）

Unity Shader 实现波追踪效果

前几天我在YouToBe上去看shader效果的时候，看到一款拳头家出品的效果这里我给大家分享一下，把制作的过程也分析下

效果图如下

分析

在上面的图片中能看得出来其实尾部的摆动效果只用到了一张图片，这时候我们在看一下图片的底色是蓝色的，中间是彩色的对吧？为什么这里没有呈现在效果中，所以这里我们分析一下，应该是将一张图片分为了R、G、B、A四张图去组合成的一张图，下面我们使用PS去制作这一张图片

四个通道的原图制作工作

这里我先把制作完成的分析图放在这里，帮助理解

由图中可知，图中最下面这张图片分别有上面R、G、B、A四张图组合而成的一张完整图
其中的RGB好理解就是三原色，A其实就是B的遮罩，整体为黑色背景
这里还需要记住一点，在R、G、B、A通道中白色为可见颜色区域，黑色为无颜色区域，渐变的地方会根据白色与黑色的比例程度去呈现可见颜色的深度

制作上述Combination组合图

1.打开PS新建一个2048*2048像素的画布（这里根据项目大小的需求来定）

2.点击图层中的小锁按钮解锁图层

3.更改容易辨识的背景颜色（注意不是前景颜色）

4.新建图层

5.绘制R通道

这里的R通道是横着的烟雾状形状，如果AE好的可以用AE的form插件去做流体然后导出给PS，这里拳头公司用AE做的这个流体的效果。这里给不会AE的人提供两个思路
（1）使用PS的滤镜液化和渐隐效果去制作烟雾
（2）去网上直接找烟雾效果用PS中的选择–>色彩范围去抠图
我这里直接把我之前拼接好的素材拿来用就不讲解了，毕竟这个不是重点

注意：这里选烟雾图的时候注意，尽可能的把图左边稍微粗一点，右边尽量细一点线条更加明显一点。这里在后面的Shader制作中，我们取左边为尾巴的起始点，右边为尾巴的结束为止，可想而知尾巴是由粗到细的，线条整个尽量呈现S型，我这里S的幅度有点大，可以在小一点，整个这一条呈现一个S状或者两个S状即可，看起来效果比较好。

将这个图层只保留R通道

6.绘制G通道

使用同样的方法新建一个图层，将我们的G通道的图层也绘制出来，这里想要效果好就在做一个烟雾状效果，也可以将R图层复制翻转180°并将图层样式中的混合模式只保留G通道

如下图所示，这样就完成了两个通道

7.绘制B通道

新加一个图层，这里的素材图可以直接去网上找几个遮罩的图层直接拿过来用（找两个不一样的，下面还需要用另一个）
跟制作R、G通道流程是一样的，新建一个图层改名为B图层，并且只保留混合模式中的B通道
如下图

这里效果不好看，我们将背景图层填充为黑色并且看一下通道的效果如下图

这样R、G、B通道就制作完成了，最后制作一下A通道

8.绘制A通道

这里跟上述制作R、G、B通道的方式不一样，在提一下黑色为无颜色区域，白色为有颜色区域。
这里就是用到了刚才提到的只是去做B通道的遮罩，原理就是新建一个只有B通道的A图层，用黑笔去遮挡原本只有B通道的B图层从而达到A通道的效果。

素材呢可以选取刚才多找的一个遮罩图（注意一定是黑白色渐变的，应为要用黑色去遮挡原本B通道的色区）

注意： 这里的A图层一定要改为只有B通道的，不然会遮挡R、G通道的颜色区

这样就完成了我们素材图的制作。

总结

作图的时候先别扣细节，最后完成Shader之后再去扣细节去优化图片和Shader资源，更美观更节省性能。