GLSL 效果示例

RGB 色散:让图像边缘出现红蓝错位

中心基本重合,越靠画面边缘,颜色分离越明显。

在线示例

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

观察什么

中心基本重合,越靠画面边缘,颜色分离越明显。

实现原理

红蓝通道沿离开中心的方向反向采样,中心附近位移接近零。

找到控制效果的代码

vec2 d=(uv-.5)*(.01+.07*u_parameter);c=vec3(texture2D(u_texture,uv+d).r,texture2D(u_texture,uv).g,texture2D(u_texture,uv-d).b);

动手修改

把乘数 .01+.07*u_parameter 先设为 .08,再设为 0.。前者使红蓝副本在图像外围分开,后者让它们与绿色完全对齐。

调试与成本

输出三个通道各读取一次纹理,(uv-.5) 使中心位移为零。把该向量换成 vec2(1.,0.),图像会改为均匀横向分色,便于对照径向版本为何能保住中心。

用到的内置函数

一步步学会这个效果