全文共5000+字，分为8个章节，由本人历时一周整理而来。由于篇幅问题，将本文分为8个章节分开发布。全文 （不） 详细描述了cocoscreator 引擎的2.40版本中，web平台的js部分引擎的渲染流程。请将文章配合源码一起食用！

​由于我尚在学习引擎源码中，文章可能有不正确的部分，所以我会不断更新内容。如有错误或补充，请留言交流！

---

全部章节链接：

一：渲染流程中用到的核心类

二 ： 渲染流程详解

三： RenderFlow 的运行逻辑

四： Assembler 的作用

五： ModelBatcher 数据合批

六： 材质系统

七： ForwardRender

---

五 ModelBatcher 数据合批

ModelBatcher : 用以管理渲染数据model，渲染批次合并，从而减少drawcall，提升性能。

var ModelBatcher = function (device, renderScene) {
    this._renderScene = renderScene;
    this._device = device;
    ... ...
    // buffers
    this._quadBuffer = this.getBuffer('quad', vfmtPosUvColor);
    this._meshBuffer = this.getBuffer('mesh', vfmtPosUvColor);
    this._quadBuffer3D = this.getBuffer('quad', vfmt3D);
    this._meshBuffer3D = this.getBuffer('mesh', vfmt3D);
    ... ...
};

在 ModelBatcher 的初始化中，会持有仅包含渲染相关内容的场景数据： _renderScene，以及4个渲染数据 Buffer。2D图片渲染用到的就是其中的 _meshBuffer 。

5.1 ModelBatcher 的 _renderScene

class Scene {
  constructor(app) {
    this._lights = new FixedArray(16);
    this._models = new FixedArray(16);
    this._cameras = new FixedArray(16);
    this._debugCamera = null;
    this._app = app;

     this._views = [];
  }
  ... ... 
}

ModelBatcher 中的 _renderScene 的类型是定义于 cocos2d\renderer\scene\scene.js 的Scene类。所有渲染批次数据都会保存到 _models 数组内，_lights 是所有灯光，_cameras 是所有的摄像机，这些暂时不具体了解。
RenderScene 中的数据会在 ForwardRender 中，将数据渲染到屏幕的过程中使用，具体内容在 ForwardRender 的详解中细讲。

5.2 ModelBatcher 与 Model

 // CCRenderComponent 中的 _checkBatch 检测合批方法
 _checkBacth (renderer, cullingMask) {
        let material = this._materials[0];
        if ((material && material.getHash() !== renderer.material.getHash()) || 
            renderer.cullingMask !== cullingMask) {
            renderer._flush();
    
            renderer.node = material.getDefine('CC_USE_MODEL') ? this.node : renderer._dummyNode;
            renderer.material = material;
            renderer.cullingMask = cullingMask;
        }
    }

在渲染流程中，节点的遍历方式为深度优先遍历。在 CCRenderComponent 的 _checkBatch 检测合批方法中，如果发现2个使用的材质的hash值不同，会调用_flush方法创建一个新的渲染批次数据 Model.

 // ModelBatcher 的 _flush 方法
 _flush () {
        ... ...
        // Generate ia
        let ia = this._iaPool.add();
        ia._vertexBuffer = buffer._vb;
        ia._indexBuffer = buffer._ib;
        ia._start = buffer.indiceStart;
        ia._count = indiceCount;
        
        // Generate model
        let model = this._modelPool.add();
        this._batchedModels.push(model);
        model.sortKey = this._sortKey++;
        model._cullingMask = this.cullingMask;
        model.setNode(this.node);
        model.setEffect(effect);
        model.setInputAssembler(ia);
        
        this._renderScene.addModel(model);
        buffer.forwardIndiceStartToOffset();
    },

ModelBatcher 调用 _flush 方法，生成一个新的 Model 数据，并且加入了_renderScene 中。一个Model 数据就是一个渲染批次，所以Model 数据越多，drawcall 越多，这也就导致背包等有多个item的应用场景下，导致卡顿。
Model 的定义如下代码片段，其中需要重点了解的就是 _inputAssembler 变量。在 _flash 方法中看到，model.setInputAssembler(ia) 方法设置了 _inputAssembler 。ia 就是InpputAssembler类型的变量，且所有参数也在上面初始化了。需要注意到：
ia._vertexBuffer 是 this._meshBuffer._vb 的引用。
ia._indexBuffer 是 this._meshBuffer._ib 的引用。
ia._start是顶点索引的开始位置。
ia._count是顶点索引的个数。

// Model 数据的结构
export default class Model {
 constructor() {
    this._type = 'default';
    this._poolID = -1; // 对象池id
    this._node = null; // 节点
    this._inputAssembler = null; // InputAssembler 包含渲染数据
    this._effect = null; // Effect shader
    this._viewID = -1;
    this._cameraID = -1;
    this._userKey = -1;
    this._castShadow = false;
    this._boundingShape = null;
  }
  ......
}

在 RenderFlow 的 _render 方法中， _checkBacth 合批完成后，会调用 fillBuffers 填充数据，将Assembler._renderData 中的数据填充到 buffer 中。以Assembler2D 的 fillBuffers 为例，代码如下。

  fillBuffers (comp, renderer) {
        if (renderer.worldMatDirty) {
            this.updateWorldVerts(comp);
        }
        let renderData = this._renderData;
        let vData = renderData.vDatas[0];
        let iData = renderData.iDatas[0];

        let buffer = this.getBuffer(renderer);
        let offsetInfo = buffer.request(this.verticesCount, this.indicesCount);
        // fill vertices
        let vertexOffset = offsetInfo.byteOffset >> 2,
            vbuf = buffer._vData;

        if (vData.length + vertexOffset > vbuf.length) {
            vbuf.set(vData.subarray(0, vbuf.length - vertexOffset), vertexOffset);
        } else {
            vbuf.set(vData, vertexOffset);
        }

        // fill indices
        let ibuf = buffer._iData,
            indiceOffset = offsetInfo.indiceOffset,
            vertexId = offsetInfo.vertexOffset;
        for (let i = 0, l = iData.length; i < l; i++) {
            ibuf[indiceOffset++] = vertexId + iData[i];
        }
    }

在下面的 getBuffer 代码中发现，其实所有的 Assembler2D 的数据都会填充到 ModelBatcher 里的 MeshBuffer 中。所以其实MeshBuffer 中保存着所有的顶点数据，包括不同的纹理。Model中保存对 MeshBuffer 的引用和该渲染批次用的顶点数据的下标。

  getBuffer () {
        return cc.renderer._handle._meshBuffer;
    }

---

相关链接

1. 自定义渲染：https://docs.cocos.com/creator/manual/zh/advanced-topics/custom-render.html#%E8%87%AA%E5%AE%9A%E4%B9%89-assembler

2. RenderFlow的性能优化：http://docs.cocos.com/creator/manual/zh/advanced-topics/render-flow.html#

3. 自定义渲染合批之自定义顶点格式： https://forum.cocos.org/t/demo/95087

4. 自定义RenderFlow，处理背包等场景下drawcall过多：https://forum.cocos.org/t/ui/80026

5. 材质系统：https://docs.cocos.com/creator3d/manual/zh/material-system/overview.html