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在渲染上的区别:

CreatorPrimer|2.x的渲染初探_第1张图片
1.x的逻辑树与渲染树

从上图可以看到,引擎中维护了一颗场景逻辑树(左边),需要时刻与渲染树(右边)进行数据同步。sgNode仅仅是为了同步Node的所有transform信息和渲染组件的状态信息,这造成了巨大的浪费。

CreatorPrimer|2.x的渲染初探_第2张图片
2.x中的节点树

在2.x使用了全新的设计,引擎内部只有一颗逻辑树,场景下包含节点,节点下挂载有渲染组件,简单清晰。因此在2.x中节点与组件对象中,不再有_sgNode这个变量了,使用时需要注意。

渲染流程

我们通过节点的transform为例对比1.x与2.x的渲染流程,请看下图:

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

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

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

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

渲染框架

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

CreatorPrimer|2.x的渲染初探_第5张图片
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用极少的代码就能实现卷轴地图、缩略小地图、节点跟随、动态调整渲染顺序等复杂功能。

渲染数据

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

CreatorPrimer|2.x的渲染初探_第6张图片
Renderer数据结构
  1. 数据部分:输入组装器,组装了VertexBuffer(顶点缓存)和IndexBuffer(索引缓存)
  2. 表现部分:主要是增加了Material(材质系统)相关API,可以方便地控制Shader的defines、Uniforms,同时可以在不同帧切换使用不同的Shader。

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

3. 小结

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

你可能感兴趣的:(CreatorPrimer|2.x的渲染初探)