GLSL 效果示例

可分离高斯模糊:先横向模糊,再纵向模糊

分别展示横向中间结果和第二遍合成,观察相同半径的采样成本。

在线示例

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

观察什么

分别展示横向中间结果和第二遍合成,观察相同半径的采样成本。

实现原理

第一遍只沿 X 过滤,第二遍对第一遍结果沿 Y 过滤;可在通道选择器查看横向中间结果。

找到控制效果的代码

c=texture2D(u_vertical,uv).rgb;

u_horizontal 读取测试图,u_vertical 再读取 u_horizontal,Fragment 显示 u_vertical。把最终 texture2D 调用中的 u_vertical 改为 u_horizontal,可单看横向模糊,而不修改两个 pass 的计算。

动手修改

在 u_horizontal 和 u_vertical 中都把间距因子 1.+u_parameter*3. 改为 4.。横纵模糊会固定在相同宽度;选择 u_horizontal 可查看只处理一条轴的中间图。

调试与成本

每个模糊 pass 做五次过滤采样,最终显示再读一次。只把 u_vertical 的间距因子改为 0.,它的采样点会收拢到中心,此时主要保留横向 pass 的模糊。

深入理解

用到的内置函数

一步步学会这个效果