CocosCreator渲染流程

渲染流程

CCDirector.js中的mainLoop

renderer.render(this._scene, deltaTime);
这句话是渲染的关键 调用了
Creator\2.4.4\resources\engine\cocos2d\core\renderer中的index.js的render方法

Index.js中的render

_flow是来自initWebGL方法或者是initCanvas方法中
this._flow = cc.RenderFlow;
//随后就调用了init方法
this._flow.init(this._handle, this._forward);

  render (ecScene, dt) {
        this.device.resetDrawCalls();
        if (ecScene) {
            //关键调用了this._flow.render方法
            this._flow.render(ecScene, dt);
            this.drawCalls = this.device.getDrawCalls();
        }
    }

cc.RenderFlow的render

RenderFlow.init = function (batcher, forwardRenderer) {
    _batcher = batcher;
    //这里是拿到_forward的地方从外部传递过来
    _forward = forwardRenderer;

    flows[0] = EMPTY_FLOW;
    for (let i = 1; i < FINAL; i++) {
        flows[i] = new RenderFlow();
    }
};

RenderFlow.render = function (rootNode, dt) {
    _batcher.reset();
    _batcher.walking = true;

    RenderFlow.visitRootNode(rootNode);

    _batcher.terminate();
    _batcher.walking = false;
    //调用了_forward.rander方法
    _forward.render(_batcher._renderScene, dt);
}

ForwardRenderer的render

这里的ForwardRenderer继承了BaseRenderer

export default class ForwardRenderer extends BaseRenderer{
   constructor(device, builtin) {
          this._registerStage('shadowcast', this._shadowStage.bind(this));
          //这里调用了父类注册的方法 方便作为回调执行
          this._registerStage('opaque', this._opaqueStage.bind(this));
    }

    render(scene, dt) {
          //截取一部分
         for (let i = 0; i < this._viewPools.length; ++i) {
             let view = this._viewPools.data[i];
             //这里是调用了父类的_render方法
             this._render(view, scene);
        }
    }

    _opaqueStage(view, items) {
      //截取一部分
      this._drawItems(view, items);
    }

  _drawItems(view, items) {
       //截取一部分 
       //这里调用了父类BaseRenderer的_draw方法
       this._draw(item);
  }
}

BaseRenderer

  _registerStage (name, fn) {
    this._stage2fn[name] = fn;
  }

  _render (view, scene) {
        //截取一部分
        for (let i = 0; i < _stageInfos.length; ++i) {
          let info = _stageInfos.data[i];
          let fn = this._stage2fn[info.stage];
          //调用了回调调用了子类ForwardRenderer中的（shadowcast,opaque,transparent）方法
          fn(view, info.items);
        }
  }

  _draw(item) {
      //截取一部分
      device.draw(ia._start, count);
  }

Device

  draw(base, count) {
      //...忽略  以上就是整个渲染调用流程
  }