GLSL 效果示例

CRT 扫描线:让图像出现横纹和移动的亮带

条纹间距与亮带速度独立变化,原图始终可辨。

在线示例

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

观察什么

条纹间距与亮带速度独立变化,原图始终可辨。

实现原理

扫描线用屏幕像素坐标控制密度,移动亮带使用归一化坐标。两者的尺度与速度互不绑定。

找到控制效果的代码

vec3 image=texture2D(u_texture,uv).rgb;float scan=.75+.25*sin(gl_FragCoord.y*(1.+u_parameter*2.));float roll=exp(-pow((uv.y-fract(u_time*.12))*12.,2.));c=image*scan+roll*.15;

动手修改

把 fract(u_time*.12) 改为 fract(u_time*.24)。宽亮带会以两倍速度滚动,细扫描线间距不变,因为它由 gl_FragCoord.y 控制。

调试与成本

底图只需一次纹理采样,两种亮度图案都在之后计算。把 scan=.75+.25*sin(...) 中的幅度 .25 改为 0.,细扫描线会消失,运动亮带仍然可见。

深入理解

用到的内置函数

一步步学会这个效果