2023 最强 Cocos Shader 资源推荐,不接受反驳!
如果你实在想反驳,那请在本文下面留言,反正我就是不听。
至于为什么,你看完了就知道了!
前言
Shader 可以说是游戏开发中,最令人向往与激动的技术之一!
Shader 是什么?
Shader(可编程着色器)一种运行在 GPU 上的图形程序,可创建出逼真和吸引人的画面效果。
要说到游戏开发与应用开发,最大的区别莫过于,游戏包含炫酷的动画特效。
而画龙点睛的光影特效、场景气氛、材质渲染却是绝对离不开 Shader 编程的。
可是以说 Shader 是众多游戏开发者梦寐以求的『武林绝学』丝毫不为过。
但要想真正掌握 Shader 编程,需要对数学、图形学、图形API、GPU等知识为基础。而且还需要对现实事物的观察与想像。
这绝不是一朝一夕的,也不是一两个月的事情,而是需要长期的学习、积累与实践。是不是有种劝退的感觉?
因为后面的内容,会非常非常非常的恐怖,希望你能有所心理准备!
1. Cocos Shader 基础入门
这是由 Cocos 官方布道师 放空 老师录制的 Cocos Shader 入门教程,包含视频与图文,共计10篇。
说实话,基础是最难的,也是最难讲的,包含大量的名词、概念、术语,以及晦涩的原理。
但如果你向往盖世武学,那就请你绝对不要放过自己,含着泪都要把它啃下去。
放空老师的这套教程,以 WebGL 先导,再过渡到 Cocos Creator Shader 如何在引擎中。
使用 Cocos Shader 去绘制一个矩形,解读引擎内置 Effect(在Cocos Creator 引擎里面写 Shader 的地方)的语法规则。
进一步去修改扩展引擎内置 Effect,实现自定义的 Shader。
如果在过程中遇到似懂非懂的知识点,不要太过纠结,继续干下去!要记得我们的目标是牛逼的游戏特效,想像一下,你的游戏画面,无与伦比的样子!
TM的老子现在搞不懂的地方,先给你记住了!不要跑,等牛逼了再回来收拾你!
2. WebGL 入门指南读书笔记
开发者苦 Shader 久矣!回想起当年,晓衡在 Cocos Creator 2.x 年代也修炼过 Shader,含着泪吭哧《WebGL 编程指南》并在公众号上留言了 18 篇 GLSL 语言基础读书笔记。
每篇内容只仅含一个 GLSL 语法知识点,200字上下短小精干,适合 Shader 编程语言的入门。
3. 玉兔计算图形学与Cocos Shader
一说到 Cocos Shader 很多人内心中肯定会尖叫到——玉兔!集颜值与技术同时在线的图形学UP主!
-
原神中的宝箱消失/人物死亡效果是怎么实现的|消融效果Shader
https://www.bilibili.com/video/BV1ue4y147SX -
高性能的玻璃杯渲染Shader | 折射+反射+厚度+材质纹路
https://www.bilibili.com/video/BV15a411D7wZ -
3D游戏屏幕后期处理|基于边缘检测算法的描边效果Shader
https://www.bilibili.com/video/BV1rU4y1y7sv -
高级卡通风格水面渲染Shader | 深度图+法线图的原理与应用 | 水深效果+焦散+岸边浮沫+漂浮物浮沫
https://www.bilibili.com/video/BV1kY4y1h7Tk -
超简单的卡通风格水体渲染Shader | 新手入门友好
https://www.bilibili.com/video/BV1zR4y1571S -
游戏中的人物边缘发光效果是如何实现的?码农小姐姐手把手教你写Shader
https://www.bilibili.com/video/BV1Jq4y127zr -
简单的2D实时水面渲染Shader|反射+水波纹+焦散
https://www.bilibili.com/video/BV1Ve4y1o7wm -
能量罩特效Shader|深度图应用
https://www.bilibili.com/video/BV1Av4y1i7yD -
游戏中的雾效是如何实现的|全局雾效Shader|深度图应用
https://www.bilibili.com/video/BV11k4y1h7D4 -
Shader实现游戏中的滤镜|LUT Shader
https://www.bilibili.com/video/BV1ar4y1d7kG
一说到 Cocos Shader 很多人内心中肯定会尖叫到——玉兔,集颜值与技术同时在线的图形学UP主!
玉兔从游戏实际特效案例出发,拆解特效实现逻辑与图形学原理,推导数学公式,并手把手在 Cocos Creator 演示画面实现效果,而且每一集视频教程都有对应的源码工程。
你可在 Cocos Store 资源商城中搜索『yutu』可获取全部源码工程。
除了游戏 Shader 案例教学视频外,玉兔还分享了自己的 Shader 学习心得,并从图形学基础开始,讲解什么是渲染管线、深度图、颜色空间、伽马矫正、反射探针、屏幕后效…
是不是一大堆你可能听过,但又不知道到底是个什么的东东,学习 Shader 不只是 GPU 编程,还需要图形学知识做为基础,因此玉兔的视频就是非常好的内容!
4. 孙二喵《Shader从入门到入土》系列
卷王孙二喵的 Shader 教程大多来源于自己的项目,主打一个: 拿来就用!
有点遗憾的是,二喵的《Shader从入门到入土》系列我没找到第一篇,但是发现这个
不论你是否能懂,只要会基本的 Cocos Creator 材质配置,能先用上!先感受!先动手!再说。
有人会问,为什么要说二喵是卷王呢?看下面这个游戏
人家一个公司,搞了6个月都没能做完的 ARPG ,二喵 3 周就给人家搞完了,而且还包含低端机优化!
与此同时,基本上每个月都会来 Cocos 论坛、Cocos Store 分享他的技术成果,比如24小时开发一个3D版的《羊了个羊》、4天开发一个吃鸡,同时还有附带有教程。
除了在 Shader 方面的分享,孙二喵还是 Cocos 圈 AIGC 第一人,他的二次元卡牌游戏估计也快出来了。
这还只是冰山一角,二喵的故事,就先说这么多,先把源码跑起来!
最后再提一嘴!
就是,如何使用 Cocos Creator 引擎 API 控制 Shader 的参数,也很重要,二喵的源码中都有!
5. 麒麟子硬核图形学渲染系列教程
麒麟子时常戏称为 Cocos Shader 九号技师!
Shader 这门手艺啊,在他的技能列表中,仅仅排名第九位。除了Shader,还有框架、联机、RPG、MMO、加载、内存、性能优化、调试…
每逢引擎大版本更新,绝对少不了麒麟子的核心特新分享
还有 Cocos Cyberpunk 项目源码解读,关于Shader渲染管线、后期效果等文章的分享。
以上文章,部分还配套有源码工程或工具,下载地址如下:
以上就是我所采集到的,麒麟子关于 Cocos Shader 相关的文章,大家慢慢享用吧,急不得的哦!
6. 超级浣熊可视化Shader编辑器与配套教程
Shader Editor 是 Cocos Store 畅销插件,开发者超级浣熊 SuperRaccoon 基于这款可视化 Shader 编辑器,编写了一套 Shader 入门教程。
除此之外浣熊还开发有多款2D渲染类工具,比如:2D光影、屏幕后效、Preview3D(在3D中使用2D精灵Shader)
2D视野-光照-阴影
资源地址 | Cocos Store | 2d 视野-光照-阴影
2D屏幕后期特效
资源地址 | Cocos Store | 2D屏幕后期特效
SSRScreenSplitFX
资源地址 | Cocos Store | SSRScreenSplitFX
以上就是浣熊大佬贡献的 Shader 相关资源,是不是很有特色,也很开脑洞呢!
7. 更多开发者的 Shader 文章教程
8. 更多开发者的 Shader 资源分享
结语
Cocos 开发者社区宝藏如山似海,晓衡这篇文章历时七七四十九天,终于练成!
扒遍了 Cocos 论坛、Cocos公众号、Cocos Store以及开发者们账号,不小心成为了 Cocos 圈的资源百晓生,能为社区做出一份贡献!
Shader 技术是游戏开发者,升职加薪,行走江湖的高端必杀技,欢迎收藏分享给需要的朋友 。