【Unity】从零使用ShaderGraph - 火焰UV扰动

搭建环境:

● 创建一个URP项目或通过UPM安装Universal RP。
● Editor - Project Setting - Graphic - Scriptable Render Pipeline Settings配置。

创建材质:

● 新建一个Shader Graph,选择Unlit Shader。(Unlit就是不受光照影响,减少一些干扰配置项。)

在这里插入图片描述

● 找到创建好的ShaderGraph文件,右键创建Material。
● 创建一个Sprite Renderer,把材质先挂上去,方便边做边观察。

初步实现:

● 首先去网上随便找一张黑底的火焰贴图,没错,随便找一张,大概像这样。

在这里插入图片描述

● 打开ShaderGraph,创建Texture Sample2D,把这张图片放进来,并连到Color上。
● 空格 - 创建一个Voronoi节点 (泰森多边形噪点),就用它来模拟扰动和流动。
● 接下来思考火焰的运动方式,首先会有个整体向上移动的趋势,那么思路就是Y轴正方向运动。
● 空格 - 添加一个UV节点,想要移动,自然要用到熟悉的Time节点。那么怎么只让Y轴移动呢。我们添加一个Combine节点,让Time节点连接到Combine的Y(G)节点上。再使用Add节点,让其和UV的分量相加,因为其他都是0,只有Y的值在变化:

在这里插入图片描述

● Mutiply是为了改变Y轴方向。
● Time节点再连接到Voronoi的Angle上,这样会产生一定的扭曲效果。
● 再添加一个Pow节点(幂次),让黑色区域更明显一些。
● 这样的流动看起来还是比较单一并且有规则的,那么为了效果更自然一些,我们把上面整体复制一份,调整一下Time和噪点大小到合适的值,再将两者相乘。

在这里插入图片描述

● 此时就能得到一张不太规则的扰动图了。
● 最后一步,让这个扰动图和我们采样的火焰贴图进行叠加,使用ADD节点,让两张UV图叠加,就能看到较为理想的效果了:

在这里插入图片描述

补充完善:

此时我们把材质赋给场景中的对象,发现黑色的底边还依然存在。根据之前的教程,我们应该可以联想到,是屏幕颜色混合模式导致的。如何修改呢:

  • 点开ShaderGraph面板右上角的Graph Inspector,修改Surface Type为Transparent,把那个且混合模式修改为Alpha

在这里插入图片描述

  • 原理就是修改了Shader的类型,让GPU知道这是一张含有透明区域的图片。混合模式决定了材质颜色如何与屏幕颜色混合,这个前面章节提到过了。具体可以去官方文档查看。。最终可以看到黑色区域已经变透明了。

在这里插入图片描述

总结:

UV扰动的大部分知识点其实还是常规的Time节点、噪点、坐标的相互配合与控制。唯一可能需要注意的一点是Add节点在这里使用比较多。这里最好也像Multiply节点那样去理解,可以把抽象的数值具体写下来,然后看(X,Y,Z,W) 与(R,G,B,A)的对应关系,简单计算一下就知道加减乘除产生的对应结果有什么区别了。

猜你喜欢

转载自blog.csdn.net/sylardie/article/details/126404911