本章為大家?guī)?lái)高斯模糊的實(shí)現(xiàn)

2d-sprite-gaussian-blur-v1

首先，來(lái)點(diǎn)簡(jiǎn)單的，比如：高斯模糊的英文名叫 Gaussian Blur。

關(guān)于高斯模糊的原理，在我學(xué)習(xí)過(guò)程中，下面兩篇文章是我覺(jué)得最能通俗易懂的介紹其工作原理的

1. 阮一峰的《高斯模糊的算法》
2. 維基百科的高斯模糊

十分建議先閱讀以上文章，對(duì)高斯模糊有個(gè)認(rèn)識(shí)。

一、 高斯模糊復(fù)習(xí)

閱讀完高斯模糊，我自己的簡(jiǎn)單理解，一個(gè)像素點(diǎn)要計(jì)算出其模糊后的值，那么要執(zhí)行下面幾步：

1. 采樣周邊像素值
2. 根據(jù)被采樣像素點(diǎn)和當(dāng)前點(diǎn)的距離，計(jì)算出對(duì)應(yīng)的權(quán)重值
3. 求出周邊像素值的加權(quán)平均值

當(dāng)然，這里面有兩個(gè)問(wèn)題：

Q1：什么才是周邊像素值？

A1：這個(gè)范圍可以很大，比如周邊就是全圖，每計(jì)算一個(gè)點(diǎn)，都要收集全圖像素點(diǎn)參與計(jì)算。也可以很小，只收集某個(gè)范圍內(nèi)的像素點(diǎn)，那么選哪個(gè)呢？

Q2：權(quán)重值怎么定義？

A2：高斯模糊實(shí)際上也叫高斯分布，不同距離的采用的加權(quán)值，實(shí)際是按照高斯分布（也叫正態(tài)分布）去計(jì)算的：

正態(tài)分布，來(lái)自百度百科圖片

從上圖，我們可以知道，大于 3σ（σ讀標(biāo)準(zhǔn)差，英文術(shù)語(yǔ) Stdev） 距離之外的點(diǎn)就幾乎可以忽略，可以不參與模糊計(jì)算。而這一點(diǎn)在之前的 維基百科引文 中也有提及到

image.png

按照這個(gè)引文，我們所需要計(jì)算的「周邊范圍」其實(shí)就是約束在 (6σ + 1) x (6σ + 1) 的范圍之內(nèi)。相比起整幅圖像，這個(gè)明顯更加小，極大減少了我們的計(jì)算量。同時(shí)也是我們剛剛提出來(lái)的Q1問(wèn)題的答案。

當(dāng)然。以上這些內(nèi)容，也是我自己的一個(gè)復(fù)習(xí)和理解，如果有誤，歡迎指出。

二、實(shí)操

在上面的基礎(chǔ)上，我們只需要進(jìn)行下面幾步，就可以求出當(dāng)前像素點(diǎn)的模糊值了：

1. 定義σ（是正態(tài)分布的標(biāo)準(zhǔn)偏差）的值，計(jì)算出高斯分布矩陣的范圍
2. 根據(jù)二維高斯函數(shù)，計(jì)算出高斯分布矩陣的權(quán)重值
3. 將周邊像素值應(yīng)用高斯分布矩陣的權(quán)重，得出最終加權(quán)平均的和，就是最終像素值

比如：

令 σ = 0.84089642 ，那么高斯分布矩陣的范圍就是 (6 x 0.84089642 + 1) x (6 x 0.84089642 + 1) = 6.04537852 x 6.04537852 ≈ 7 x 7 ，即我們只需要計(jì)算 7x7 的高斯分布矩陣即可滿足模糊效果。

而矩陣中的每個(gè)點(diǎn)值，我們直接套用二維高斯函數(shù)

二維高斯函數(shù)

/**
  * 獲取權(quán)重
  */
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)));
}

即可求出矩陣的值

matrix

那么，我們采樣就很方便了，對(duì)應(yīng)的片段著色器的關(guān)鍵代碼就是

