cocos creator 2.4.0 渲染流程详解（四：Ass
全文共5000+字，分为8个章节，由本人历时一周整理而来。由于篇幅问题，将本文分为8个章节分开发布。全文 （不） 详细描述了cocoscreator 引擎的2.40版本中，web平台的js部分引擎的渲染流程。请将文章配合源码一起食用！
由于我尚在学习引擎源码中，文章可能有不正确的部分，所以我会不断更新内容。如有错误或补充，请留言交流！
全部章节链接：
四 Assembler 的作用
Assembler 由 RenderComponent 持有，并根据 component 的类型不同，持有不同的 Assembler 的子类，用以处理不同的顶点数据。可以先从最简单的普通2d图片的 SimpleSpriteAssembler 入手了解，了解了基础的内容，再看其他较为复杂的assembler，可以循序渐进。
4.1 RenderData 与 顶点数据格式
为了了解 Assembler的工作机制，需要首先了解下顶点数据的格式。Assembler中处理的顶点数据保存在 _renderData 中，所以了解 RenderData 的类型很重要。RenderData 的创建需要顶点数据的格式，顶点格式描述了单个数据体的组成结构。常用的顶点格式是 vfmtPosUvColor ，是 Assembler2D 默认使用的格式。代码定义如下。
var vfmtPosUvColor = new gfx.VertexFormat([
// 节点的世界坐标，占2个float32
{ name: gfx.ATTR_POSITION, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
// 节点的纹理uv坐标，占2个float32
{ name: gfx.ATTR_UV0, type: gfx.ATTR_TYPE_FLOAT32, num: 2 },
// 节点颜色值，占4个uint8 = 1个float32
{ name: gfx.ATTR_COLOR, type: gfx.ATTR_TYPE_UINT8, num: 4, normalize: true },
]);
在shader中的attribute变量定义如下，可以很容易找到与顶点格式的对应关系。
CCProgram vs %{
precision highp float;
#include <cc-global>
#include <cc-local>
// 对应vfmtPosUvColor结构里的3个字段
// 注意这里a_position是vec3类型，但是vfmtPosUvColor对其自定义了2个float长度。
// 所以a_position.z = 0
in vec3 a_position; // gfx.ATTR_POSITION
in vec2 a_uv0; // gfx.ATTR_UV0
in vec4 a_color; // gfx.ATTR_COLOR
void main () { // ... }
}%
再看下 Assembler2D 中定义的数据与顶点格式的关系。
cc.js.addon(Assembler2D.prototype, {
// vfmtPosUvColor 中，单个数据节点占5个float32，为2+2+1.
floatsPerVert: 5,
// 顶点数量：一个四边形4个顶点
verticesCount: 4,
// 顶点索引数量：一个四边形按照对角拆分成2个三角形，2*3 = 6个顶点索引
indicesCount: 6,
// uv值的索引偏移量：位置坐标占2个float，所以uv的值的下标从2开始算
uvOffset: 2,
// color值的索引偏移量：位置2个float，uv2个float，color的值的下标从4开始算
colorOffset: 4,
});
顶点数据的结构具象化表示出来如图:
顶点数据的结构
了解到顶点数据的格式后，更新数据时需要将各种数据填入对应的位置就可以了。
updateVerts 方法： 更新顶点数据，填充 pos.x 和 pos.y。
updateUVs 方法： 更新uv数据，填充 uv.x 和 uv.y。
updateColor 方法： 更新颜色数据，填充color。
4.2 updateVerts 更新顶点数据
在 SimpleSpriteAssembler 的 udpateVerts 方法里，会计算出纹理中上下左右四个边距距离中心的距离，数据长度为4个。
在 SlicedAssembler 的 udpateVerts 方法里，会计算出纹理中上下左右四个边距离距离中心的长度，加上九宫格需要的可拉伸的上下左右的四个长度，数据长度为8个。
其他的Assembler也一样。。。
具体计算时，会涉及到纹理的尺寸与偏移量，节点的大小和缩放量。计算过程可以看各个assembler 中的 udpateVerts 的方法实现。
4.3 updateUVs 更新uv数据
updateUVs (sprite) {
let uv = sprite._spriteFrame.uv;
let uvOffset = this.uvOffset;
let floatsPerVert = this.floatsPerVert;
let verts = this._renderData.vDatas[0];
for (let i = 0; i < 4; i++) {
let srcOffset = i * 2;
let dstOffset = floatsPerVert * i + uvOffset;
verts[dstOffset] = uv[srcOffset];
verts[dstOffset + 1] = uv[srcOffset + 1];
}
}
源码位于 cocos2d\core\renderer\webgl\assemblers\sprite\2d\simple.js 。主要内容是将 cc.SpriteFrame 里的 uv 数据复制到 RenderData.vDatas 里。每张图片4个顶点，每个顶点2个float值(x, y)。
可以看到 SimpleSpriteAssembler 的 updateUvs 方法只是将图片的 uv 未经处理，全部保存下来。如果是未合图的图片，那么获取的uv值就是[0, 1, 1, 1, 0, 0, 1, 0], 代表左上，右上，左下，右下4个顶点。所以图片渲染出来会是完整的原图。那么如果我们想要自定义渲染图片的一部分，就可以在该方法内自定义了。如何自定义可以参考 SlicedAssembler 九宫格填充，TiledAssembler 平铺填充等其他的图片填充格式。
4.4 updateColor 更新颜色数据
updateColor (comp, color) {
let uintVerts = this._renderData.uintVDatas[0];
if (!uintVerts) return;
color = color != null ? color : comp.node.color._val;
let floatsPerVert = this.floatsPerVert;
let colorOffset = this.colorOffset;
for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
uintVerts[i] = color;
}
}
代码位于 cocos2d\core\renderer\assembler-2d.js。将 cc.Node 的 color 属性的值填充到 RenderData.uintVDatas 中。
Tips：RenderData 的 uintVDatas 和 vDatas 指向同一片缓存区域，只是2个代表不同的数据视图，uinitVDatas 以 uinit8 为单元访问，vDatas 以 float32 为单元访问。
4.5 顶点索引数据
上面主要描述了 RenderData 里的 vDatas 的定义格式和填充方式，而 renderData.iDatas 代表的顶点索引数据也需要填入数据。
为什么需要顶点索引数据？因为GPU渲染需要的数据其实是一个个三角形的元片，所以单张矩形图片，需要被切割成2个三角形，这样的话关于顶点的数据数量，就变成了6个。为了减少数据冗余，每个顶点的数据只有一份，但是每个三角形的顶点可以用对应的索引来获取。
顶点索引规则
initQuadIndices(indices) {
// 6个一组（对应1个四边形）生成索引数据
let count = indices.length / 6;
for (let i = 0, idx = 0; i < count; i++) {
let vertextID = i * 4;
indices[idx++] = vertextID;
indices[idx++] = vertextID+1;
indices[idx++] = vertextID+2;
indices[idx++] = vertextID+1;
indices[idx++] = vertextID+3;
indices[idx++] = vertextID+2;
}
}
源码位于 cocos2d\core\renderer\webgl\render-data.js 。
相关链接
-
RenderFlow的性能优化：http://docs.cocos.com/creator/manual/zh/advanced-topics/render-flow.html#
-
自定义渲染合批之自定义顶点格式： https://forum.cocos.org/t/demo/95087
-
自定义RenderFlow，处理背包等场景下drawcall过多：https://forum.cocos.org/t/ui/80026
-
材质系统：https://docs.cocos.com/creator3d/manual/zh/material-system/overview.html
