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~~
源码在我的微信公众号回复关键词【特效】即可获得
微信公众号
CocosCreator特效系列之素描效果相关推荐
- CocosCreator特效系列之图片像素化
摘要 不管是游戏还是影视,像素风格总能吸引到一大部分人.KUOKUO 今天为大家带来 CocosCreator 的像素化 Effect. 正文 版本说明 使用 CocosCreator 的 2.2.0 ...
- 【照片动态特效系列】旋转吧,照片!
[照片动态特效系列]旋转吧,照片! 实现"旋转" 核心-二维仿射变换 基础旋转 分块旋转 多方向+彩图 核彩图处理心部分 主函数 其他 by 今天不飞了 突然就想做,然后就做了-- ...
- 云速建站:10分钟出特效系列(二)
本系列介绍一下简单易用的页面设计特效.备好素材,10分钟就是出效果! 系列二,新品发布,制造震撼出场的效果.PC预览效果 http://test.fallout5.cn/designtips2 (P ...
- H5炫酷特效系列4——炫酷粒子变化特效
这个示例虽然没有相对比较实用的特性,但是表现出来的效果确实非常震撼眼球.先上效果图,让各位同胞感受一下: 特效的表现感很强,有兴趣的读者可以仔细学习一下下面的代码,尝试着理解其中的逻辑. <!D ...
- H5炫酷特效系列3——瀑布流水特效
这个案例模拟瀑布流水的效果,有点类似喷泉,粒子模拟的水滴会一层一层的下落,很是漂亮. 效果看上去很是炫酷,代码并不是很多,几十行代码搞定,同志们直接复制运行就可以查看效果. <!DOCTYPE ...
- H5炫酷特效系列2——canvas特效-炫酷的心
之前已经有了一个满屏幕红心的案例,这次带来一个更加炫酷的心型炫酷动效,直接上图,有兴趣的就继续往下看,没兴趣直接过. 屏幕上眼花缭乱的心,不停的冲击着你的视线,让那些少女心砰砰直跳,绝对表白利器,同志 ...
- H5炫酷特效系列1——canvas满屏幕变换爱心示例
啥都不说,先上效果图,同志们觉得满意就继续看,不中意直接过. 效果为满屏幕的红心到处乱窜,红心自动变换大小和透明度,代码也不多,同志们直接复制就可以运行查看. <!DOCTYPE html> ...
- 微信小游戏-CocosCreator教学系列--Sprite教学
一:Sprite组件教学分为两部分:组件基础讲解.动态更换Sprite 中的背景图像. Sprite(精灵)组件: 单色组件:背景色为纯色的Sprite组件,主要用于纯色背景填充 非单色组件:主要用于 ...
- Unity粒子特效系列-下雨预制体做好了,拿走直接就用!
欢迎评论或私信,只要是小空知道的一定会逐一回复的!
最新文章
- 我的业务要不要用人工智能?引入AI前你需要评估的(二)
- 《降级论》《按时交作业的学生何以常穿脏袜子》读后感
- linux查看jvm内存被使用情况,Linux系统查看内存使用率
- 李宏毅《机器学习》作业班+带打比赛
- php+mysql+apache 环境搭建
- 从没见过干净图片,英伟达AI就学会了去噪大法 | ICML论文
- Vue之代码自动格式化
- Java 设计模式 之 访问者模式
- iOS开发--保存数据到本地
- 凸优化第八章几何问题 8.5 中心
- 带你了解Java Agent
- 百度网盘、迅雷下载.torrent种子文件
- win10更改登录密码
- 电脑在登陆界面如何打开计算机管理,无线路由器管理界面如何登录 无法进入管理界面怎么办...
- 华为的提倡大家学雷锋,绝不让雷锋吃亏
- 《网络安全法》、《数据安全法》、《个人信息保护法》三部法律的定位
- (Qt)windows下串口检测-热插拔监测、获取可用串口
- 第三章 SQL错误信息
- 谁与争锋,JDK动态代理大战CGLib动态代理
- Struts2漏洞修复方案
热门文章
- 资料:《新概念英语》旧版(第四册)原文及全文翻译
- RK3399驱动开发 | 15 - RTC实时时钟芯片HYM8563S调试(基于linux5.4.32内核)
- 宜人贷蜂巢ELK Stack之elasticsearch权限探索
- D-Link DCS系列监控 账号密码信息泄露漏洞
- 四溴-2,3-萘酞菁铅[PbNcBr4],酞菁铅PbN,齐岳生物提供多多种定制材料
- 企业IT、OT与CT的融合,加快数字化制造转型
- 如何将搜狗拼音输入法键盘布局更改成日文106键布局
- Node.js实现网络新闻爬虫及搜索功能(一)
- error TS7056
- 判断一个三角形是否成立及其形状