const float size = floor(stDev * 6.0 + 1.0);
const float halfSize = floor(size / 2.0);

// 步驟一：計(jì)算高斯矩陣上所有權(quán)重的和
float totalWeight = 0.0; 
for(float x = -halfSize; x<= halfSize; x++) {
  for (float y = -halfSize; y<= halfSize; y++) {
    totalWeight += getWeight(x, y);
  }
} 

// 步驟二：采樣周邊像素并應(yīng)用加權(quán)平均值，得出最終像素值
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++) {
    // 求出對(duì)應(yīng)坐標(biāo)的真正權(quán)重（對(duì)應(yīng)權(quán)重矩陣）
    float weight = getWeight(x, y) / totalWeight;
    finalColor += texture(texture, v_uv0 + vec2(onePxWidth * x, onePxHeight * y)) * weight;
  }
}

ps: 完整代碼在我的 Github 倉(cāng)庫(kù) 或 Gitee 倉(cāng)庫(kù) 中可以找到

現(xiàn)在，就可以出我們的模糊效果了

2d-sprite-gaussian-blur-v1

三、性能考慮

相信你或多或少聽(tīng)說(shuō)過(guò)高斯模糊很吃性能，那么具體又是在哪里吃性能了呢？

3.1 σ（標(biāo)準(zhǔn)方差）帶來(lái)的計(jì)算量

首先，我們先提出一個(gè)問(wèn)題：

Q：在高斯模糊中，影響圖像模糊程度的因素是？
A：σ（標(biāo)準(zhǔn)方差），具體為 σ的值越大，圖像越模糊

如果我們令 σ（標(biāo)準(zhǔn)方差）的值大一點(diǎn)，比如 1.5，那么高斯分布矩陣范圍就是 10 x 10 了，這意味著，我們每計(jì)算一個(gè)像素點(diǎn)所對(duì)應(yīng)的高斯模糊值，我們都要采樣周邊合計(jì)100個(gè)點(diǎn)進(jìn)行計(jì)算，參與計(jì)算模糊值得點(diǎn)已經(jīng)開(kāi)始偏多了。

實(shí)際上，上面的模糊示例截圖就是 σ = 1.5 的效果圖，但很明顯，這個(gè)程度的模糊還不夠「模糊」。那接下來(lái)，我們很可能會(huì)做的一件事就是將 σ 在變大，比如變?yōu)?0，那這個(gè)計(jì)算量就很大了，直接就會(huì)導(dǎo)致高斯模糊「很吃性能」。

3.2 模糊動(dòng)畫(huà)

另外一點(diǎn)，如果我們要做模糊動(dòng)畫(huà)，比如從不模糊變成模糊或者從模糊變成模糊等等。

那么這個(gè)時(shí)候，我們可以通過(guò)去修改標(biāo)準(zhǔn)方差去進(jìn)行實(shí)時(shí)計(jì)算模糊值，方差越大，越模糊，方差越小，越清晰。

但是，方差的每次變動(dòng)，都會(huì)導(dǎo)致我們需要重新計(jì)算矩陣的值，并且重新采樣周邊點(diǎn)，相當(dāng)于把我們3.1章節(jié)在執(zhí)行一遍，而這無(wú)疑會(huì)是一個(gè)「很吃性能」的地方。

3.3 優(yōu)化方案

現(xiàn)在，我們知道「很吃性能」的地方了，我們就可以針對(duì)性進(jìn)行優(yōu)化了。

篇幅問(wèn)題，我們將在后面章節(jié)進(jìn)行討論。

OK，本章完，完整代碼在我的 Github 倉(cāng)庫(kù) 或 Gitee 倉(cāng)庫(kù) 中可以找到。

下一篇：

• ??Cocos Creator Shader Effect 系列 - 9 - 短暫回顧
  

上一篇：

• ??Cocos Creator Shader Effect 系列 - 7 - 點(diǎn)光/掃光特效