全文共5000+字，分为8个章节，由本人历时一周整理而来。由于篇幅问题，将本文分为8个章节分开发布。全文 （不） 详细描述了cocoscreator 引擎的2.40版本中，web平台的js部分引擎的渲染流程。请将文章配合源码一起食用！
由于我尚在学习引擎源码中，文章可能有不正确的部分，所以我会不断更新内容。如有错误或补充，请留言交流！
全部章节链接：
二 渲染流程详解
2.1 初始入口
渲染流程会在每帧调用，所以可以在 CCDirector 的 mainLoop 中找到渲染的入口：
// Render
this.emit(cc.Director.EVENT_BEFORE_DRAW);
renderer.render(this._scene, this._deltaTime);
// After draw
this.emit(cc.Director.EVENT_AFTER_DRAW);
renderer的定义在 \cocos2d\core\renderer\index.js 中。
2.2 cc.renderer.render()
render (ecScene, dt) {
this.device.resetDrawCalls();
if (ecScene) {
// walk entity component scene to generate models
this._flow.render(ecScene, dt);
this.drawCalls = this.device.getDrawCalls();
}
},
关于 _flow, 在 cc.renderer 的 initWebGL 和 initCanvas 中可以看到：
this._flow = cc.RenderFlow;
所以下一步进入到 cc.RenderFlow.render()。
2.3 cc.RenderFlow.render()
render方法定义在 cocos2d\core\renderer\render-flow.js 中。 这10行代码包含了渲染的整个流程：1.遍历节点获取数据，2.渲染到屏幕。代码如下
RenderFlow.render = function (rootNode, dt) {
_batcher.reset();
_batcher.walking = true;
// 遍历渲染场景节点的所有子节点
RenderFlow.visitRootNode(rootNode);
_batcher.terminate();
_batcher.walking = false;
// 将batcher中的渲染数据，渲染到屏幕
_forward.render(_batcher._renderScene, dt);
};
这个方法里有_batcher 和 _forward 2个变量， 是在方法 RenderFlow.init 中初始化。而 RenderFlow.init 也是在在 cc.renderer 的 initWebGL 和 initCanvas 中调用，代码如下。
this._forward = new ForwardRenderer(this.device, builtins);
this._handle = new ModelBatcher(this.device, this.scene);
// 调用了 cc.RenderFlow.init
this._flow.init(this._handle, this._forward);
由此可知，变量名字和变量类型有关联性，方便我们能快速了解各个变量的类型：
_batcher 类型是 ModelBatcher，用以渲染合批。
_forward 类型是 ForwardRenderer，用以渲染数据到设备的屏幕中。
搞清楚各个变量的定义类型后，下面会逐步了解，如何获取到各个节点和组件上需要渲染的数据。
相关链接
RenderFlow的性能优化：http://docs.cocos.com/creator/manual/zh/advanced-topics/render-flow.html#
自定义渲染合批之自定义顶点格式： https://forum.cocos.org/t/demo/95087
自定义RenderFlow，处理背包等场景下drawcall过多：https://forum.cocos.org/t/ui/80026
材质系统：https://docs.cocos.com/creator3d/manual/zh/material-system/overview.html
