Cocos Creator 2.3.x渲染流程-源码版

Cocos Creator 升级的2.3.x之后,渲染流程发生了比较大的变化,主要是重构了一些类,属性的位置发生了变化。

首先在engine/cocos2d/core/renderer/index.js中定义了cc.renderer对象,是一个全局对象,里面存放了一些渲染有关的类定义以及一些全局属性如device,核心的是两个属性,一个是_froward一个是_flow。

_flow是一个cc.RenderFlow类(注意:不是实例),cc.RenderFlow定义在engine/cocos2d/core/renderer/render-flow.js中。

在初始化的过程中,会创建RenderFlow的实例,并传入_flow.init方法中

Cocos Creator 2.3.x渲染流程-源码版_第1张图片

注意:_batcher就是传入的RenderFlow的实例

渲染开始:

入口代码在engine/cocos2d/core/renderer/index.js中的render方法:

Cocos Creator 2.3.x渲染流程-源码版_第2张图片

然后进入:

Cocos Creator 2.3.x渲染流程-源码版_第3张图片

流程1:

RenderFlow.visitRootNode(scene);

这句将进入RenderFlow的实例里面的方法调用

在RenderFlow的实例方法中

核心的方法是_updateRenderData用于更新各级渲染对象的顶点信息等

_render方法,用于执行实际的渲染:

Cocos Creator 2.3.x渲染流程-源码版_第4张图片

其中,_renderComponent属性是继承自RenderComponent的对象会指向自己

代码在core/components/CCRenderComponent.js

Cocos Creator 2.3.x渲染流程-源码版_第5张图片

然后是调用_checkBacth方法:

Cocos Creator 2.3.x渲染流程-源码版_第6张图片

该方法用于更新组件的材质,如果材质的hash发生变化,意味着材质更新了,就需要重新设置一些配置,即renderer._flush()

代码在core/renderer/webgl/model-batcher.js下面

Cocos Creator 2.3.x渲染流程-源码版_第7张图片

其中model.setEffect(effect, this.customProperties);这句代码进入

renderer/scene/model.js下面

Cocos Creator 2.3.x渲染流程-源码版_第8张图片

 

流程2:

_forward.render(_batcher._renderScene, dt);

进入renderer/renderers/forward-renderer.js

Cocos Creator 2.3.x渲染流程-源码版_第9张图片

然后进入renderer/core/base-renderer.js中的_render方法

Cocos Creator 2.3.x渲染流程-源码版_第10张图片

Cocos Creator 2.3.x渲染流程-源码版_第11张图片

进入后调用engine/cocos2d/renderer/renderers/forward-renderer.js 中的_drawItems

Cocos Creator 2.3.x渲染流程-源码版_第12张图片

再进入engine/cocos2d/renderer/core/base-renderer.js中的_draw

Cocos Creator 2.3.x渲染流程-源码版_第13张图片

最后调用device中draw:

Cocos Creator 2.3.x渲染流程-源码版_第14张图片

engine/cocos2d/renderer/gfx/device.js 中的draw

Cocos Creator 2.3.x渲染流程-源码版_第15张图片

你可能感兴趣的:(CocosCreator)