大写的FLAG:Cocos Creator 3D Shader零基础教程开坑

思考题:图中哪些部分是用Shader实现的

###零、习惯性讲两句

不知不觉,《Cocos Creator 3D研究笔记》系列已经写了十二篇了,收获了不少赞。也收获了不少信息,阿子其实一直在研究社区缺的是什么。
阿子做生意的原则是,先要满足大家的需求,才能从中找到商机。

在这十二篇中,有引擎基础API的使用,也有一些文档不够清晰的操作补充。而呼声最高的,莫过于《边缘光》和《武器发光》这两篇文章。

下午在Cocos Creator 3D研究院和[Creator 星球]开发者联盟群里,做了一个简单的调查,最终得出的结论是:大家对Shader编写教程的渴望远远大于其它类别。没想到,C友们也喜欢这种花里胡哨的东西。

阿子之前就推荐过,大家学完《WebGL编程指南》和《3D游戏中的数学基础》这两本秘笈就可以为所欲为了。可转念一想,学完这两本书,依然还是不知道Cocos Creator 3D Effect如何编写。

本着送佛送到西,喂饭喂进嘴的精神,阿子决定开两个教程《Cocos Creator 3D Shader零基础入门》和 《Cocos Creator 3D Shader实用案例》。
放心,不收钱,免费的

有没有发现Cocos Creator 3D Shader挺长的,阿子个人建议,以后咱就简称为Cocos Shader吧,当提到Cocos Shader的时候,默认就是指Cocos Creator 3D Shader,而当要说Cocos 2d-x,Cocos Creator 2D版本Shader的时候,才用全称。这样一来,在交流层面,就提前进入Cocos Creator V3的状态了。

与以往阿子出的文章不同,由于这是教程,因此阿子会尽可能多科谱原理和基础知识,让大家知其然且知其所以然。

在此提醒广大C友,计算机三大优雅(编译原理、操作系统、计算机图形)中任何一个都特别容易上瘾,一但上手,可能一辈子都甩不掉。

你看阿子从07年接触D3D到现在,一看到3D渲染和Shader相关内容就两眼放光。

比如,那个UE5的宣传视频,阿子看了不下20遍,还有相关的技术剖析文章若干,根本停不下来。

SO。。。。入坑前,请三思,可能从此你就要沉迷于学习了。

###一、《Cocos Creator 3D Shader零基础入门》

《Cocos Creator 3D Shader零基础入门》其实应该叫《Cocos Creator 3D 材质系统零基础入门》,但Shader这个词大家比较熟悉,所以才有了这个名字。零基础入门课程大纲我简单罗列了一下。由于是大纲,暂时不能保证会按照这个进行完整编排。但阿子可以保证覆盖的知识点,只多不少。

1、Cocos Creator 3D 材质和Effect使用介绍

材质的使用和Effect的使用,面板参数、内置Shader功能介绍

2、最简单的Shader

Effect内部各部分在渲染流程中起的作用

3、添加Uniform变量

如何添加Unifrom变量,如何显示在Inspector面板,如果用代码操作添加的变量

4、纹理采样

如何进行纹理采样,UV相关参数的含义

5、混合因子

透明混合因子的意义和效果

6、多层纹理混合采样

多层纹理混合Shader的编写,以及可以做出的效果

7、纹理动画

如何进行纹理切换

8、UV流动动画

如何进行纹理流动,以及可以做出的效果

9、反射

如何采样天空盒材质,实现反射效果

10、渲染到纹理

如何将场景渲染到纹理,并显示到屏幕上

二、《Cocos Creator 3D Shader实用案例》

实用案例主要有两个部分,一个是常见的游戏效果实现,另一个是后期处理。在有了前面的Cocos Shader基础的情况下,想要实现这些效果是很容易的。

着色效果类:

1、深度雾化效果:根据摄像机深度实现无处雾化

2、高度雾化效果:根据设置的高度实现雾化,一般用于高空跑酷类游戏,隐藏下方细节

3、边缘光:利用Fresnel原理实现边缘光效果

4、使用噪声图进行UV扰动:使用噪声图进行UV扰动,并实现一些常见的游戏效果

5、描边效果

6、角色透明渲染:实现魔兽世界中的灵魂和隐藏的类似效果

7、镜子:基于某一平面的镜面反射效果

8、盔甲实时反射

更多…

后期效果类:

1、大气扭曲

模拟折射效果,实现热力扭曲,刀气扭曲等

2、BLOOM

3、LUT

4、GOD RAY

更多…

实用案例真要写,可以上百个,在此就不一一罗列,足够阿子更新一两年的公众号了。

三、何时动工

由于这两套教程是社区C友们的预定,所以对想要这套的C友们有一个简单的要求。想办法让公众号同名文章阅读量2000+,阿子才会发教程。否则表示这是少数人的需求,做这个,不值得。
地址传送门:点这里

四、在哪发布

《Cocos Creator 3D Shader零基础入门》和 《Cocos Creator 3D Shader实用案例》暂定在本公众号和CSDN连载,大家可以开始关注了。

关注我
方便你催更

加油,小伙伴,希望有一天,你们可以像他一样:为所欲为

9赞

本来已经想了长篇大论,没想到麒麟子自己发了,人工帮顶。

好兄弟们,你们有没有人和我一样,有炫酷的想法却无法实现,有老板的冷眼说你不行,有信心的学习却发现难以入门。不要担心好兄弟们,麒麟子的长篇大FLAG出来了,基于Cocos3D引擎的Shader教程,他来了! ! !

不要担心听不懂,麒麟子会从最基本的讲起,不要9998,也不要998,只要公众号阅读量超过2000,他就出!教!!程!!!

机会不容错过,不论是你现在工作压力过于庞大无时间学习,还是你是在校学生想要学习一门手艺,只要你有梦想,只要麒麟子的教程出来了,什么时候学都可以!!!。没错,有句老话怎么讲的,学好数理化,左边天下都不怕,学号Shader,干翻引擎不是梦,你还在等什么,快来一起学习吧!!

麒麟子微信公众号:
https://forum.cocos.org/uploads/default/original/3X/e/b/ebec517d2e7ba5bed2388a50002728c8603c7efe.png

麒麟子Flag文章连接:
Shader预告Flag

麒麟子的Cocos3D研究院
https://forum.cocos.org/uploads/default/original/3X/d/f/dfacc424f4bbf2c4337e3f6b6079fd66a83b8a79.png

小白前排占坑

我想请你当职业软文写手。
竟然和我想要的台词一模一模。完美!!!!
也许,这就是缘份吧。

支持 支持

可以写成书了

书太累了
文章可以写得随意
书的话,太累
要逐字逐句校对,包括排版配图等。

快2000了,大家给把力哦,谢谢支持。。。。

谢谢啊啊啊啊

大写的赞
最近在做模型的描边效果,可惜描边会出现断裂,一直找不到解决办法,唉。。。。

描边有好多种实现方式的。你试一下缩放的方式 或者法向量的方式

都试了不行,查了很多资料说是模型法线不平滑的原因,如果直接在3dmax里面做法线平滑,模型的面数就会激增

催更,大佬快出新教程,快看完了

大家可以通过以下链接找到Shader相关内容和教程,虽然目录和当初的规划有区别。但内容几乎是覆盖到了的。

知乎 - 麒麟子
Cocos Store - kylins

谢谢大家的支持,还有什么需求,可以继续留言。