利用自定义 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 参与讨论,或者在公众号里留言,也不要忘记点击【阅读原文】去论坛原贴给我们水友点赞!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180712A1B1CV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券