渲染学习完全指南

面向 Cocos Creator 3.8.x，从零到资深——5阶段29章，掌握H5渲染全链路

DrawCall优化6步链路 · Batcher2D源码解析 · 虚拟列表+BFS渲染合并 · Shader实战
学习路线
5阶段递进，从Cocos渲染核心出发，逐步深入到图形学底层。共 29 章，预计 8 周完成。
1

第一阶段：Cocos渲染核心（01~11） 2~3周

GPU管线 → Cocos架构 → DrawCall优化6步链路 → Shader → 虚拟列表+BFS渲染合并 → 调试 → 实战。学完即具备2D游戏渲染优化能力。

2

第二阶段：数学与2D图形（12~16） 1~2周

仿射变换矩阵 → Canvas 2D → 向量绘图 → 参数曲线 → 颜色空间。补齐数学和图形基础。

3

第三阶段：图形学深入（17~22） 2周

多边形处理 → SDF几何造型 → 动画原理 → WebGL模式 → 噪声 → 极坐标图案。深入图形学理论。

4

第四阶段：3D与光照（23~26） 1~2周

3D基础 → 相机投影 → 光照模型 → 法线贴图与后处理。从2D进入3D渲染。

5

第五阶段：性能与特效（27~29） 1周

像素处理 → 性能优化全链路 → 粒子系统与特效。综合实战，达到资深水平。

