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

液化柔和扭曲

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

他的方法有个致命缺点,就是右侧会有横线
【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第1张图片
出现这个问题是因为UV出了问题,他为了控制波纹强度就给噪声图乘了个强度值strength,但也导致uv的offset不再是0 ~ 1中间,而是0 ~ streng,所以输出的图的x在1-strength ~ 1处就会有横线,我的解决办法是增大噪声图的tilling来把横线挤出去
【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第2张图片

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

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

带描边的溶解

效果:
【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第4张图片
【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第5张图片

【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第6张图片
更新:
原来的版本在应用于非正方形的sprite上后可能发生Voronoi被拉伸的效果,解决方法是把Voronoi结点的UV改成世界空间,搜Position就能找到

漩涡扭曲

直接用twist节点,开放中心坐标和强度两个变量,很简单,适合对圆形物体使用
【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第7张图片

平面水

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

  • 有透明的叠加效果和水面的白色象征泡沫
  • 类似乐克乐克的水效果,但是水面的变化少了很多,毕竟用的是simple noise放大许多之后step,真不知道怎么做细节了……
  • 虽然有控制水面高度的参数,但是实际上水面的变化非常大,这让我很不满意
  • replace color节点好神奇
  • 白色泡沫的变化不够organic 我也很不满意
    【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第8张图片

平面水升级版

【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第9张图片
【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第10张图片

最终效果-静态
【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第11张图片
最终效果-搭配Animation做出的动态

  • 和第一版平面水的最大区别在与水面起伏幅度、水平面高度和泡沫效果更可控,这是因为使用的Gradient Noise 的Scale更小,且强度更小,并搭配UV结点的y通道,呈现更细微的梯度效果
    【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第12张图片
    几乎看不出有不同

  • 将两个梯度图都用step处理再相减,就有了泡沫
    【Unity】ShaderGraph的五个2D案例:动态液化柔和扭曲、带描边的溶解、漩涡扭曲、动态平面水、同心圆波纹_第13张图片

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

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

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

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

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

同心圆波纹

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

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

你可能感兴趣的:(笔记,shader,unity,游戏开发)