利用自定义 Shader 实现酷炫效果

导语

近日我们的 Cocos 水友（ID：小叔叔）在论坛上分享了他写的 shader 开源项目及相关文档，包括六个效果器以及十多个 shader ，各位可以直接进入传送门下载学习：

https://github.com/fylz1125/ShaderDemos

https://gitee.com/darkmoon/ShaderDemos

今天呢C姐也是找到了帖子作者——小叔叔，就大家关心的 shader 进行了一个小采访。

受访者｜小叔叔——九尾狐游戏工作室

您一般会去哪些网站上学习 shader 呢？

小叔叔：我去的最多的就是：shadertoy.com，也欢迎大家加入我们的交流群一起学习和探讨，群号：704391772。

我看到您在论坛中说1.9可能有问题，那目前是只支持Cocos Creator1.8吗？Cocos Creator1.9 以及即将更新的Cocos Creator2.0 发布之后，会把这些 shader 升级吗？

小叔叔：目前我使用 v1.8.2 ，模拟器和浏览器都没有问题。 v1.9.0 好像有朋友反映有一个 shader 有问题，v 1.9.1 没有测试过。有空会调试一些，我觉得也就是改两个接口的问题，应该问题不大。这周应该要调试一下 v1.9 的，因为我的小游戏只能用 v1.9 才能上， v1.8 不支持子域的问题， v1.9 才有这个东西， v2.0 的话，有时间当然也会进行升级。

您的小游戏上架了吗？叫什么名字呀我们大家一起去支持一下。

小叔叔：数独类型的小游戏，但是其中用户排名，好友关系链，需要用到1.9引擎的子域支持，目前还在开发，等上线之后会告诉广大水友们。

您的 shader 是如何实现的？有没有开发教程可以传授给新手朋友？

小叔叔：开发教程有点费时间，目前还没有时间写。大概做法很简单，我写了一个 shader 的加载器，是 TS 写的，用 creator 提供的接口，功能就是把我写的 shader 加载到引擎，然后引擎编译这个自定义 shader ，然后用到一个节点上，那么这个节点就有了新的效果。目前的 shader 包含两部分，顶点 shader 直接用的引擎默认shader，自定义shader主要就是 fragment shader 。目前自定义 shader 主要就是编写片元 shader ，这种 shader 是处理光影特效，不会处理顶点变换。所以常见的效果就是一些光源特效，比如模糊，外发光，内发光，迷雾，灯光，光影特效。原理也很简单，片元 shader 可以看成是纹理上每一个像素点的处理程序，根据一定的规则，处理每个像素的 r，g，b，a，就是红绿蓝透明度值，如果再加入时间参数，就会有光效随时间变化的效果。

如何使用 shader 效果器？

小叔叔：效果器 shader 包含两个文件， Effect 结尾的是效果器， Frag 结尾的是 shader 文件，例如高斯模糊效果包含 GaussBlurEffect.ts 和 GaussBlursFrag.ts ，将对应的 TS 脚本拖到要施加效果的节点上即可以，方便快捷，自动施法，开箱即用，不需要任何编码。如何使用效果器，我在 shader 项目文档里有做具体的说明。

六个效果器具体使用方法

（以下内容源于项目文档）

一、流动闪光特效：

使图片产生流光效果和闪光特效，两种模式。

「使用说明」

将 FluxayEffect.ts 和 FluxayFrag.ts 放到自己的项目

将 FluxayEffect.ts 拖到想要施加效果的节点上；

两种模式，属性 mode 默认 0 为流光特效，其他值为闪光特效；

这个 shader 不支持子节点。

二、高斯模糊：

用高斯模糊算法使图片产生模糊效果。

「使用说明」

将 GaussBlurEffect.ts 和 GaussBlursFrag.ts 放到自己的项目；

将GaussBlurEffect.ts 拖到想要施加效果的节点上；

拖到想要施加效果的节点上，去掉 slider 控件和相关代码；

高斯模糊特效可以控制模糊程度；

模糊系数 bluramount 取值为[0, 0.1]；

如果想要对节点及其子节点施加效果，勾选 isAllChildrenUse 即可。

三、灰度图：

处理一个图片，使其变为灰色。

「使用说明」

将 GrayEffect.ts 和 GrayFrag.ts 放到自己的项目；

将 GrayEffect.ts 拖到想要施加效果的节点上；

默认对当前节点施加效果，如果想要节点及其子节点都施加效果，请勾选 isAllChildrenUse ；

采用这个 shader 变灰的图可以恢复原样，调用回调函数 resetShader() 。

四、图片透明渐变：

透明图片渐变切换。

「使用说明」

将 TransferEffect.ts 和 TransferFrag.ts 放到自己的项目；

将 TransferEffect.ts 直接拖到一张精灵上，不需要加任何代码；

如果一个节点包含子节点，也可以全部施加效果，勾选 isAllChildrenUse 即可

但是效果不是很理想，会出现所有图片同时开始过渡；

感谢 cocos 论坛的 shader 原作者 yue19870813 提供的 shader 源码。

五、动态水波：

使一张图片产生动态水波效果。

「使用说明」

将 WaterWaveEffect.ts 和 WaterWaveFrag.ts 放到自己的项目；

将 WaterWaveEffect.ts 拖到想要施加效果的节点上；

这个 shader 不支持子节点，只能对单个节点起效果。

六、战争迷雾探照灯：

使一张图片产生战争迷雾效果，跟随触摸点照亮圆形区域。

「使用说明」

将 SearchLightEffect.ts 和 SearchLightFrag.ts 放到自己的项目；

将 SearchLightEffect.ts 拖到想要施加效果的节点上；

这个 shader 不支持子节点。

酷炫shader场景实例

小叔叔：Scene/AmazingEffects/ 目录下能看到十几个酷炫的 shader 场景，用于参考学习，这部分内容我还会陆续更新，欢迎关注！

非常感谢小叔叔跟大家分享了这么多，那么最后还有什么想要跟大家说的呢？

小叔叔：cocos 是一个很好的引擎，做 H5 的利器， 2018 年的风口是微信小游戏，不容错过。

感谢分享，各位对 shader 有兴趣的朋友可以加入水友的交流群一起学习，也欢迎大家到 cocos 官方论坛 forum.cocos.com 参与讨论，或者在公众号里留言，也不要忘记点击【阅读原文】去论坛原贴给我们水友点赞！