【Unity】ShaderGraph的五个2D案例：动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹

液化柔和扭曲

有参考M.studio的水面案例 链接

他的方法有个致命缺点，就是右侧会有横线

出现这个问题是因为UV出了问题，他为了控制波纹强度就给噪声图乘了个强度值strength，但也导致uv的offset不再是0 ~ 1中间，而是0 ~ streng，所以输出的图的x在1-strength ~ 1处就会有横线，我的解决办法是增大噪声图的tilling来把横线挤出去

• 新发现：用于扭曲的噪声图乘在Vertex Position上效果会更好
• 开销更小，编辑模式下终于不卡了，坏处就是只有Sprite才能用，UI用不了
• 这个Position结点我找了半天
• 注意扭曲后的Position需要减去Strength/2,否则会由于和噪声图相乘后整体变小而整体向左下角移动

带描边的溶解

效果：

更新：
原来的版本在应用于非正方形的sprite上后可能发生Voronoi被拉伸的效果，解决方法是把Voronoi结点的UV改成世界空间，搜Position就能找到

漩涡扭曲

直接用twist节点，开放中心坐标和强度两个变量，很简单，适合对圆形物体使用

平面水

参考unity官方案例，夏洛特做过介绍，B站链接

• 有透明的叠加效果和水面的白色象征泡沫
• 类似乐克乐克的水效果，但是水面的变化少了很多，毕竟用的是simple noise放大许多之后step，真不知道怎么做细节了……
• 虽然有控制水面高度的参数，但是实际上水面的变化非常大，这让我很不满意
• replace color节点好神奇
• 白色泡沫的变化不够organic 我也很不满意
  

平面水升级版

最终效果-静态

最终效果-搭配Animation做出的动态

• 和第一版平面水的最大区别在与水面起伏幅度、水平面高度和泡沫效果更可控，这是因为使用的Gradient Noise 的Scale更小，且强度更小，并搭配UV结点的y通道，呈现更细微的梯度效果
  
  几乎看不出有不同

• 将两个梯度图都用step处理再相减，就有了泡沫
  

• 使用Render Texture把另一个不渲染UI的摄像机的画面引进来，形成透明的效果

• 和液化柔和扭曲的原理相似，用UV 乘上柔和的噪声图再重映射UV来液化图像

• 需要仔细调节主摄像机、Render Texture摄像机和平面水这三者的z值关系，否则容易混乱

• 即使z左边不出问题，渲染在主摄像机的UI也不会被扭曲，看起来不太自然

• 性能消耗挺大的，目前用于场景转场，感觉有点可惜

同心圆波纹

• 一开始进入了想用shape-eclipse做的思维误区，后来发现想复杂了
• 首先用在y上tile值较大的UV图，搭配step做出条纹
• 再用极坐标结点，将条纹图变成同心圆图
• 搭配祖传艺能：乘噪声图再重映射UV
• 别忘了MainTex
• 完成