请选择 进入手机版 | 继续访问电脑版

查看: 946|回复: 2

[技术] 利用ShaderGraph着色器视图实现炫酷的物体消融特效

[复制链接]

1040

主题

1724

帖子

2万

贡献

管理员

Rank: 9Rank: 9Rank: 9

积分
22405
QQ
发表于 2018-5-5 03:53:50 | 显示全部楼层 |阅读模式
伴随着Unity2018.1的正式发布,许多重要的功能也正式跟开发者见面了,我们今天要介绍的Shader Graph着色器视图就是其中之一。Shader Graph着色器视图为开发者提供了一套可视化的着色器开发环境,它通过连接节点图的方式来实现Shader逻辑,既省去了编码调试的繁琐,也不用在代码编辑窗口和Unity之间来回切换查看效果。

在Unity官方技术直播课程中,我们为大家介绍了Shader Graph着色器视图的安装和使用,也介绍了一些实例来帮助大家熟悉Shader Graph的功能。今天我们将通过本文为大家介绍如何用Shader Graph着色器视图来实现消融特效。消融特效是一种在游戏中非常常见的特效,我们常常在物体消失的时候使用这样的特效,当然也可以用在物体出现的时候。

下面二张图分别表示了二种不同的消融效果,左图是表面不规则的消融,右图是按照特定的方向消融。我们将会介绍如何实现这二种不同的效果。
01.jpg


不规则消融
不规则消融效果的实现主要包括二个步骤,首先就是让物体的表面无规则的消失,就像冰块消融在地上一样。然后就是绘制边缘,有的消融效果会有明显的边缘,例如:被火点燃的报纸,燃烧和未燃烧部分有一个明显的边界。

1、实现表面消融
实现表面消融功能的实现很容易,主要是利用一张噪音贴图来映射表面的Alpha值,然后通过控制AlphaTest的值来控制表面区域的显示。由于噪音贴图的不规则性,当AphaTest的值从0到1变化的时候,物体就会逐步无规则的消失掉。ShaderGraph着色器视图的节点图如下图所示。
02.png


其中噪音贴图我们使用了ShaderGraph着色器视图内置的SimpleNoise节点,这是一种程序化生成的噪音贴图。同时,我们通过属性节点DissolveAmount作为AlphaClipTreshhold的输入,这样就可以在游戏中使用脚本控制物体消融的动画。

2、绘制消融边缘
首先我们需要找到这个边缘区域,从上面的步骤中可以看到,噪音贴图中小于DissolveAmount的区域即是被剪裁的区域,如果稍微增加一点DissolveAmount,我们就可以得到和显示部分重叠的区域,如下图所示。
03.png


上图中圆形部分可以看作被剪裁区域,橙色圆圈外部的扩展部分可视为边缘区域。下面我们就来看下ShaderGraph着色器视图中的具体实现步骤。
04.png


首先我们增加了一个EdgeSize的属性节点,并设定值为0.05,大小可以根据实际效果进行调整。然后我们用DissolveAmount 加上 EdgeSize 后再减去噪音值,得到扩展后的剪裁区域。之后利用Step函数把这部分区域的值都变为1,最后再乘以边缘颜色。经过以上步骤我们就初步实现了带边缘的消融效果。
05.gif


以上效果在场景中添加了Unity Postprocessing Stack的Bloom效果,所以颜色显得更加光亮。
06.png


对于一些燃烧的效果,边缘可能需要渐变色。我们可以利用一张渐变色贴图来进行颜色采样。
07.png


实现上和之前稍有不同,对于扩展后的剪裁区域,我们不再是直接利用Step把值都变为1,因为我们需要利用这部分的渐变数值进行贴图采样。由于这部分的数值偏小,不能直接对应到渐变色贴图的uv坐标,所以在采样之前对数值进行了倍数放大,实际节点图如下所示。
08.png


运行效果如下图所示。
09.gif


沿固定方向的消融效果
除了不规则的消融,沿固定方向的消融效果也比较常见。和之前利用噪音贴图来映射Alpha值不同的是,我们需要根据位置来映射Alpha值。例如:我们溶解的方向是自上而下溶解,那么我们需要表面像素的Alpha值从低往上映射到[0,1]区间。

如下图所示,我们主要通过二步来实现了这个映射。首先利用点积把坐标映射到溶解的方向,当前所取方向为(0,1,0)。通过这一步,坐标被映射到[-1,1]这个区间。然后再利用remap把坐标映射到[0,1]区间。
10.png


接下来是添加边缘色。首先需要确定边缘区域,我们还是通过扩展一点剪裁区域作为边缘。表示为公式为:
step(MappedAlpha - EdgeSize,  DissolveAmount)

其中MappedAlpha是上一步计算的Alpha映射值,EdgeSize表示边缘的大小。通过上述公式,我们可以找到扩展的剪裁区域。确定好边缘区域,我们需要进行上色。在本例中,我们使用了像素风格的边缘效果。为了实现像素风格的边缘,我们需要把uv映射到一张像素风格的贴图上。

这个例子中,我们直接使用了计算的方式。公式如下:
FinalColor = step( 0.5, randomRange( floor( uv * k ) ) ) * InColor

通过把uv乘以一个倍数k,再进行floor运算,可以把uv映射到[0,1,……,k-1]的整数数列上,这样就可以把连续值进行离散化。从而实现像素风格的边缘效果。具体实现如下图所示。
11.png


运行效果如下图所示。
12.gif


小结
通过本文介绍,我们可以看到消融效果主要是通过AlphaTest技术来控制表面区域的显示,因此我们需要针对不同的效果实现不同的Alpha映射,对于不规则消融,我们使用噪音贴图来映射;对于方向性的消融,我们使用坐标转换的方式进行映射。

另外,使用Shader Graph着色器视图来实现,整个中间过程都暴露在你面前,因此可以很方便的对于效果进行调整,比如边缘的宽度,颜色,以及像素方块的大小等等。后续我们还会继续介绍基于ShaderGraph着色器视图开发的效果,帮助大家更多的了解这个新的功能。更多精彩技术教程尽在Unity中文官方技术社区(UnityChina.cn) !

1

主题

5

帖子

115

贡献

初级UU族—2级

Rank: 2

积分
115
发表于 2018-5-5 07:27:50 | 显示全部楼层
更新了2018.1 打开Shader  发现少一个面板 就是添加节点的那个类型的面板

1

主题

40

帖子

385

贡献

初级UU族—3级

Rank: 3Rank: 3

积分
385
发表于 2018-5-13 03:59:11 | 显示全部楼层
个人作品(国外):https://jianpingwang.artstation.com
个人GitHub:https://github.com/MasterWangdaoyo
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表