摘要
在遊戲或者影視中，模糊是很常用的特效，那麼模糊效果究竟是怎麼實現的呢？KUOKUO帶你分析原理然後用CocosCreator實現！結尾有源碼和演示視頻哦！
正文
版本說明
因爲 CocosCreator 在 2.2.x 版以後統一了格式，包括 Cocos3D 的 Effect 是與最新版相同的，所以在以後的文章中一律使用新版寫法，舊版寫法見上一篇文章。O(∩_∩)O~~
模糊原理
我們先了解下模糊特效。咱們不去定義它，通俗的去理解模糊，就是你看東西重影時的樣子，本體左側一個重影，右側一個重影。好，這樣我們在代碼裏就可以把一份圖片分成三份渲染來模擬。接下來，如何理解模糊程度？其實就是“重影”與本體的距離，如果重影與本體距離爲 0 ，也就是說重合了，那就沒模糊唄！模糊精度呢？“重影”的個數唄！哈哈，多麼生動形象的解釋！O(∩_∩)O~~
抽象到具體
原理解釋清楚了，但是怎麼化抽象概念成實際代碼呢？我們從簡單的先來，假設有兩個重影，算上本體是三個。很顯然，中間的本體應該更清晰些，如果正常實體透明度爲 1 的話，那麼模糊後，本體可以假設它佔了 0.4 ，剩下的 0.6 左右重影一人一半！看下代碼。（代碼不懂可以先略過，下方有視頻演示）
// 兩側重影，透明度0.3，偏移爲x：2% y：2%
o += texture(texture, v_uv0 + vec(0.02, 0.02)) * 0.3;
// 本體，透明度0.4，無偏移
o += texture(texture, v_uv0) * 0.4;
// 兩側重影，透明度0.3，偏移爲x：-2% y：-2%
o += texture(texture, v_uv0 - vec(0.02, 0.02)) * 0.3;
效果
靈活掌握
- 加以參數控制（看上一篇文章或下方視頻）
- 垂直或者水平方向模糊（下方視頻）
- 模糊程度控制（下方視頻）
- 模糊精度控制（下方視頻）
演示視頻(一定要看哦！)
結語
Effect 不難理解吧！有沒有更喜歡 KUOKUO 呢！
O(∩_∩)O~~
源碼在我的微信公衆號回覆關鍵詞【特效】即可獲得
