CocosCreator特效系列之素描效果

摘要

素描是一种唯美的艺术创作，可以用单色线条来表现事物。那么 KUOKUO 今天为大家带来的就是 CocosCreator 的素描化 Effect。

正文

版本说明

使用 CocosCreator 的 2.2.0 版本演示。

边缘检测原理

边缘检测是图像处理和计算机视觉中的基本问题，边缘检测的目的是标识图像中亮度变化明显的点。好，那我们就研究下如何寻找图像中亮度变化明显的点。我们目前能获得的是像素的 RGBA 这些参数，那么我们可以通过计算这个亮度变化的导数来确定边缘。为简化起见，我们可以先在一维上分析。

1, 2, 2, 1, 55, 57, 60, 55, 1, 0, 2

如上，我们可以直观的看出 1 到 55 肯定是个边缘。原理相信你已经理解了，但是如何让代码“知道”这个变化呢？

其实不用知道边缘，我们只要知道变化强的地方在“增强”后会更突出即可，我们往下看！

3X3拉普拉斯模版

如图，我们观察 3X3 的拉普拉斯模板。

我们可以看出它的特点，中心与周围的差很大！从模板形式容易看出，如果在图像中一个较亮的区域中出现了一个暗点，那么用拉普拉斯运算就会使这个点变得更暗。（反着理解也可，因为我们找的是变化地点。）

代码

// 四周 3X3 九个格子的偏移量，最后乘以拉普拉斯模板的数据。
float offset = 0.005;
o -= texture(texture, v_uv0 + vec2(-offset, offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(0.0, offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(offset, offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(offset, 0.0)) * 1.0;
o -= texture(texture, v_uv0 + vec2(0.0, 0.0)) * -8.0;
o -= texture(texture, v_uv0 + vec2(offset, -offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(0.0, -offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(-offset, -offset)) * 1.0;
o -= texture(texture, v_uv0 + vec2(-offset, 0.0)) * 1.0;

排除白色

将像素突出后，我们能发现变化不明显的地方全部为白色，那么我们排除一下白色即可。（排除的算法写法不一，大家灵活写。）

if (o.r > 0.9 && o.g > 0.9 && o.b > 0.9) {
    // 处理白色
} else {
    // 处理外围
    o = vec4(0, 0, 0, 1);
}

最后效果

结语

Effect 能实现游戏中很多的炫酷效果，让我们一起学习！

O(∩_∩)O~~

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

微信公众号