GLSL 效果示例
高斯模糊:用 3×3 采样核柔化图像
3×3 核使用 1、2、1 的乘积权重,总和为 16。三列依次显示原图、均值模糊和高斯模糊,滑块改变采样间距。
在线示例
修改右侧代码,左侧预览会实时更新。
观察什么
分屏比较原图、均值模糊和高斯模糊,采样间距对应输入纹素。
实现原理
3×3 核按 1、2、1 的乘积加权,总权重为 16。左、中、右分别显示原图、均值模糊和高斯模糊;滑块改变采样间距。
找到控制效果的代码
vec2 px=vec2(1.+u_parameter*5.)/256.;vec3 sum=vec3(0.),mean=vec3(0.);for(int y=-1;y<=1;y++)for(int x=-1;x<=1;x++){float w=(x==0?2.:1.)*(y==0?2.:1.);vec3 sampleColor=texture2D(u_texture,uv+vec2(float(x),float(y))*px).rgb;sum+=sampleColor*w;mean+=sampleColor;}c=uv.x<.3333?texture2D(u_texture,uv).rgb:uv.x<.6667?mean/9.:sum/16.;
动手修改
把 u_parameter 从 0 调到 1,采样间距 (1.+u_parameter*5.)/256. 会增大。对照未变化的左侧原图、中间等权模糊与右侧中心权重较高的高斯模糊,重点看 GLSL 字母周围。
调试与成本
循环共用九次纹理读取来计算均值与加权和,除数分别为 9 和 16。只把 sum/16. 改为 sum/9.,高斯区域会过亮,显示权重和为何需要单独归一化。