【分享】【新年的礼物】Cocos Creator Shader Effect 系列(2020.02.17 支持Cocos Creator 2.3.0 正式版的材质系统)

一、前言

今天2020年1月1号啦,新年啦!先给大家拜个假年(真年在1月25号):smiley:

最近在学习 Shader 相关内容,觉得 Shader 很好玩,但是任重道远,开个分享帖,以监督互勉~

目前已经实现了一些效果,但是大多皆为我在学习过程中 纯凭原理手撸的Demo ,可能有瑕疵

项目地址:

声明:

  1. 此项目为我在学习过程中的一些分享和实现,因此项目名字以 Demo 为后缀。
  2. 项目重点在于 「渔」,不在于 「鱼」
  3. 如果你有意将此Demo中的效果加入到你的项目中,请认真评估是否适合你的项目使用!

好了,先啰嗦到这里,我们看看现在已经实现的效果,后面再继续啰嗦

二、效果先行,文章随后

内发光(实现原理

马赛克/像素化(实现原理

老照片(实现原理

灰度渐变(实现原理同老照片一样

点光(实现原理)(2020.01.12更新)

扫光(实现原理同点光一样)(2020.01.13更新)

圆角裁剪-v1(2020.01.17更新)

此版本存在局限性:只有在正方形纹理上,才能裁剪出圆角,在非正方形上,无法裁剪出圆角,具体变现为有拉伸效果

如:下面GIF中第3到5秒演示所示,黄色和红色的非正方形纹理的圆角明显被拉伸

圆角裁剪-v2(2020.01.17更新)

圆角裁剪-v1 的原理基础上,新增支持任意宽高纹理的圆角裁剪

如:下面Gif中第3到5秒演示所示,黄色和红色的非正方形纹理也能裁剪出圆角效果

高斯模糊-v1(2020.02.07更新)

三、系列教程(持续进行中…)

正如上个章节标题—— 效果先行,文章随后

这个系列,我会尽可能先将一些效果做得自己觉得可以了,然后上传到仓库,然后在编写文章,因此文章会稍晚一点。不过,因为此项目为 「渔」 项目, 所以即便只有仓库上的 Effect 文件,其实你也能看到整个实现过程,因为

  1. 我会在 Effect 代码行首复上简单实现原理(我就是根据这个原理去实现整份代码,你也一起试试吧)
  2. 我会详细在一些关键地方附上注释,所以,代码文件行数可能会很多

而文章,我会补充思路和理解,以及一些实践过程中遇到的问题及解决方案,偏向于解读。

那么, 来了!~

真·系列教程

系列对应演示 Demo 仓库地址

四、支持一下我吧 / 催更快捷入口

此项目为我业余时间捣蛋的项目,如果我的项目能帮助到你,那么不妨支持一下我吧~

164赞

大佬辛辛苦苦撸了数日,终于神功大成
为了方便大家取经,大佬已在本QQ群恭候多时:704391772

牛逼。

大佬是不是学万OpenGL 再写的shader

我只能说666

mask

MARK

mark

没学完,边学边写

这就是大佬

mark

mark, scrollview系列还没完结:joy::joy:

1赞

mark

mark

Mark!

Mark!

2020.01.02 更新

Cocos Creator Shader Effect 系列 - 2 - Effect 文件解读》已编写完毕,欢迎大家阅读交流~

1赞

mark

mark,学习了

mark