摘要
在遊戲或者影視中，模糊是很常用的特效，那麼模糊效果究竟是怎麼實作的呢？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~~
源碼在我的微信公衆号回複關鍵詞【特效】即可獲得
微信公衆号
