全文共5000+字，分為8個(gè)章節(jié)，由本人歷時(shí)一周整理而來(lái)。由于篇幅問(wèn)題，將本文分為8個(gè)章節(jié)分開(kāi)發(fā)布。全文 （不） 詳細(xì)描述了cocoscreator 引擎的2.40版本中，web平臺(tái)的js部分引擎的渲染流程。請(qǐng)將文章配合源碼一起食用！
?由于我尚在學(xué)習(xí)引擎源碼中，文章可能有不正確的部分，所以我會(huì)不斷更新內(nèi)容。如有錯(cuò)誤或補(bǔ)充，請(qǐng)留言交流！
全部章節(jié)鏈接：
二 渲染流程詳解
2.1 初始入口
渲染流程會(huì)在每幀調(diào)用，所以可以在 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();
}
},
關(guān)于 _flow, 在 cc.renderer 的 initWebGL 和 initCanvas 中可以看到：
this._flow = cc.RenderFlow;
所以下一步進(jìn)入到 cc.RenderFlow.render()。
2.3 cc.RenderFlow.render()
render方法定義在 cocos2d\core\renderer\render-flow.js 中。 這10行代碼包含了渲染的整個(gè)流程：1.遍歷節(jié)點(diǎn)獲取數(shù)據(jù)，2.渲染到屏幕。代碼如下
RenderFlow.render = function (rootNode, dt) {
_batcher.reset();
_batcher.walking = true;
// 遍歷渲染場(chǎng)景節(jié)點(diǎn)的所有子節(jié)點(diǎn)
RenderFlow.visitRootNode(rootNode);
_batcher.terminate();
_batcher.walking = false;
// 將batcher中的渲染數(shù)據(jù)，渲染到屏幕
_forward.render(_batcher._renderScene, dt);
};
這個(gè)方法里有_batcher 和 _forward 2個(gè)變量， 是在方法 RenderFlow.init 中初始化。而 RenderFlow.init 也是在在 cc.renderer 的 initWebGL 和 initCanvas 中調(diào)用，代碼如下。
this._forward = new ForwardRenderer(this.device, builtins);
this._handle = new ModelBatcher(this.device, this.scene);
// 調(diào)用了 cc.RenderFlow.init
this._flow.init(this._handle, this._forward);
由此可知，變量名字和變量類型有關(guān)聯(lián)性，方便我們能快速了解各個(gè)變量的類型：
_batcher 類型是 ModelBatcher，用以渲染合批。
_forward 類型是 ForwardRenderer，用以渲染數(shù)據(jù)到設(shè)備的屏幕中。
搞清楚各個(gè)變量的定義類型后，下面會(huì)逐步了解，如何獲取到各個(gè)節(jié)點(diǎn)和組件上需要渲染的數(shù)據(jù)。
相關(guān)鏈接
RenderFlow的性能優(yōu)化：http://docs.cocos.com/creator/manual/zh/advanced-topics/render-flow.html#
自定義渲染合批之自定義頂點(diǎn)格式： https://forum.cocos.org/t/demo/95087
自定義RenderFlow，處理背包等場(chǎng)景下drawcall過(guò)多：https://forum.cocos.org/t/ui/80026
材質(zhì)系統(tǒng)：https://docs.cocos.com/creator3d/manual/zh/material-system/overview.html
