本章为大家带来高斯模糊的实现
首先，来点简单的，比如：高斯模糊的英文名叫 Gaussian Blur。
关于高斯模糊的原理，在我学习过程中，下面两篇文章是我觉得最能通俗易懂的介绍其工作原理的
- 阮一峰的《高斯模糊的算法》
- 维基百科的高斯模糊
十分建议先阅读以上文章，对高斯模糊有个认识。
一、 高斯模糊复习
阅读完高斯模糊，我自己的简单理解，一个像素点要计算出其模糊后的值，那么要执行下面几步：
- 采样周边像素值
- 根据被采样像素点和当前点的距离，计算出对应的权重值
- 求出周边像素值的加权平均值
当然，这里面有两个问题：
Q1：什么才是周边像素值？
A1：这个范围可以很大，比如周边就是全图，每计算一个点，都要收集全图像素点参与计算。也可以很小，只收集某个范围内的像素点，那么选哪个呢？
Q2：权重值怎么定义？
A2：高斯模糊实际上也叫高斯分布，不同距离的采用的加权值，实际是按照高斯分布（也叫正态分布）去计算的：
从上图，我们可以知道，大于 3σ（σ读标准差，英文术语 Stdev） 距离之外的点就几乎可以忽略，可以不参与模糊计算。而这一点在之前的 维基百科引文 中也有提及到
按照这个引文，我们所需要计算的「周边范围」其实就是约束在 (6σ + 1) x (6σ + 1) 的范围之内。相比起整幅图像，这个明显更加小，极大减少了我们的计算量。同时也是我们刚刚提出来的Q1问题的答案。
当然。以上这些内容，也是我自己的一个复习和理解，如果有误，欢迎指出。
二、实操
在上面的基础上，我们只需要进行下面几步，就可以求出当前像素点的模糊值了：
- 定义
σ（是正态分布的标准偏差）的值，计算出高斯分布矩阵的范围 - 根据二维高斯函数，计算出高斯分布矩阵的权重值
- 将周边像素值应用高斯分布矩阵的权重，得出最终加权平均的和，就是最终像素值
比如：
令 σ = 0.84089642 ，那么高斯分布矩阵的范围就是 (6 x 0.84089642 + 1) x (6 x 0.84089642 + 1) = 6.04537852 x 6.04537852 ≈ 7 x 7 ，即我们只需要计算 7x7 的高斯分布矩阵即可满足模糊效果。
而矩阵中的每个点值，我们直接套用二维高斯函数
/**
* 获取权重
*/
float getWeight(float x, float y) {
return (1.0 / (2.0 * pi * pow(stDev, 2.0))) * pow(1.0 / e, (pow(x, 2.0) + pow(y, 2.0)) / (2.0 * pow(stDev, 2.0)));
}
即可求出矩阵的值
那么，我们采样就很方便了，对应的片段着色器的关键代码就是
const float size = floor(stDev * 6.0 + 1.0);
const float halfSize = floor(size / 2.0);
// 步骤一：计算高斯矩阵上所有权重的和
float totalWeight = 0.0;
for(float x = -halfSize; x<= halfSize; x++) {
for (float y = -halfSize; y<= halfSize; y++) {
totalWeight += getWeight(x, y);
}
}
// 步骤二：采样周边像素并应用加权平均值，得出最终像素值
vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);
float onePxWidth = 1.0 / textureSize.x;
float onePxHeight = 1.0 / textureSize.y;
for(float x = -halfSize; x<= halfSize; x++) {
for (float y = -halfSize; y<= halfSize; y++) {
// 求出对应坐标的真正权重（对应权重矩阵）
float weight = getWeight(x, y) / totalWeight;
finalColor += texture(texture, v_uv0 + vec2(onePxWidth * x, onePxHeight * y)) * weight;
}
}
ps: 完整代码在我的 Github 仓库 或 Gitee 仓库 中可以找到
现在，就可以出我们的模糊效果了
三、性能考虑
相信你或多或少听说过高斯模糊很吃性能，那么具体又是在哪里吃性能了呢？
3.1 σ（标准方差）带来的计算量
首先，我们先提出一个问题：
Q：在高斯模糊中，影响图像模糊程度的因素是？
A：σ（标准方差），具体为 σ的值越大，图像越模糊
如果我们令 σ（标准方差）的值大一点，比如 1.5，那么高斯分布矩阵范围就是 10 x 10 了，这意味着，我们每计算一个像素点所对应的高斯模糊值，我们都要采样周边合计100个点进行计算，参与计算模糊值得点已经开始偏多了。
实际上，上面的模糊示例截图就是 σ = 1.5 的效果图，但很明显，这个程度的模糊还不够「模糊」。那接下来，我们很可能会做的一件事就是将 σ 在变大，比如变为10，那这个计算量就很大了，直接就会导致高斯模糊「很吃性能」。
3.2 模糊动画
另外一点，如果我们要做模糊动画，比如从不模糊变成模糊或者从模糊变成模糊等等。
那么这个时候，我们可以通过去修改标准方差去进行实时计算模糊值，方差越大，越模糊，方差越小，越清晰。
但是，方差的每次变动，都会导致我们需要重新计算矩阵的值，并且重新采样周边点，相当于把我们3.1章节在执行一遍，而这无疑会是一个「很吃性能」的地方。
3.3 优化方案
现在，我们知道「很吃性能」的地方了，我们就可以针对性进行优化了。
篇幅问题，我们将在后面章节进行讨论。
OK，本章完，完整代码在我的 Github 仓库 或 Gitee 仓库 中可以找到。
原创不易，如果我的文章对你起到帮助，不妨支持一下我吧
下一篇：
- Cocos Creator Shader Effect 系列 - 9 - 短暂回顾
上一篇：
- Cocos Creator Shader Effect 系列 - 7 - 点光/扫光特效