【Unity】从零使用ShaderGraph - 制作技能CD

搭建环境:

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

创建材质:

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

在这里插入图片描述

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

在这里插入图片描述


初步实现:

● 首先空格搜索UV,添加一个UV节点。目的是为了获取UV的坐标值,可以理解为(x,y)坐标,只不过在UV中表示为颜色值(RGBA)。所以 X 为1的时候为红色,Y为1的时候是绿色如图所示:

在这里插入图片描述

● 接下来为了得到一个在轴心在中间的图像,需要把原点移动到中间,即(0.5, 0.5),那么可以使用Substract函数来做一个减法。

在这里插入图片描述

● 接下来需要通过图像的坐标值,得到一个弧度值,以制作360°的填充。那么就需要用到Arctangent2函数。

在这里插入图片描述

● 但是Substract输出的是单个值,需用通过Split函数来把各分量切出来,再连接到Arctrangen2函数。

在这里插入图片描述

因为Atan2函数的取值范围是(-Π, Π) 也就是(-3.1415926, 3.1415926),那么为了方便我们控制,需要重映射区间到(0,1)。直接使用Remap函数可以实现这一效果。

在这里插入图片描述

● 目前我们得到的还是一张包含渐变的图像,那么我们可以通过SmoothStep函数来达到非零即一的效果。
● 首先让Remap后的值减去一个控制变量,把结果值赋给SmoothStep的Edge1,然后Edge2输入0或任意极小值。目的是为了让超过这个值的数都为1。

在这里插入图片描述
● 这里的控制变量就是新建一个float值,One Mius也就是做了一个(1-x)的转换方便控制,然后右键转换为Property让其可以在外部被修改。 这样我们修改这个变量值,已经能看到一个大概的效果了!基本已经达到了可以使用的状态。


补充完善:

项目中使用,仅仅这样肯定还是不够的,接下来要解决几个问题:
● 黑色区域需要是半透明的。
● 矩形变成圆形。
● 起始点的问题。
● 自动填充。

1. 黑色半透:

● 原理很简单 - 把0重映射到非0的值就行,这里我们重映射为0.2。

在这里插入图片描述

2. 矩形变圆形:

● 原理也很简单 - 把黑色部分利用透明裁剪给裁掉。
● 首先ShaderGraph给我们提供了现成的圆形形状:空格 - Ellipse,默认大小0.5,修改为1。
● 然后进行Multiply分量相乘,得到一个圆。
● 最后需要修改以下Shader Type改为Transparent有透明度的,并开启透明度裁剪。

在这里插入图片描述

● 这里Alpha Clip给个小于1的数值就行,意味着小于这个值的颜色都会被裁掉,那么黑色就会裁掉,白色会保留下来。

3. 起始点:

● 原理就是修改UV坐标的正负值从而达到修改方向的目的。
● 我们回到UV那个地方,让Y值乘以一个负1,这样就OK了,其他方向也同理调整。

在这里插入图片描述

4. 自动填充:

● 原理是使用Time节点来乘以或除以一个控制变量达到自动填充的效果。
● 在原控制变量处做如下修改:

在这里插入图片描述

● Divide节点是除法,这样就是5秒填充一周。

总结:

最后可以选一张合适的贴图文件,利用Sample Texture 2D节点进行采样,然后再与上面的效果混合。

在这里插入图片描述

最终效果如下:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/sylardie/article/details/126252215
今日推荐