qq_微尘_j13 发表于 2021-11-2 20:13:47

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偏移的结果进行作用,就得到了最终的带条纹的效果。






















qq_LXY_eeb 发表于 2021-11-3 09:48:55

非常详细,赞一个

ABC05 发表于 2021-11-4 08:50:54

谢谢分享

foruner 发表于 2022-9-28 16:56:52

感谢大佬分享
页: [1]
查看完整版本: Unity2018 Shader Graph 学习笔记(二) 制作老旧电视带条纹的抖动效果