CocosCreator特效系列之模糊特效

摘要

在游戏或者影视中，模糊是很常用的特效，那么模糊效果究竟是怎么实现的呢？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~~

源码在我的微信公众号回复关键词【特效】即可获得

微信公众号