Shawn之前只是從感性的一面瞭解Cocos Creator 2.0在性能更好，增加部分3D效果的支持，同時API有一些變化。隨着對Cocos Creator 2.x的實踐，以及引擎組大神們的指導，對Cocos Creator 1.x和2.x有了新的瞭解和認識，在此將這次學習內容與大家分享。
1. 1.x與2.x的渲染區別
Cocos Creator 1.x 是在cocos2d-js基礎上增加了組件與可視化編輯器，但隨着引擎不斷迭代與進化，之前cocos2d-js的渲染設計制約了引擎的發展，新版本需要丟下原有的包袱，輕裝上陣。
渲染樹對比
通過下面的一些圖我們對比一下1.x與2.x在渲染上的區別：
從上圖可以看到，引擎中維護了一顆場景邏輯樹（左邊），需要時刻與渲染樹（右邊）進行數據同步。sgNode僅僅是爲了同步Node的所有transform信息和渲染組件的狀態信息，這造成了巨大的浪費。
在2.x使用了全新的設計，引擎內部只有一顆邏輯樹，場景下包含節點，節點下掛載有渲染組件，簡單清晰。因此在2.x中節點與組件對象中，不再有_sgNode這個變量了，使用時需要注意。
渲染流程
我們通過節點的transform爲例對比1.x與2.x的渲染流程，請看下圖：
- 檢查節點顏色是否dirty（變髒），如果是生成Color更指令
- 檢查 Transform(幾何屬性變換)是否dirty，如果是生成更新Transform指令
- 通過dirty檢查是否需要重新渲染，是則生成渲染指令壓入渲染隊列
- 檢查是否存在子節點，如果存在，則對子節點進行相同渲染流程的檢測
- Render渲染器按隊列順序執行渲染指令
2.x在渲染流程上預先建立了所有情況的渲染通道，看上圖中：transform、render、render&transform、render&transform&children。
通過節點的渲染標誌直接進入某條渲染通道，有效減少動態判斷帶來的性能損耗。
按Shawn的理解是將在原來的條件判斷，進化成了直接查表，據引擎組大神講預先建立的各種情況的渲染組合有100多種之多。
渲染框架
我們再從整體上看一下2.0的渲染框架，請看下圖：
- Assembler(組裝器)獲取組件、節點數據生成RenderData(渲染數據)，渲染數據會按有效批次提交形成Model
- Model渲染數據包含兩部分：頂點數據(VertexBuffer、IndexBuffer)和表現(Effect)，記得前面介紹過2.0材質系統，核心就是Effect了。
- 2.0增加了新的3D Render(3D渲染器)，在外表現爲Camera(攝像機)的使用，在2.0場景中如果移除Camera，運行時你將不會看到任何內容
- 最後Camera使用Model數據對遊戲場景進行渲染，
使用2.0的Camera用極少的代碼就能實現卷軸地圖、縮略小地圖、節點跟隨、動態調整渲染順序等複雜功能。
渲染數據
我們再看一下渲染數據這塊，它分爲兩個部分：數據與表現，請看下圖：
- 數據部分：輸入組裝器，組裝了VertexBuffer(頂點緩存)和IndexBuffer(索引緩存)
- 表現部分：主要是增加了Material(材質系統)相關API，可以方便地控制Shader的defines、Uniforms，同時可以在不同幀切換使用不同的Shader。
這部分的應用可以參考《ShaderHelper組件速遞》《Material.js源碼分析》。
3. 小結
本篇初步探索了Cocos Creator 2.x新的渲染流程和框架，其中對開發者特別有用的是性能提升、自定材質系統、3D攝像機讓遊戲表現會更加豐富。