creator源码阅读系列之第一篇源码总览
creator源码阅读系列之第二篇渲染
今天我们继续上一篇讲渲染源码
四. 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
