一、前言
今天2020年1月1号啦,新年啦!先给大家拜个假年(真年在1月25号)
最近在学习 Shader 相关内容,觉得 Shader 很好玩,但是任重道远,开个分享帖,以监督互勉~
目前已经实现了一些效果,但是大多皆为我在学习过程中 纯凭原理手撸的Demo ,可能有瑕疵
项目地址:
- Github 仓库:https://github.com/zhitaocai/CocosCreatorShaderEffectDemo
- Gitee 仓库:https://gitee.com/zhitaocai/CocosCreatorShaderEffectDemo
声明:
- 此项目为我在学习过程中的一些分享和实现,因此项目名字以
Demo
为后缀。- 项目重点在于 「渔」,不在于 「鱼」 。
- 如果你有意将此Demo中的效果加入到你的项目中,请认真评估是否适合你的项目使用!
好了,先啰嗦到这里,我们看看现在已经实现的效果,后面再继续啰嗦
二、效果先行,文章随后
内发光(实现原理)
马赛克/像素化(实现原理)
老照片(实现原理)
灰度渐变(实现原理同老照片一样)
点光(实现原理)(2020.01.12更新)
扫光(实现原理同点光一样)(2020.01.13更新)
圆角裁剪-v1(2020.01.17更新)
- 声明:此特效为搬运过来的特效,非原创。
- 修改的地方:搬运后,在原来的主要代码上加入了自己的理解注释
- 实现原理:参考文章 《圆角计算 Shader》
- 参考代码:Cocos 论坛帖子《分享更高效的 creator 裁圆角头像 shader》 和对应的 实现代码
此版本存在局限性:只有在正方形纹理上,才能裁剪出圆角,在非正方形上,无法裁剪出圆角,具体变现为有拉伸效果
如:下面GIF中第3到5秒演示所示,黄色和红色的非正方形纹理的圆角明显被拉伸
圆角裁剪-v2(2020.01.17更新)
在 圆角裁剪-v1 的原理基础上,新增支持任意宽高纹理的圆角裁剪
如:下面Gif中第3到5秒演示所示,黄色和红色的非正方形纹理也能裁剪出圆角效果
高斯模糊-v1(2020.02.07更新)
三、系列教程(持续进行中…)
正如上个章节标题—— 效果先行,文章随后 。
这个系列,我会尽可能先将一些效果做得自己觉得可以了,然后上传到仓库,然后在编写文章,因此文章会稍晚一点。不过,因为此项目为 「渔」 项目, 所以即便只有仓库上的 Effect 文件,其实你也能看到整个实现过程,因为
- 我会在 Effect 代码行首复上简单实现原理(我就是根据这个原理去实现整份代码,你也一起试试吧)
- 我会详细在一些关键地方附上注释,所以,代码文件行数可能会很多
而文章,我会补充思路和理解,以及一些实践过程中遇到的问题及解决方案,偏向于解读。
那么, 来了!~
真·系列教程
- (2020.01.01 更新) Cocos Creator Shader Effect 系列 - 0 - 前言
- (2020.01.01 更新) Cocos Creator Shader Effect 系列 - 1 - 材质,Effect,Inspector,纹理之间的关系
- (2020.01.02 更新) Cocos Creator Shader Effect 系列 - 2 - Effect 文件解读
- (2020.01.04 更新) Cocos Creator Shader Effect 系列 - 3 - Effect 文件调试
- (2020.01.05 更新) Cocos Creator Shader Effect 系列 - 4 - 老照片特效
- (2020.01.06 更新) Cocos Creator Shader Effect 系列 - 5 - 马赛克/像素化特效
- (2020.01.07 更新) Cocos Creator Shader Effect 系列 - 6 - 内发光特效
- (2020.01.13 更新) Cocos Creator Shader Effect 系列 - 7 - 点光/扫光特效
- (2020.02.07 更新) Cocos Creator Shader Effect 系列 - 8 - 高斯模糊
- to be continue…
系列对应演示 Demo 仓库地址
- Github 仓库:https://github.com/zhitaocai/CocosCreatorShaderEffectDemo
- Gitee 仓库:https://gitee.com/zhitaocai/CocosCreatorShaderEffectDemo
四、支持一下我吧 / 催更快捷入口
此项目为我业余时间捣蛋的项目,如果我的项目能帮助到你,那么不妨支持一下我吧~