GLSL 效果示例

数字故障:让局部条带横向错位并短暂跳色

错位只发生在选中的条带,其他区域稳定。

在线示例

修改右侧代码,左侧预览会实时更新。

观察什么

错位只发生在选中的条带,其他区域稳定。

实现原理

随机数由行号与离散时间决定,所以一条带内的像素一起错位,其他条带保持稳定。

找到控制效果的代码

float row=floor(uv.y*30.),tick=floor(u_time*8.);float active=step(.8,hash(vec2(row,tick)));vec2 q=uv;q.x+=(hash(vec2(row,tick+1.))-.5)*active*u_parameter*.3;c=texture2D(u_texture,q).rgb;c.r=texture2D(u_texture,q+vec2(active*.02,0)).r;

动手修改

把 floor(u_time*8.) 换成 floor(u_time*2.)。每个被选中的横条会更久地保持同一位移,便于看清整行像素一起移动的方式。

调试与成本

两次纹理读取分别提供基础颜色与偏移后的红通道。把 step(.8,hash(vec2(row,tick))) 改为 step(.5,hash(vec2(row,tick))),更多横条会被选中,但纹理采样次数不增加。

用到的内置函数

一步步学会这个效果