全文共5000+字，分为8个章节，由本人历时一周整理而来。由于篇幅问题，将本文分为8个章节分开发布。全文 （不） 详细描述了cocoscreator 引擎的2.40版本中，web平台的js部分引擎的渲染流程。请将文章配合源码一起食用！

​由于我尚在学习引擎源码中，文章可能有不正确的部分，所以我会不断更新内容。如有错误或补充，请留言交流！

全部章节链接：

一：渲染流程中用到的核心类

二 ： 渲染流程详解

三： RenderFlow 的运行逻辑

四： Assembler 的作用

五： ModelBatcher 数据合批

六： 材质系统

七： ForwardRender

七 ForwardRender

ForwardRender 继承于 Base, 是与底层渲染最靠近的类型，当上面的流程处理完毕后，会在ForwardRender 的 render() 中处理当前场景的渲染状态，材质,光照，通道，着色器，更新着色器的统一变量。并在 _draw() 中调用 device.draw()方法，进行绘制。

7.1 ForwardRender 的成员变量

部分重要的继承于 Base 的成员变量：
_device：根据运行平台对应的绘制图形对象 gfx.Device 的实例，用于绘制图形到屏幕，类型定义于 cocos2d\renderer\gfx\index.js。
_programLib ： 管理 shader 定义，获取，检查等相关的变量。类型定义于 cocos2d\renderer\core\program-lib.js。
_stage2fn：保存有不同渲染通道的名称与其对应的不同渲染方法。ForwardRender 中设置有 shadowcast， opaque, transparent 三种渲染通道。
_viewPools：单个相机的描述数据类(View) 的对象池。一个View对应一个相机。
_drawItemsPools：渲染数据类的对象池，保存有每个渲染批次需要的model，effect 等数据。
_stageItemsPools：单个渲染通道需要渲染的数据的对象池，本质是对 _drawItemsPools 中的数据按照不同通道进行了分类。

ForwardRender 中定义的成员变量：
_lights：保存所有灯光数据。
_shadowLights：保存所有阴影灯光数据。

7.2 渲染通道

类名 ForwardRender 翻译为前向渲染，泛指传统上只有 Opaque 和 Transparent 两个通道的渲染技术。cocos有三个渲染通道，渲染通道方法定义在 _stage2fn 中。

1. shadowcast：阴影渲染。
2. opaque：不透明，从前往后按顺序渲染。
3. transparent ：透明，从后往前按顺序渲染。

渲染管线具体详解请参考unity官方文档（对的，真要学cocos还得看unity的文档）：
内置渲染管线中的渲染路径

相关链接

1. 自定义渲染：https://docs.cocos.com/creator/manual/zh/advanced-topics/custom-render.html#%E8%87%AA%E5%AE%9A%E4%B9%89-assembler

2. RenderFlow的性能优化：http://docs.cocos.com/creator/manual/zh/advanced-topics/render-flow.html#

3. 自定义渲染合批之自定义顶点格式： https://forum.cocos.org/t/demo/95087

4. 自定义RenderFlow，处理背包等场景下drawcall过多：https://forum.cocos.org/t/ui/80026

5. 材质系统：https://docs.cocos.com/creator3d/manual/zh/material-system/overview.html