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资源，更美观更节省性能。

Unity Shader （Wave Trail）波追踪效果（一）相关推荐

Unity Shader 之简单护盾Shield 效果的实现
Unity Shader 之简单护盾Shield 效果的实现目录 Unity Shader 之简单护盾Shield 效果的实现一.简单介绍二.实现原理
Unity Shader学习：Dissolve消融效果
Unity Shader学习:Dissolve消融效果消融效果在游戏里非常常用,这里简单的实现下,代码里用到了if分支在shader里可能会费一点,如果想直接用puppet_master大佬版本的话 ...
Unity shader学习之屏幕后期处理效果之高斯模糊
高斯模糊,见百度百科. 也使用卷积来实现,每个卷积元素的公式为: 其中б是标准方差,一般取值为1. x和y分别对应当前位置到卷积中心的整数距离. 由于需要对高斯核中的权重进行归一化,即使所有权重相加 ...
Unity Shader动画-做捕鱼达人效果
本篇将介绍向Unity Shader中引入时间变量,以实现一个顶点动画和一个UV动画的效果. 捕鱼达人效果内置时间变量 1: float4是内置向量 (x, y, z, w); float4 a; ...
【Unity Shader】聚光灯体积光效果的简单实现
效果如下: Unity中的聚光灯SpotLight,可以用作手电筒,射灯等类似的效果,比如这样的但是如果想把光束的效果做出来,就超出了SpotLight的能力范围了,本篇就为了记录一下一种简单的实现 ...
Unity Shader 实现简单的贴花效果（二）
这个月进入了找不倒工作的焦虑状态,花了两周时间去学OpenGL,发现以前课上的讲的内容过于浅显,也加深了对渲染管线的了解也算是相当不错的吧. 话不多说,先上最初的效果图吧. 本效果考了该篇博客Unit ...
【Unity Shader学习】边缘泛光效果
Shader "Sbin/Rim" {Properties{_Scale("Scale",Range(1,8)) = 1}SubShader{// 通过标签对透 ...
Unity shader 角色消失溶解隐身效果
先上两张效果图实现原理一句话总结: 空间中有一个隐形的面,判断模型上和面的相对位置,根据需求隐藏上方或者下方的点. 原理就这么简单,具体怎么实现呢,首先确定数学几何中平面的性质:原点到到面上任意一 ...
Unity Shader Graph 制作Emission发光效果
效果图: Graph中用到了一个重要的节点,Fresnel Effect菲涅尔效果,在画面渲染中菲涅尔效果是一种很实用的技术手段,在Unity中则经常用它来实现边缘照明. 模型用到的依然是Asset ...

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

Unity Shader （Wave Trail）波追踪效果（一）相关推荐

最新文章

热门文章