CreatorPrimer|2.x的渲染初探

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渲染流程

1. 检查节点颜色是否dirty（变脏），如果是生成Color更指令
2. 检查 Transform(几何属性变换)是否dirty，如果是生成更新Transform指令
3. 通过dirty检查是否需要重新渲染，是则生成渲染指令压入渲染队列
4. 检查是否存在子节点，如果存在，则对子节点进行相同渲染流程的检测
5. Render渲染器按队列顺序执行渲染指令

2.x渲染流程

2.x在渲染流程上预先建立了所有情况的渲染通道，看上图中：transform、render、render&transform、render&transform&children。

通过节点的渲染标志直接进入某条渲染通道，有效减少动态判断带来的性能损耗。

按Shawn的理解是将在原来的条件判断，进化成了直接查表，据引擎组大神讲预先建立的各种情况的渲染组合有100多种之多。

渲染框架

我们再从整体上看一下2.0的渲染框架，请看下图：

2.0渲染框架

1. Assembler(组装器)获取组件、节点数据生成RenderData(渲染数据)，渲染数据会按有效批次提交形成Model
2. Model渲染数据包含两部分：顶点数据(VertexBuffer、IndexBuffer)和表现(Effect)，记得前面介绍过2.0材质系统，核心就是Effect了。
3. 2.0增加了新的3D Render(3D渲染器)，在外表现为Camera(摄像机)的使用，在2.0场景中如果移除Camera，运行时你将不会看到任何内容
4. 最后Camera使用Model数据对游戏场景进行渲染，

使用2.0的Camera用极少的代码就能实现卷轴地图、缩略小地图、节点跟随、动态调整渲染顺序等复杂功能。

渲染数据

我们再看一下渲染数据这块，它分为两个部分：数据与表现，请看下图：

Renderer数据结构

1. 数据部分：输入组装器，组装了VertexBuffer(顶点缓存)和IndexBuffer(索引缓存)
2. 表现部分：主要是增加了Material(材质系统)相关API，可以方便地控制Shader的defines、Uniforms，同时可以在不同帧切换使用不同的Shader。

这部分的应用可以参考《ShaderHelper组件速递》《Material.js源码分析》。

3. 小结

本篇初步探索了Cocos Creator 2.x新的渲染流程和框架，其中对开发者特别有用的是性能提升、自定材质系统、3D摄像机让游戏表现会更加丰富。