麒麟子Cocos Creator 3D研究笔记十一:实用Shader之单张纹理实现武器动态发光

零、别看广告,看疗效

除了角色手上的武器,身上的护盾和远处的光柱都是这个Shader搞的。

阿子最近沉迷于学英语和写代码,可HIGH了。

一看时间,竟然已经十天没发稿了。

但这不能怪阿子,要怪就怪Cocos Creator 3D可玩性太高了,我竟然有一丝丝沉迷。

突然好想轮播一遍影帝们的台词

渣渣辉:你知道我这五年是怎么过的吗?这五年…我每天都躲在家里玩Cocos Creator 3D,你是不知道,它对一个男人来说,有多重要。

轱舔乐:大嘎吼,我系轱舔乐,介里有磊没有玩过的船新版本,几需三番钟,磊造会干我一样,爱向节款引擎。

山鸡:是兄弟,就来砍我,我在Cocos Creator 3D等你!

好了,不闹了。

但话说回来,经过一个多月的把玩,我觉得Cocos Creator 3D可玩性非常高。

  • 1、在H5领域,Cocos Creator 3D是现今唯一一款从设计之初就从头到尾运用ECS(entity component system)架构的引擎。

  • 2、有很多效果待开发,新鲜感十足。

  • 3、搞不定的地方就翻源码。

  • 4、从学习方面来说,它就是一款开源的Unity3D。

  • 5、研究它,能够满足我“抄一个Unity3D引擎"的梦。

对于很多人来说,他可能精通UE4,也可能精通Cocos。但它没有机会精通Unity3D。

为什么?因为你看不到代码啊!引擎应用层框架之下,是你看不到的汪洋大海。

如果你不一窥究竟,那终将只是匆匆过客,来去无痕。


一、单张纹理实现动态特效的用途

3D游戏的效果实现与2D截然不同。 2D游戏只需要美术出好图,效果就会很棒。但在3D游戏中,如果程序员对引擎不了解,不能充分利用Shader来实现一些强大的效果,单纯依靠美术堆叠。 容易出现以下问题

  • 1、模型量大,渲染吃力

  • 2、贴图过多,包体过大

  • 3、模型大、贴图多、效果依然不好

这就是3D和2D的区别,如果发挥不好,可能做好的3D模型和贴图进了游戏场景,效果就要大打折扣了。

对于单线纹理能够实现的效果,远远不止如此。配合强大的Shader我们可以实现很多粒子效果和序列帧效果可以做到的事。它的优势很明显

1、比粒子效果更省GPU

2、比序列帧更省包体和内存

3、在没有美术给资源的情况,靠程序员调参数就可以实现。

对于1和2,其实很多团队并不在意。 但对于第3个优势,可能就说到很多中小团队或者独立开发者的心坎里了。可以说,这是性价比最高的方式。

可能有的人说,我就做2D游戏,我不做3D。研究这个干什么?

阿子可以告诉一个点:如果你在3D里面,锁定摄像机来做2D游戏,那么你将拥有光照、Shader等所有3D可以用上的能力,并且不影响你2D游戏的品质。


二、实现原理和制作方法

如果你掌握了基本的Shader编写,明白Shader中纹理采样,UV等内容,那理解这个原理就非常简单了。 我们用的原理就是UV动画。

需要的原材料

1、发光图片 阿子随便找的一张(GIF中黄色是通过材质调色改变的)

2、噪声图

核心代码实现步骤

1、使用UV采样噪声图

2、将噪声图的r,g通道值加上原来的UV,进行发光图采样。采样的时候需要乘以一个缩放因子,控制偏移的强弱。

我们知道,UV采样是对应像素值的。如果我们对UV进行了干扰,那我们采样出来的像素值就是有偏移的。自然就可以形成与原图不一样的不扭曲效果。

那怎么让它动起来呢?

我们只需要分别对噪声图采样和发光图的UV根据cc_time.x进行偏移(乘以一个因子即可控制偏移速度),就能得到动起来的效果。


三、源码获取与在线演示

说再多也是白搭,反正原理就这么简单,大家想白嫖的其实就是代码。阿子给大家放在了qfw中。如果还有不知道qfw是什么的,请看这里

源码获取:https://gitee.com/qilinzi/qfw

如果点击进去没有发现 武器发光(Weapon Glow) 案例,表示阿子还没有来得及发布。qfw中的例子,都是阿子从自己的项目中剥离出来的,这样可以确保例子的实用性,但也需要阿子花更多的时间,所以请耐心等待。等不及的可以私下联系阿子催更。

四、总结

本来想按惯例整两句适合的诗,但太晚了,今天就直接些:想继续白嫖更多实用的东西(教程、经验、代码、Shader、3D素材),就关注我,也多向朋友推荐一下。关注阿子的人越多,阿子出货速度会越快。


五、下节预告

我要预告一下下一篇内容,因为本篇内容和下一篇的内容,各类项目必考。下一篇是教大家模拟实现大气折射(也叫空间扭曲,热力扭曲等名称),看红箭头部分。还没有关注阿子的赶紧关注,阿子会继续分享大家用得上的经验和技巧。

20赞

厉害了:+1:

来学习一下

大佬就是厉害

:3:!!!

只要是麒麟子发的,我就义不容辞来点个赞!应该够15个字了吧:smile:【15字的梗还有人知道是啥意思吗QWQ】

不够15字算垃圾贴?

早餐路过,坐等更新,继续白嫖,真香

太牛了!简单几句代码实现酷炫效果。

这个噪声图是怎么出的?

我比较懒,网上下载的。
其实这个东西不挑的,随便找张图都可以。只是效果不同罢了。

插眼等传送

##喵啊mark

#砍下去,天降闪电

老铁的ID真是冠绝天下,举世无双。

牛皮!!!

优秀啊。哈哈 !!!

牛逼牛逼,留名后看

可以来群里,不会了直接问他:laughing:

借个地方问问,3D项目里面 如果2d的图片 要试用shader纹理 要怎么试用?