【Unity】从零使用Amplify Shader - 制作传送门

前言

上一篇使用了ShaderGraph来制作Shader,这一篇使用Amplify Shader,相比官方的ShaderGraph它的主要区别是。

优点:
● 生成后的代码可读性更高。
● 历史更悠久。
● 在Build_in管线下也能使用。

缺点:
● 付费。
● 非官方。

总的来说,使用起来两者区别不太大,节点名大多都是一样的。所以想用什么就用什么吧。

搭建环境

● (付费)下载并导入Amplify Shader Editor。

创建材质

● Project面板 - 右键 - Create - Legacy - Unlit,和上篇一样,使用最简单的无光模板。

在这里插入图片描述

● 创建完成后会自动弹出ASE节点编辑窗口,没有自动弹出的在创建出的Shader面板里打开。
● 右键Shader创建一个Material,并找个场景中的物体挂上(比如 Sprite Renderer),以方便我们观察。

在这里插入图片描述

初步实现:

● 首先需要一张噪点图,空格 - 创建节点Voronoi,并把它的Scale搞大一点可以看到如下。

在这里插入图片描述

● 这玩意儿中文叫做泰森多边形,《最强大脑》很喜欢用它。在这里我们只当作噪点图来使用,不用深究。
● 接下来需要用到一个叫做Twirl,中文就是旋转,对顾名思义,很好理解吧,让上面这玩意儿旋转一下。 不过要区别一下普通的旋转,它这个更像是扭曲,你拧毛巾那种扭曲旋转。

在这里插入图片描述

● 节点左边的几个控制变量我们用float和vector2来调整。
● Center 也就是改变中心位置,改到(0.5, 0.5)也就是坐标中间了。
● Strength 也就是扭曲强度,把float改个名字并右键设置为属性方便我们外部控制,拉到10大概能看到图中的效果。
● 仅仅两步,传送门的感觉已经有了!
● 如何让它自己旋转呢? 当然还是我们最常用的那个节点 Time,乘以个速度方便条件,连到offset(偏移)上就行。

在这里插入图片描述

● 这个时候在Scene创建已经可以看到一个类似效果了:

在这里插入图片描述

● 核心部分就只有上述这些内容,很简单吧!


继续完善:

同样的我们看看需要解决的问题和可以优化的地方:
● 去掉黑色区域。
● 添加自定义颜色。

添加自定义颜色:

● 使用我们的老朋友Color节点,然后进行Multiply相乘。
● 要注意的是,想要效果更好,可以开启Color的HDR模式。

在这里插入图片描述

● 这里我们也可以额外添加一张Unity自带的Default-Particle贴图对其进行混合控制它的形状,让其效果看起来可以更自然。

在这里插入图片描述

● 因为HDR的缘故,看起来似乎太刺眼了,我们又希望保持HDR来触发一些比如Bloom的效果,此时想要降低亮度怎么办呢。那么可以引入一个新的节点Power(幂)来控制亮度。

在这里插入图片描述

● 像这样给个2次幂,看起来就好多了。(原理是小数的幂次方会越来越小)

在这里插入图片描述

去掉黑色区域

● 这里我使用一种最简单的方式:单机ASE的空白区域,在Subshader属性中找到Blend Mode选择Additive。

在这里插入图片描述

● 保存以后,可以在Scene中看到已经变成这样了:

在这里插入图片描述

● 那为什么这样修改就可以达到这个效果呢? 上面的原理其实也不复杂,我们打开Shader代码看看:

在这里插入图片描述

● 注意这个Blend One One,和我们修改Additive以后下面的变化是一致的,实际上就是修改的这行代码。
公式:Blend One One = shader计算出来的颜色 *1+屏幕已有颜色 *1
● 具体解释就是这玩意儿控制像素最终的颜色混合方式,黑色是0,它加上屏幕已有的颜色,也就是屏幕的背景色那么就相当于黑色被透明了。其他颜色会和屏幕色进行一个叠加,比如红色传送门,背景是纯绿,那么在Game里看到的传送门就会偏黄。

在这里插入图片描述


总结

传送门的核心节点实际上就只有两个Voronoi和Twirl。代码里可以看到它们的实现方式,大多数情况我们也不必关心:

在这里插入图片描述

斜体样式透明的实现方式有很多种,上面可能不是最完美的,看一下官方的Blend几种方案大概就能慢慢熟悉了:

在这里插入图片描述

猜你喜欢

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