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在渲染上的区别：
1.x的逻辑树与渲染树
从上图可以看到，引擎中维护了一颗场景逻辑树（左边），需要时刻与渲染树（右边）进行数据同步。sgNode仅仅是为了同步Node的所有transform信息和渲染组件的状态信息，这造成了巨大的浪费。
2.x中的节点树
在2.x使用了全新的设计，引擎内部只有一颗逻辑树，场景下包含节点，节点下挂载有渲染组件，简单清晰。因此在2.x中节点与组件对象中，不再有_sgNode这个变量了，使用时需要注意。
渲染流程
我们通过节点的transform为例对比1.x与2.x的渲染流程，请看下图：
1.x渲染流程
- 检查节点颜色是否dirty（变脏），如果是生成Color更指令
- 检查 Transform(几何属性变换)是否dirty，如果是生成更新Transform指令
- 通过dirty检查是否需要重新渲染，是则生成渲染指令压入渲染队列
- 检查是否存在子节点，如果存在，则对子节点进行相同渲染流程的检测
- Render渲染器按队列顺序执行渲染指令
2.x渲染流程
2.x在渲染流程上预先建立了所有情况的渲染通道，看上图中：transform、render、render&transform、render&transform&children。
通过节点的渲染标志直接进入某条渲染通道，有效减少动态判断带来的性能损耗。
按Shawn的理解是将在原来的条件判断，进化成了直接查表，据引擎组大神讲预先建立的各种情况的渲染组合有100多种之多。
渲染框架
我们再从整体上看一下2.0的渲染框架，请看下图：
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用极少的代码就能实现卷轴地图、缩略小地图、节点跟随、动态调整渲染顺序等复杂功能。
渲染数据
我们再看一下渲染数据这块，它分为两个部分：数据与表现，请看下图：
Renderer数据结构
- 数据部分：输入组装器，组装了VertexBuffer(顶点缓存)和IndexBuffer(索引缓存)
- 表现部分：主要是增加了Material(材质系统)相关API，可以方便地控制Shader的defines、Uniforms，同时可以在不同帧切换使用不同的Shader。
这部分的应用可以参考《ShaderHelper组件速递》《Material.js源码分析》。
3. 小结
本篇初步探索了Cocos Creator 2.x新的渲染流程和框架，其中对开发者特别有用的是性能提升、自定材质系统、3D摄像机让游戏表现会更加丰富。
作者：张晓衡
链接：https://www.jianshu.com/p/2e0301867e47
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。