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

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

---

全部章节链接：

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

二 ： 渲染流程详解

三： RenderFlow 的运行逻辑

四： Assembler 的作用

五： ModelBatcher 数据合批

六： 材质系统

七： ForwardRender

---

六 材质系统

官方对材质系统的介绍较为详细，所以本文不详细介绍，只做大概概括。为了解详细内容可见文末的官方文档 相关链接：材质系统。

材质系统控制着每个模型最终的着色流程与顺序, 在引擎内相关类间结构如下:

类的关联图

6.1 EffectAsset

在编辑器导入 EffectAsset 时, 会对用户书写的内容做一次预处理, 替换 GL 字符串为管线内常量, 提取 shader 信息, 转换 shader 版本等.

CCEffectAsset 组件的 onLoad 中，会将shader信息注册到 cc.renderer._forward._programLib (类型： ProgramLib )中，代码如下。

let lib = cc.renderer._forward._programLib; 
for (let i = 0; i < this.shaders.length; i++) { 
  lib.define(this.shaders[i]); 
}

6.2 Material

Material 资源可以看成是 EffectAsset 在场景中的资源实例, 它本身的可配置参数有:

• effectAsset 或 effectName: effect 资源引用, 使用哪个 EffectAsset 所描述的流程进行渲染? (必备)
• technique: 使用 EffectAsset 中的第几个 technique? (默认为 0 号)
• defines: 宏定义列表, 需要开启哪些宏定义? (默认全部关闭)
• states: 管线状态重载列表, 对渲染管线状态 (深度模板透明混合等) 有哪些重载? (默认与 effect 声明一致)

6.3 Effect 语法

具体详细内容可见文末相关链接：材质系统 下的详细内容。

---

相关链接

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