全文共5000+字，分為8個(gè)章節(jié)，由本人歷時(shí)一周整理而來。由于篇幅問題，將本文分為8個(gè)章節(jié)分開發(fā)布。全文 （不） 詳細(xì)描述了cocoscreator 引擎的2.40版本中，web平臺(tái)的js部分引擎的渲染流程。請(qǐng)將文章配合源碼一起食用！
?由于我尚在學(xué)習(xí)引擎源碼中，文章可能有不正確的部分，所以我會(huì)不斷更新內(nèi)容。如有錯(cuò)誤或補(bǔ)充，請(qǐng)留言交流！
全部章節(jié)鏈接：
三 RenderFlow 的運(yùn)行邏輯
RenderFlow ： 渲染流，用以遍歷場(chǎng)景下所有節(jié)點(diǎn)，根據(jù)每個(gè)節(jié)點(diǎn)的_renderFlag , 處理節(jié)點(diǎn)的位置，顏色，透明度，更新并渲染。
3.1 性能優(yōu)化
在v1.x版本中，每次渲染都會(huì)進(jìn)行很多動(dòng)態(tài)判斷，需要去判斷每個(gè)節(jié)點(diǎn)是否需要更新位置矩陣，是否需要渲染，在這些過程中會(huì)有很多無用分支判斷，消耗性能。
所以在v2.x版本中，RenderFlow根據(jù)渲染過程中調(diào)用的頻繁度劃分出多個(gè)渲染狀態(tài)，比如 Transform，Render，Children 等，而每個(gè)渲染狀態(tài)都對(duì)應(yīng)了一個(gè)函數(shù)。在 RenderFlow 的初始化過程中，會(huì)預(yù)先根據(jù)這些狀態(tài)創(chuàng)建好對(duì)應(yīng)的渲染分支，這些分支會(huì)把對(duì)應(yīng)的狀態(tài)依次鏈接在一起。在渲染前會(huì)更新該節(jié)點(diǎn)的_renderFlag ,在渲染該節(jié)點(diǎn)時(shí)就可以直接根據(jù) _renderFlag的值，進(jìn)行相應(yīng)分支的處理，不用進(jìn)行多余的狀態(tài)判斷。
例如一個(gè)節(jié)點(diǎn)在當(dāng)前幀需要更新矩陣，以及需要渲染自己，那么這個(gè)節(jié)點(diǎn)會(huì)更新他的 flag 為
node._renderFlag = RenderFlow.FLAG_TRANSFORM | RenderFlow.FLAG_RENDER。
更加詳細(xì)的內(nèi)容可見文末的相關(guān)鏈接中 : RenderFlow的性能優(yōu)化.
3.2 RenderFlow 內(nèi)的鏈?zhǔn)椒椒ǖ膭?chuàng)建與調(diào)用
RenderFlow中根據(jù) _renderFlag 獲取渲染流的代碼如下:
function getFlow (flag) {
let flow = null;
let tFlag = FINAL;
while (tFlag > 0) {
if (tFlag & flag)// 如果flag標(biāo)識(shí)匹配，則添加新的渲染流
flow = createFlow(tFlag, flow);// 需要把上一步創(chuàng)建flow傳入，作為子流
tFlag = tFlag >> 1;// 標(biāo)志右移一位
}
return flow;
}
createFlow() 中會(huì)根據(jù)flag創(chuàng)建對(duì)應(yīng)的渲染流，并加入鏈中，代碼如下：
function createFlow (flag, next) {
let flow = new RenderFlow();
flow._next = next || EMPTY_FLOW;// 將本次創(chuàng)建的flow加入鏈表首部
// 根據(jù)不同的flag設(shè)置不同的處理方法
switch (flag) {
case DONOTHING: flow._func = flow._doNothing; break;
case BREAK_FLOW: flow._func = flow._doNothing; break;
case LOCAL_TRANSFORM: flow._func = flow._localTransform; break;
case WORLD_TRANSFORM: flow._func = flow._worldTransform; break;
case OPACITY: flow._func = flow._opacity; break;
case COLOR: flow._func = flow._color; break;
case UPDATE_RENDER_DATA: flow._func = flow._updateRenderData; break;
case RENDER: flow._func = flow._render; break;
case CHILDREN: flow._func = flow._children; break;
case POST_RENDER: flow._func = flow._postRender; break;
}
return flow;
}
RenderFlow是根據(jù)node節(jié)點(diǎn)上的_renderFlag 來進(jìn)行不同的渲染流程，所以當(dāng)node節(jié)點(diǎn)上的位置，顏色，透明度等參數(shù)改變后，需要同步修改_renderFlag。這樣在渲染時(shí)會(huì)去根據(jù)flag處理對(duì)應(yīng)的流程。
3.3 詳解 RenderFlow 的不同操作
RenderFlow根據(jù) _renderFlag 創(chuàng)建了鏈?zhǔn)戒秩玖鳎鱾€(gè)不同的FLAG對(duì)應(yīng)的方法，都做了些什么，下面會(huì)詳細(xì)說明。
- _localTransform 方法
更新本地坐標(biāo)矩陣。(Tips:節(jié)點(diǎn)的位置通過本地坐標(biāo)矩陣和世界坐標(biāo)矩陣管理，通過矩陣叉乘來進(jìn)行高效的坐標(biāo)轉(zhuǎn)換，具體內(nèi)容待繼續(xù)學(xué)習(xí)了解。。。) - _worldTransform 方法
更新世界坐標(biāo)矩陣。 - _opacity 方法
處理透明度。 - _color 方法
更新 renderCompent 的顏色 - _updateRenderData 方法
更新渲染數(shù)據(jù)，調(diào)用 Assembler 里的 updateRenderData 方法，主要是更新uv和頂點(diǎn)數(shù)據(jù)。 - _render 方法
_proto._render = function (node) {
let comp = node._renderComponent;
comp._checkBacth(_batcher, node._cullingMask);
comp._assembler.fillBuffers(comp, _batcher);
this._next._func(node);
};
調(diào)用 RenderComponent 的 _checkBacth 檢測(cè)合批。
調(diào)用 Assembler 的 fillBuffers 填充數(shù)據(jù)。
- _children 方法
遍歷子節(jié)點(diǎn)進(jìn)行子節(jié)點(diǎn)的渲染流程。 - _postRender 方法
（暫時(shí)不理解 todo）
相關(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過多：https://forum.cocos.org/t/ui/80026
材質(zhì)系統(tǒng)：https://docs.cocos.com/creator3d/manual/zh/material-system/overview.html
