大家好，我是晓衡！嘿嘿，今天来个大的，提前祝大家国庆节有得玩了。
2023 年最强 Cocos Shader 资源推荐，不接受反驳。含130+文章教程和案例Demo，强烈建议收藏后再看。
如果你实在想反驳，那请在本文评论留言，反正我就是不听。
至于为什么，你看完了就知道了！
01
说在前面
Shader 可以说是游戏开发中，最令人激动与向往的硬核技能之一！
Shader 是什么?
Shader（可编程着色器）一种运行在 GPU 上的图形程序，可创建出逼真和吸引人的画面效果。
要说到游戏开发与应用开发，最大的区别莫过于，游戏包含炫酷的动画特效。
而画龙点睛的光影特效、场景气氛、材质渲染却是绝对离不开 Shader 编程的。
可以说 Shader 是众多游戏开发者，梦寐以求的『武林绝学』丝毫不为过。
但要想真正掌握 Shader 编程，需要以数学、图形学、图形API、GPU等知识为基础。
而且，还要对现实世界的细致入微的观察，与充满丰富想象力。
请相信，这绝不是一朝一夕，也不是一两个月的事情，而是需要长期的学习、积累与实践才有可能修炼到手的技能。
是不是有种劝退的感觉？
我先打个防针，因为后面的内容，将会非常地恐怖，希望你能有所心理准备！
02
Cocos Shader基础入门
这是由 Cocos 官方布道师放空老师录制的 Cocos Shader 入门教程，包含视频与图文，共计10篇。
Cocos Shader 基础入门（一）WebGL 着色器与 GLSL 着色器语言基
https://mp.weixin.qq.com/s/3T4LJL-vEUZXVWmYVg8SVg
Cocos Shader 基础入门（二）：顶点着色器与片元着色器
https://mp.weixin.qq.com/s/OeYRVDcbGpRPkusgCRVAIQ
Cocos Shader 基础入门（三）：高效绘制多个三角形并给顶点换个颜色
https://mp.weixin.qq.com/s/WTdAow_OjBWwiZpMuENxnw
Cocos Shader 基础入门（四）：纹理映射
https://mp.weixin.qq.com/s/-bUGUfkj-3lLKNrbOpF2Yw
工序升级！在 Cocos Creator 里画一个完美的矩形
https://mp.weixin.qq.com/s/K2jlmFgt1HLYN-B3jtroHA
持续进阶！暴改一个带纹理贴图的 Shader
https://mp.weixin.qq.com/s/NUVtkmL_J5BeXEmeeRKiCQ
来点花样！使用噪声图实现不规则溶解效果
https://mp.weixin.qq.com/s/_R5LeRx5nUxr70NMpge0LA
事半功倍！巧用 WebGL 抓帧工具提高渲染效率
https://mp.weixin.qq.com/s/f2hJ4R_I6r-0EitxD66oeg
进阶！Cocos Creator 中使用模板测试实现遮罩效果
https://mp.weixin.qq.com/s/NGWdIZrasvXqtBI75rw9xg
最后一弹：用混合测试实现玻璃窗效果
https://mp.weixin.qq.com/s/KhwCgsofokN6oo1NyBb-dw
说实话，基础是最难的，也是最难讲的，包含大量的名词、概念、术语，以及晦涩的原理。
但如果你向往盖世武学，那就请你绝对不要放过自己，含着泪都要把它啃下去。
放空老师的这套教程，以 WebGL 先导，再过渡到 Cocos Creator Shader 如何在引擎中，使用 Cocos Shader 去绘制一个矩形，解读引擎内置 Effect（在Cocos Creator 引擎里面写 Shader 的地方）的语法规则。进一步去修改扩展引擎内置 Effect，实现自定义的 Shader。
如果在过程中遇到似懂非懂的知识点，不要太过纠结，继续干下去！要记得我们的目标是牛逼的游戏特效，想象一下，你的游戏画面，无与伦比的样子！
“TM老子现在搞不懂的地方，先给你记住了！不要跑，等俺牛逼了再回来收拾你”。
每次有遇到，当前难以跨越的障碍在面前，我都使用这个方法，绝对不要怂！
03
WebGL编程指南读书笔记
话说开发者苦 Shader 久矣！回想起当年，晓衡学习 Cocos Creator 2.x 时也曾修炼过 Shader 。
GLSL ES 语言基础
https://mp.weixin.qq.com/s/nD_AL4OO9AAQTYmK1yIapQ
GLSL ES 语言—变量数值类型
https://mp.weixin.qq.com/s/uZe2JB_3c9yomGnaqRqzKA
GLSL ES 语言—矢量和矩阵
https://mp.weixin.qq.com/s/Ujf_luMBkllIXeTx5hy9uQ
GLSL ES 语言—矢量和矩阵的赋值构造函数
https://mp.weixin.qq.com/s/ATRxeJtU3gSOKFxr5qi2Cw
GLSL ES 语言—矢量点(.)运算符
https://mp.weixin.qq.com/s/VZm_vZ5xQXJUorNpdWZTkA
GLSL 语言—矢量和矩阵 [ ] 运算符
https://mp.weixin.qq.com/s/muSSMaPkQXAnNVc98OL1Hw
GLSL ES 语言—矢量矩阵运算
https://mp.weixin.qq.com/s/OH_IMHQP7jGuCqiisOpjcA
GLSL ES 语言—取样器
https://mp.weixin.qq.com/s/3U5VXkTchlwaJr7EjqKxKA
GLSL ES 语言—数组
https://mp.weixin.qq.com/s/XA5lGlfJW5GwWIIBJBV0yQ
GLSL ES 语言—结构体
https://mp.weixin.qq.com/s/9jRdOx6FzFiZ7j-2iGgAww
GLSL ES 语言—循环语句for
https://mp.weixin.qq.com/s/Isz7u3Sx5XZHu9FRR_kG5A
GLSL ES 语言—函数
https://mp.weixin.qq.com/s/xfcLnc2nx2IfzYUkMyXShA
GLSL ES 语言—参数限定词
https://mp.weixin.qq.com/s/_kB9KKfR84_9rwf8q-dZeA
GLSL ES 语言—内置函数
https://mp.weixin.qq.com/s/aMME1iVMdghk3CmctIfxzg
GLSL ES 语言—存储限定字const
https://mp.weixin.qq.com/s/_anDKq5-afM_IBDMb7hd7Q
GLSL ES 语言—存储限定字attribute
https://mp.weixin.qq.com/s/mSEkdv_DrO9SNfEcUenLcQ
GLSL ES 语言—存储限定字uniform
https://mp.weixin.qq.com/s/I6Jyckx8dC8TeQeHB3XxRg
GLSL ES 语言—存储限定字varying
https://mp.weixin.qq.com/s/eD_bYIPwYfBXxC97tqJbsA
我给你说，我可是含着泪吭哧吭哧记录下18 篇《WebGL 编程指南》读书笔记，引来了不少同修们的追番！
每篇内容只仅含一个 GLSL 语法知识点，200字上下，短小精干。
适合对 Shader 语法、编程语言，不够熟悉的同学。
04
玉兔的CocosShader与图形学视频教程
一说到 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 Creator 演示画面实现效果，而且每一集视频教程都有对应的源码工程。
你可在 Cocos Store 资源商城中搜索『yutu』可获取全部源码工程。
【教学版】卡通风格水面渲染效果
https://store.cocos.com/app/detail/3582
【教学版】MatCap玻璃杯渲染效果
https://store.cocos.com/app/detail/3936
【教学版】模型边缘内发光特效(rimlight)
https://store.cocos.com/app/detail/3527
高级卡通风格水面渲染Pro
https://store.cocos.com/app/detail/5186
【教学版】高级卡通风格水面渲染效果
https://store.cocos.com/app/detail/3695
【教学版】基于边缘检测算法的描边效果
https://store.cocos.com/app/detail/3808
【教学版】消融特效(dissolve)
https://store.cocos.com/app/detail/4185
【教学版】基于屏幕后处理的全局雾效Shader
https://store.cocos.com/app/detail/4673
【教学版】能量罩特效Shader
https://store.cocos.com/app/detail/4443
【教学版】游戏滤镜效果(LUT Shader)
https://store.cocos.com/app/detail/5288
3D基础光照模型Shader
https://store.cocos.com/app/detail/5288
除了游戏 Shader 案例教学视频外，玉兔还分享了自己的 Shader 学习心得。
并从图形学基础开始，讲解什么是渲染管线、深度图、颜色空间、伽马矫正、反射探针、屏幕后效......
深度与深度图｜新手必看的图形学基础知识｜深度相关知识扫盲
https://www.bilibili.com/video/BV1SW4y1W74W
什么是渲染管线｜什么是Shader？3D游戏开发基础｜渲染管线综述
https://www.bilibili.com/video/BV1sN4y1A7Xv
什么是反射探针｜游戏中的环境反射方式科普｜反射探针的原理与实现
https://www.bilibili.com/video/BV1Us4y1Y7hu
深度图重建世界坐标｜深度超常用的公式推
https://www.bilibili.com/video/BV1Bg4y1b7Sb
关于颜色空间你知道多少｜线性工作流与伽马校正｜图形学必备知识点
https://www.bilibili.com/video/BV1Hk4y1Y7AP
2023新人如何快速入门Shader｜方法论
https://www.bilibili.com/video/BV1QW4y1972m
如何给游戏画面“美颜”？｜关于屏幕后处理，你知道多少？
https://www.bilibili.com/video/BV1SV4y1v7Ae
关于游戏中的光照｜入门必备的基础光照知识
https://www.bilibili.com/video/BV1mp4y1776u
是不是一大堆你可能听过，但又不知道到底是个什么的东东，学习 Shader 不只是 GPU 编程，还需要图形学知识作为基础，因此玉兔的视频就是非常好的内容！
05
孙二喵《Cocos Shader从入门到入土》系列
卷王孙二喵的 Shader 教程大多来源于自己的项目，主打一个：拿来就用！
《Shader从入门到入土 2.0 》简单又华丽的转场
https://forum.cocos.org/t/topic/149116
《Shader从入门到入土 3.0 》简单又不失稳重的颜色滤镜https://forum.cocos.org/t/topic/149237
《Shader从入门到入土 4.0 》割草游戏！动作游戏特效！
https://forum.cocos.org/t/topic/149405
《Shader从入门到入土5.0》战争迷雾和Uniform
https://forum.cocos.org/t/topic/150302
有点遗憾的是，二喵的《Shader从入门到入土》系列我没找到第一篇，但是发现这个
Cocos Shader辍学笔记1-UV点击水波纹效
https://forum.cocos.org/t/topic/145096
不论你是否能懂，只要会基本的 Cocos Creator 材质配置，能先用上！先感受！先动手！再说。
有人会问，为什么要说二喵是卷王呢？看下面这个游戏
人家一个公司，搞了6个月都没能做完的 ARPG ，二喵 3 周就给人家搞完了，而且还包含低端机优化。详情可阅读这篇文章：
与此同时，基本上每个月都会来 Cocos 论坛、Cocos Store 分享他的技术成果，比如：
24小时开发一个 3D 版的《羊了个羊》
4天开发一个吃鸡
同时还有附带有教程，还送案例源码。
2D实时水面反射-开箱即用
https://forum.cocos.org/t/topic/137681
高性能-材质动态变色分享
https://forum.cocos.org/t/topic/132212
动态导航线分享（开箱即用）
https://forum.cocos.org/t/topic/132097
3D技能系统优化
https://forum.cocos.org/t/topic/143309
除了在 Shader 方面的分享，孙二喵还是 Cocos 圈 AIGC 第一人，他的二次元卡牌游戏估计也快出炉了，而且是今年最流行的开宝箱玩法。
这还只是冰山一角，二喵的故事，就先说这么多，先把源码跑起来！
炫酷技能管理器
https://store.cocos.com/app/detail/4321
卡牌Shader转场特效（7合1）
https://store.cocos.com/app/detail/4925
2D全局雾效和Uniform优化
https://store.cocos.com/app/detail/5067
2D割草动作游戏炫酷Shader
https://store.cocos.com/app/detail/4962
2D水面反射
https://store.cocos.com/app/detail/3900
超方便导航线
https://store.cocos.com/app/detail/3602
高性能动态材质+Shader源码
https://store.cocos.com/app/detail/3603
最后再提一嘴！就是，如何使用 Cocos Creator 引擎 API 控制 Shader 的参数，也很重要，二喵的源码中都有演示。
06
麒麟子硬核图形学渲染系统
麒麟子时常戏称为 Cocos Shader 九号技师！
Cocos Shader入门基础（一）前言
https://zhuanlan.zhihu.com/p/461319977
Cocos Shader入门基础（二）初识Cocos Shader
https://zhuanlan.zhihu.com/p/461324721
Cocos Shader入门基础（三）可编程管线浅析与Hello World
https://zhuanlan.zhihu.com/p/461486504
Cocos Shader入门基础（四）Uniform与材质参数控制
https://zhuanlan.zhihu.com/p/461497703
Cocos Shader入门基础（五）炫酷的3D特效Shader是如何炼成的
https://zhuanlan.zhihu.com/p/459015398
Cocos Shader入门基础（六）平面、双面材质与自定义裁剪面
https://zhuanlan.zhihu.com/p/470978236
Cocos Shader入门基础（七）一文彻底弄懂深度图
https://zhuanlan.zhihu.com/p/479574432
Shader 这门手艺啊，在麒麟子的技能列表中，仅仅排名第九位，除了Shader，还有框架、联机、RPG、MMO、加载、内存、性能优化、调试......
3D渲染技术分享：3D游戏开发高手常用渲染调试技巧
https://zhuanlan.zhihu.com/p/467006713
3D渲染技术分享：一种高效的卡通水体渲染
https://zhuanlan.zhihu.com/p/473874777
3D渲染技术分享：用实时反射Shader增强画面颜值
https://zhuanlan.zhihu.com/p/475696435
3D渲染技术分享：实时水面渲染方案(反射、折射、水深与水岸柔边)
https://zhuanlan.zhihu.com/p/486631970
每逢 Cocos Creator 引擎大版本更新，绝对少不了麒麟子的核心特新分享。
Cocos Creator 3.8 后期效果 Shader 编写（1/2） 基础篇
https://zhuanlan.zhihu.com/p/644905294
Cocos Creator 3.8 后期效果 Shader 编写（2/2） 进阶篇
https://zhuanlan.zhihu.com/p/648925893
Cocos Creator 3.6 新特性详解 2/3：渲染篇
https://zhuanlan.zhihu.com/p/554928634
还有 Cocos Cyberpunk 项目源码解读，关于 Shader 渲染管线、后期效果等文章的分享。
Cocos Cyberpunk 源码解读 - 使用自定义管线
https://zhuanlan.zhihu.com/p/618242136
Cocos Cyberpunk 源码解读 - 延迟渲染从入门到实践
https://zhuanlan.zhihu.com/p/618250549
Cocos Cyberpunk 源码解读 - 后期效果 Shader 编写
https://zhuanlan.zhihu.com/p/618244746
冰墩墩透明材质渲染
https://mp.weixin.qq.com/s/0bKKG7vtYN4nacgF14rv7g
以上文章，部分还配套有源码工程或工具，下载地址如下：
[Kylins]Cocos版冰墩墩仿真渲染
https://store.cocos.com/app/detail/3566
[Kylins]CocosShader入门基础-DEMO
https://store.cocos.com/app/detail/3521
[Kylins]写实风格实时水面渲染Shader
https://store.cocos.com/app/detail/3645
[Kylins]GraphicsDebugger
https://store.cocos.com/app/detail/3342
[Kylins]实时反射组件与案例参考
https://store.cocos.com/app/detail/3595
[Kylins]PostEffects Pro
https://store.cocos.com/app/detail/3333
以上就是我所采集到的，麒麟子关于 Cocos Shader 相关的文章，大家慢慢享用吧，急不得的哦！
07
SuperSuRaccoon可视化Shader编辑器与配套教程
Shader Editor 是 Cocos Store 畅销插件，开发者超级浣熊 SuperRaccoon 基于这款可视化 Shader 编辑器，编写了一套 Shader 入门教程。
Lesson 0x01 - Rendering an Image / 渲染图片
https://mp.weixin.qq.com/s/n6mSig-OhnAWuAfbXIhm2g
Lesson 0x02 - Texture Lookup / 纹理寻址
https://mp.weixin.qq.com/s/r7Cg_-8MefxSp_favXoyxw
Lesson 0x03 - Texture WrapMode纹理环绕模式
https://mp.weixin.qq.com/s/sLXVHJPIAuQcdxcHrKKdwg
Lesson 0x04 - UV Basic Tricks / UV 基本套路
https://mp.weixin.qq.com/s/JfjX1r_j-adVWuFg5M69rw
Lesson 0x05 - Texture Mask / 纹理遮罩
https://mp.weixin.qq.com/s/SAlo3RLk-mX9DhM2hkVF4g
Lesson 0x06 - FX in Game / 特效使用
https://mp.weixin.qq.com/s/mas24ZoHZWghcpy4RuB50Q
Lesson 0x07 - Constant and Uniform / 常量变量
https://mp.weixin.qq.com/s/mPZKJcOySF8tmMmD1yPurQ
Lesson 0x08 - Material Variant / 材质变体
https://mp.weixin.qq.com/s/LGtz3BtcfevV2du_sLeRZg
Lesson 0x09 - Texture Pack / 纹理打包
https://mp.weixin.qq.com/s/IusLMSNccfOKGnMF1LRmdQ
Lesson 0x0A - UV Atlas / UV 合图
https://mp.weixin.qq.com/s/m_-xGIsfzOE8Jyk6ZCNLNA
Lesson 0x0B - Multi Texture / 多纹理
https://mp.weixin.qq.com/s/rmLN2gONFRSH9Kr4FGQUxg
Lesson 0x0C - Texture Composition / 纹理组合
https://mp.weixin.qq.com/s/_ftB_KKti4J91WFuZIdkXw
除此之外浣熊还开发有多款 2D 渲染类工具，比如：2D 光影、屏幕后效、Preview3D（在 3D 中使用 2D 精灵 Shader）
2D视野-光照-阴影
资源地址：https://store.cocos.com/app/detail/2823
2D屏幕后期特效
资源地址：https://store.cocos.com/app/detail/3249
SSRScreenSplitFX
资源地址：https://store.cocos.com/app/detail/3291
以上就是浣熊大佬贡献的 Shader 相关资源，是不是很有特色，也很开脑洞呢！
08
更多开发者Shader文章教程分享
【江船长】Cocos Creator 实时渲染的超写实汽车！堪比真车的车漆材质表现
https://mp.weixin.qq.com/s/WauJTMcXD85R3IXEL5Vv9w
【江船长】真实人物渲染（一）：皮肤篇
https://mp.weixin.qq.com/s/WniBIH5QN4PXKJYOYoajPw
【江船长】真实人物渲染（二）：头发篇
https://mp.weixin.qq.com/s/NHYbXwh3XlS1-V3tCx5YDQ
【江船长】真实人物渲染（三）：眼睛篇
https://mp.weixin.qq.com/s/3FHX7y2MlzHzGoB2Aw8AVg
【好巧啊c】2D 实时阴影
https://mp.weixin.qq.com/s/BsdhktDfHkhtMlNdghgk2A
【好巧啊c】2D 动态光照
https://mp.weixin.qq.com/s/h7ttpoQvNvzXkHz-KJT9Cw
【alpha】光影的魔法！Cocos Creator 实现屏幕空间的环境光遮蔽(SSAO)
https://mp.weixin.qq.com/s/0aNtXI7s41meJhI5M4JItQ
【武云潇】小姐姐，你的发丝高光怎么实现？
https://mp.weixin.qq.com/s/OCdKfXynSr9HNS_r1X68AA
【muzzik】基于 SDF 实现多种 Shader 特效
https://mp.weixin.qq.com/s/hSEs3k8PRYyQrfEVhd5KHA
Cocos Shader入门精要
https://store.cocos.com/app/detail/5276
3.x常用2D Shader 现已包含特效 20+ 常用特效
https://store.cocos.com/app/detail/4025
2.4.x常用Shader特效18+
https://store.cocos.com/app/detail/3027
炫酷技能管理器
https://store.cocos.com/app/detail/4321
SDF Shader Demo
https://store.cocos.com/app/detail/2875
Effect Exporter（Shader 2D&&3D 特效的编辑器插件）
https://store.cocos.com/app/detail/3369
玉兔Shader教学案例Demo
https://store.cocos.com/app/search?name=yutu
车漆着色器 / Car Paint Shader
https://store.cocos.com/app/detail/3534
皮肤次表面散射着色器 / SSS Skin Shader
https://store.cocos.com/app/detail/3535
自定义渲染cc.Graphics Demo
https://store.cocos.com/app/detail/3199
09
结语
一不小心，我感觉自己像是 Cocos 圈的百晓生。
Cocos 开发者社区宝藏如山似海，准备这篇文章，晓衡历时七七一个星期的时间。扒遍了 Cocos 论坛、Cocos 公众号、Cocos Store 以及众多开发者们的媒体账号，终于练成！希望能为开发者社区做出一份自己的贡献！
Shader 技术更是游戏开发者，升职加薪，行走江湖的高端必杀技，欢迎收藏分享给需要的朋友们！
-- end --
往期精彩
1459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
