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~~

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

微信公众号

发布了120 篇原创文章 · 获赞 133 · 访问量 14万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览