大家好,我是晓衡!嘿嘿,今天来个大的,提前祝大家国庆节有得玩了。
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 --
往期精彩