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

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

全部章节链接：

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

二 ： 渲染流程详解

三： RenderFlow 的运行逻辑

四： Assembler 的作用

五： ModelBatcher 数据合批

六： 材质系统

七： ForwardRender

二 渲染流程详解

2.1 初始入口

渲染流程会在每帧调用，所以可以在 CCDirector 的 mainLoop 中找到渲染的入口：

// Render
this.emit(cc.Director.EVENT_BEFORE_DRAW);
renderer.render(this._scene, this._deltaTime);

// After draw
this.emit(cc.Director.EVENT_AFTER_DRAW);

renderer的定义在 \cocos2d\core\renderer\index.js 中。

2.2 cc.renderer.render()

  render (ecScene, dt) {
        this.device.resetDrawCalls();
        if (ecScene) {
            // walk entity component scene to generate models
            this._flow.render(ecScene, dt);
            this.drawCalls = this.device.getDrawCalls();
        }
    },

关于 _flow, 在 cc.renderer 的 initWebGL 和 initCanvas 中可以看到：

this._flow = cc.RenderFlow;

所以下一步进入到 cc.RenderFlow.render()。

2.3 cc.RenderFlow.render()

render方法定义在 cocos2d\core\renderer\render-flow.js 中。 这10行代码包含了渲染的整个流程：1.遍历节点获取数据，2.渲染到屏幕。代码如下

RenderFlow.render = function (rootNode, dt) {
    _batcher.reset();
    _batcher.walking = true;
    // 遍历渲染场景节点的所有子节点
    RenderFlow.visitRootNode(rootNode);

    _batcher.terminate();
    _batcher.walking = false;
    // 将batcher中的渲染数据，渲染到屏幕
    _forward.render(_batcher._renderScene, dt);
};

这个方法里有_batcher 和 _forward 2个变量， 是在方法 RenderFlow.init 中初始化。而 RenderFlow.init 也是在在 cc.renderer 的 initWebGL 和 initCanvas 中调用，代码如下。

this._forward = new ForwardRenderer(this.device, builtins);
this._handle = new ModelBatcher(this.device, this.scene);
// 调用了 cc.RenderFlow.init
this._flow.init(this._handle, this._forward);

由此可知，变量名字和变量类型有关联性，方便我们能快速了解各个变量的类型：
_batcher 类型是 ModelBatcher，用以渲染合批。
_forward 类型是 ForwardRenderer，用以渲染数据到设备的屏幕中。

搞清楚各个变量的定义类型后，下面会逐步了解，如何获取到各个节点和组件上需要渲染的数据。

相关链接

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