网上看见了很帅的效果,用Shader Graph复刻了一下。在没有深入学习shader制作的情况下,这个东西居然花了我好几个小时的时间,效率真是太低了,如果不是现在刚好碰上这个需求,我肯定是要先花时间把Unity shader学个大概再仔细研究的。

等忙完了这段时间就开始正式学shader吧,一直都是用shader graph实在是雾里看花啊。

参考资料

medium.com

【作品集培训】如何实现黑客帝国数字雨?_哔哩哔哩_bilibili

绿色雨水效果

先不考虑原本代码中的速度和偏移量,先得到一片雨。

1
2
float y      = frac((fragCoord.y / _screen_height) 
return float3(.1, 1., .35) / (y*20.);




添加时间节点,使其随时间移动。




添加速度和偏移量

1
2
3
fragCoord.x  = floor(fragCoord.x/ 16.);  // 得到列号  
float offset = sin (fragCoord.x*15.); // 每一列雨柱需要有不同的起点,对列号取sin值作为偏移
float speed = cos (fragCoord.x*3.)*.15 + .35; // 列号取cos值得到不同的速度.加上0.35保证是正数

得到速度和偏移量,按照代码给出的算法添加上去。




随机文字效果

代码中直接算出了一张白噪声纹理,shadergraph只能用randomrange了。




将其与上面那个相乘,得到最终结果。

下载链接

shader and texture.zip