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.,高斯区域会过亮,显示权重和为何需要单独归一化。

深入理解

用到的内置函数

一步步学会这个效果