全文共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
