unity Shader Graph实现2D图片扭曲波纹效果

先看效果，制作版本：unity2019.4.2

制作2D图片效果，不需要用到光照信息，所以创建ShaderGraph时选用Unlit Graph。
图片一般都会有透明通道，记得修改Unlit Master的Surface为Transparent。

要实现此效果主要思路

1. 扭曲效果基本是通过UV的偏移达到效果的，偏移要随机化才能达到扭曲，可使用噪声Noise来实现随机化。
2. 要能有动起来的效果，要用到Time，随时间进行变化。

参数定义

效果有用到图片，扭曲有速度控制和偏移的量值，故定义3个变量。一个Texture2D和2个Vector1。

UGUI中的Image中已经有贴图，所以想要我们的Shader能依赖到Image的贴图，需要定义的Texture2D的Reference名称为_MainTex，默认图片Shader为此名称。

显示图片

红色圈中部分是顶点颜色，在UGUI中的Image里的color对应此处。最终颜色是颜色的混合，采用乘法得到。（颜色值数值范围为0-1，混合不是用加法）

随机偏移

随机使用节点SimpleNoise（Scale越大，随机粒度越精细），通过当前UV采集到偏移量，传入到offset中，即可。注：Graph中提供了Tiling And Offset进行处理，不需要自己再进行拼接。


现在会发现波动的时候往一个方向偏移，不是原始位置为中心偏移，这是因为图片颜色值为0-1，数值总是为正的，需要将偏移值转为正负变化的。

转换【0，1】区间到【-1，1】区间，只需要使用公式2x-1，即可达到目的

时间变化与最终效果

现在偏移不会随时间变化，加上时间值和速度控制，这样最终效果就完成了。

展望

本效果基本能满足一些特效上的要求，但也有一些可以改进的。
1、UV的移动方向是固定的，不能变化
2、波动偏移时两轴数值是一样的，可以做一些变化
3、可以只偏移某一部分区域，达到更炫的效果