章节内容
点击卡片进入对应章节
第一阶段：Cocos渲染核心
优先掌握游戏开发中最实用的渲染知识，学完即具备2D游戏性能优化能力
Chapter 01
GPU渲染管线详解
从顶点输入到帧缓冲输出的完整8阶段。深度缓冲、Early-Z、GPU内存架构、三重缓冲。
8大阶段深度缓冲Early-ZGPU内存
Chapter 02
核心名词解释大全
58个渲染名词速查，每个都有定义、本质、生活比喻、技术细节、常见误区。
58个术语VBO/IBOMVP矩阵DrawCall
Chapter 03
Cocos渲染架构详解
Batcher2D源码级分析、RenderPipeline多相机渲染、GFX后端对比、材质系统、线程模型。
Batcher2DRenderPipelineGFX抽象层
Chapter 04
场景树与合批机制详解
walk()遍历源码分析、渲染数据收集流程、合批条件判断、Mask打断合批原理、DrawCall优化实操。
walk()源码合批条件Mask打断层级优化
Chapter 05
DrawCall优化全链路
6步链路：皮肤层级→静态合批→动态合批→脏标记→节点合并→Shader传参。图集策略、Profiler分析。
6步链路静态合批动态合批脏标记
Chapter 06
DrawCall优化实战案例
4个完整优化案例：背包UI(50→5 DC)、角色列表(皮肤层级)、聊天界面(动态合批+脏标记+虚拟列表)、战斗界面(统一Shader+节点合并)。
背包优化皮肤层级脏标记实战Shader合并
Chapter 07
Shader深度入门
Uniform硬件原理、深度测试推导、模板测试Mask实现、混合公式推导、Shader变体、多Pass渲染。
Uniform原理深度测试模板测试混合公式
Chapter 08
CocosEffect与Shader入门
Cocos Effect文件结构、内置Shader解析、自定义Shader实战、如何通过修改Shader减少DrawCall、Shader调试技巧。
Cocos Effect自定义Shader减少DrawCall
Chapter 09
虚拟列表与渲染合并
虚拟列表完整算法、节点池、不等高列表、DFS vs BFS渲染合并、BFSVirtualList分层实现、网格虚拟列表、背包系统实战。
虚拟列表BFS渲染合并分层方案背包实战
Chapter 10
可视化与渲染调试
Stats面板、Spector.js抓帧、RenderDoc、Chrome DevTools GPU分析、性能瓶颈定位方法论。
StatsSpector.jsRenderDoc瓶颈定位
Chapter 11
进阶实战与知识图谱
2D卡牌游戏三阶段优化、跨平台适配、10大常见坑点、泛型对象池、自动化性能测试、完整知识图谱。
综合实战跨平台适配对象池知识图谱
第二阶段：数学与2D图形基础
补齐数学和2D图形基础，为后续图形学深入做准备
Chapter 12
仿射变换与坐标变换
平移/旋转/缩放矩阵推导、齐次坐标、组合变换顺序、WebGL粒子动画实践。
矩阵推导齐次坐标组合变换WebGL实践
Chapter 13
Canvas 2D与坐标系统
Canvas API基础、save/restore状态栈、坐标变换、屏幕坐标vs笛卡尔坐标、动画循环。
Canvas API坐标变换动画循环
Chapter 14
向量绘图与递归图形
Vector2D类、正多边形绘制、递归分形树、海龟绘图系统、L-系统。
向量数学分形树海龟绘图L-系统
Chapter 15
参数方程与贝塞尔曲线
参数方程概念、圆弧/螺旋/玫瑰曲线、二次/三次贝塞尔曲线de Casteljau推导。
参数方程极坐标贝塞尔曲线
Chapter 16
颜色与色彩空间
RGB/HSL/CIELAB颜色空间、颜色插值问题、感知均匀性、Cubehelix插值、Gamma校正。
RGBHSLCIELAB颜色插值
第三阶段：图形学深入
深入图形学理论，从几何到着色器到程序化生成
Chapter 17
多边形与几何处理
填充规则（nonzero/evenodd）、三角剖分Earcut、点在多边形内检测、线段渲染与几何挤压。
填充规则三角剖分Earcut线段渲染
Chapter 18
片元着色器几何造型
distance/step/smoothstep、叉乘求距离、SDF方法论、圆/线/线段/三角形绘制。
SDF距离场几何造型交互Demo
Chapter 19
动画与缓动原理
帧驱动vs时间驱动、DeltaTime、线性插值、缓动函数、贝塞尔缓动、精灵动画。
DeltaTime缓动函数贝塞尔缓动
Chapter 20
WebGL与着色器模式
原生WebGL完整管线、UV重复与平铺、Shader随机数、Mandelbrot分形、Truchet图案。
原生WebGLUV重复分形随机数
Chapter 21
噪声与程序化生成
Value/Gradient/Simplex/Cellular Noise、FBM分形布朗运动、域变形、云/地形/水应用。
Value NoiseSimplexCellularFBM
Chapter 22
极坐标与图案重复
极坐标变换、玫瑰曲线花瓣规律、交互式HSV色轮、图案重复与平铺。
极坐标玫瑰曲线HSV色轮图案重复
第四阶段：3D与光照
从2D进入3D渲染，掌握3D变换、光照和后处理
Chapter 23
3D渲染基础
3D变换矩阵、欧拉角与万向节死锁、轴角与四元数、透视投影、Lambert漫反射。
3D矩阵欧拉角四元数透视投影
Chapter 24
相机与投影变换
视图矩阵与LookAt、正交投影、透视投影（FOV/宽高比/近远面）、视锥体裁剪。
LookAt正交投影透视投影视锥体
Chapter 25
光照模型与材质
环境光、Lambert漫反射、方向光/点光源/聚光灯、Phong/Blinn-Phong镜面反射。
环境光漫反射PhongBlinn-Phong
Chapter 26
法线贴图与高级渲染
法线贴图vs凹凸贴图、TBN矩阵、切线空间、FBO多Pass渲染、高斯模糊、Bloom、烟雾模拟。
法线贴图TBN矩阵FBOBloom
第五阶段：性能与特效
综合性能优化和特效实现，达到资深渲染工程师水平
Chapter 27
像素处理与后处理
CPU像素操作、颜色矩阵、高斯模糊、纹理混合、暗角效果、GPU像素处理、多纹理合成。
像素操作颜色矩阵高斯模糊纹理合成
Chapter 28
性能优化全链路
Canvas分层、离屏缓存、Path2D、WebWorker、WebGL合批、Point Sprite、Instancing 20万点。
Canvas优化WebGL合批Instancing20万点
Chapter 29
粒子系统与特效
粒子属性与物理、变换矩阵、Alpha混合、噪声驱动动画、Point Sprite、火焰/烟雾/雨特效。
粒子物理Alpha混合噪声驱动Instancing

学习建议