Unity2018 Shader Graph 学习笔记（二） 制作老旧电视带条纹的抖动效果...

Unity2018ShaderGraph中国直播中，讲述了老旧电视机的条纹抖动效果是如何实现的。我这里也根据直播中的实现，完成了这样一个效果。最终的效果如下。

首先先来分析一下这个效果都包含了哪些部分。

1、一个向下滚动的周期性黑色条纹。
2、一个横向移动的不规则uv偏移，这个偏移的特点是，相同的x(uv.x)坐标对应的偏移量是相等的，也就是说这是个和y(uv.y)相关的函数。


我们先从简单的效果入手开始实现，来实现一个向下滚动的周期性黑色条纹。

对于这样一个效果，他的里面实现也可以分成两部分

1、黑白相间的条纹的实现
2、周期性进行滚动

黑白相间的条纹

黑白相间的条纹我们通过uv0的y乘上一个常数，这个常数的大小决定了条纹的密度，然后再用sin函数作用，这样就形成了-1 ~ 1之间的周期性变化的条纹。这段图的内容如下。

更多精彩图片 请登录

静态黑白条纹的图像

接下来就是在这个基础上，对uv0的y进行周期性的变化，以实现条纹在滚动的效果。这里就要用到时间*一个滚动速度+uv0.y，用经过时间周期性偏移的uv再作用于条纹密度，这样就是实现了条纹的滚动效果。加上周期性移动的内容如下。

更多精彩图片 请登录

周期性移动的黑白条纹

接下来实现对原图像的的uv0.x进行偏移的效果。这个效果可以拆分成以下几点

1、需要一个周期性随机变化的在-0.5到0.5之间的伪随机值，这个值只和uv.y相关
2、将1中的值作用在uv.x上，这样对于相同的uv.x，这一行的偏移值都是相同的
对于1的实现，我们采用一个程序噪声贴图的办法。创建一个simplenoise节点，使用经过加时间偏移后的uv.y, uv.y这个只和y相关的uv坐标对噪声图进行采样，采样的值显然是基本对称落在0-1之间的，这时候我们使用remap方法，将0-1的值映射到-0.5到+0.5（此处可以直接进行减0.5操作）

更多精彩图片 请登录

映射到-0.5到0.5的偏移值

更多精彩图片 请登录

将uv.x的偏移应用到图像上的结果

将uv.x的偏移应用之后，我们发现图像的扭曲效果有些过大，基本很难辨认出原来的图像了。在这里我们希望将这个扭曲效果再作用到一个随机的0-1区间的数上，增加随机性和降低扭曲的效果。这个随机数是周期变化并且只和时间有关的，即同一时刻这个缩放的倍率是相同的。我们使用time,time这个uv坐标对一张噪声贴图进行采样，为了使效果夸张，在使用指数运算进行放大，将放大后的值作用于原来的x偏移上。

更多精彩图片 请登录

增加uv.x的缩放系数

更多精彩图片 请登录

使用新的偏移进行采样

最后，我们将周期性条纹和周期性x偏移的结果进行作用，就得到了最终的带条纹的效果。

更多精彩图片 请登录

非常详细，赞一个

谢谢分享

感谢大佬分享