Cocos2d-x 3.x 图形学渲染系列二十五

笔者介绍：姜雪伟，IT公司技术合伙人，IT高级讲师，CSDN社区专家，特邀编辑，畅销书作者，国家专利发明人;已出版书籍：《手把手教你架构3D游戏引擎》电子工业出版社和《Unity3D实战核心技术详解》电子工业出版社等。

CSDN视频网址：http://edu.csdn.net/lecturer/144

大年三十，还是忍不住，再写一篇文章吧，作为在猴年的最后一篇文章。。。。

游戏中的角色包括玩家、NPC、怪物等都具有骨骼动画，对于成熟的引擎也是需要支持骨骼动画的，骨骼动画是在模型的基础上经过max工具调试出来的，在程序中只需要提供播放骨骼动画的接口即可，掌握骨骼动画的原理对于评判一个程序员是否精通引擎的必要条件，也是一个重要的评判指标。本章重点给读者介绍Cocos2d-x的骨骼动画，虽然该引擎对骨骼动画的处理不是很成熟，但简单的骨骼动画还是可以实现的。本章会把Cocos2d-x引擎中关于动画的处理的缺点和优点都会给读者分享。

骨骼动画是通过蒙皮实现的，Cocos2d-x引擎有自己的demo实现，如果开发者掌握骨骼动画，必须自己要尝试着做一下。Cocos2d-x引擎还是有很多坑的，尤其是在播放动画方面。后面会给读者介绍到，下面就以自己做的带有骨骼动画的宇航员模型为例给读者介绍。因为c3t是json文件格式，相对读者能够看到其文件内容，更有助于读者理解。在这里只截取了骨骼动画数据展示如下所示：

"animations": [
		{
			"id": "Take 001", 
			"length":  0.666000, 
			"bones": [
				{
					"boneId": "Box002", 
					"keyframes": [
						{
							"keytime":  0.000000, 
							"rotation": [-0.707107, -0.000000,  0.000000,  0.707107], 
							"scale": [ 1.000000,  1.000000,  1.000000], 
							"translation": [ 0.000000,  36.417324, -74.842522]
						}, 
						{
							"keytime":  0.050050, 
							"rotation": [-0.696203, -0.000000,  0.000000,  0.717845]
						}, 
						{
							"keytime":  0.100100, 
							"rotation": [-0.665764, -0.000000,  0.000000,  0.746162]
						}, 
						{
							"keytime":  0.150150, 
							"rotation": [-0.617108, -0.000000,  0.000000,  0.786878]
						}, 
						{
							"keytime":  0.200200, 
							"rotation": [-0.556456, -0.000000,  0.000000,  0.830877]
						}, 
						{
							"keytime":  0.250250, 
							"rotation": [-0.486915, -0.000000,  0.000000,  0.873449]
						}, 
						{
							"keytime":  0.300300, 
							"rotation": [-0.414019, -0.000000,  0.000000,  0.910268]
						}, 
						{
							"keytime":  0.350350, 
							"rotation": [-0.342342, -0.000000,  0.000000,  0.939575]
						}, 
						{
							"keytime":  0.400400, 
							"rotation": [-0.283450, -0.000000,  0.000000,  0.958987]
						}, 
						{
							"keytime":  0.450450, 
							"rotation": [-0.241560, -0.000000,  0.000000,  0.970386]
						}, 
						{
							"keytime":  0.500501, 
							"rotation": [-0.226392, -0.000000,  0.000000,  0.974036]
						}, 
						{
							"keytime":  0.550551, 
							"rotation": [-0.240981, -0.000000,  0.000000,  0.970530]
						}, 
						{
							"keytime":  0.600601, 
							"rotation": [-0.282420, -0.000000,  0.000000,  0.959291]
						}, 
						{
							"keytime":  0.650651, 
							"rotation": [-0.341023, -0.000000,  0.000000,  0.940055]
						}, 
						{
							"keytime":  0.700701, 
							"rotation": [-0.410364, -0.000000,  0.000000,  0.911922]
						}, 
						{
							"keytime":  0.750751, 
							"rotation": [-0.485455, -0.000000,  0.000000,  0.874261]
						}, 
						{
							"keytime":  0.800801, 
							"rotation": [-0.555123, -0.000000,  0.000000,  0.831769]
						}, 
						{
							"keytime":  0.850851, 
							"rotation": [-0.616001, -0.000000,  0.000000,  0.787745]
						}, 
						{
							"keytime":  0.900901, 
							"rotation": [-0.664969, -0.000000,  0.000000,  0.746871]
						}, 
						{
							"keytime":  0.950951, 
							"rotation": [-0.695771, -0.000000,  0.000000,  0.718264]
						}, 
						{
							"keytime":  1.000000, 
							"rotation": [-0.707102, -0.000000,  0.000000,  0.707111], 
							"scale": [ 1.000000,  1.000000,  1.000000], 
							"translation": [ 0.000000,  36.417324, -74.842522]
						}
					]
				}
			]
		}
	]

在上述文件中id表示的是骨骼动画的名字，bone表示的是动作，在bone项里面包含keytime帧动画时间，rotation旋转的角度，scale缩放大小，translation表示的骨骼转换的起始位置和最终转换的位置。程序的作用就是加载读取该模型文件，程序加载模型文件，需要在程序中定义相应的结构体，定义结构体主要是用于存放模型信息对应项，Cocos2d-x引擎已定义的结构体给介绍如下：

//模型顶点属性
struct MeshVertexAttrib
{
	//描述该属性所需要的元素个数，比如描述一个Vec3的位置信息，需要x、y、z 3个变量
	GLint size;
	//元素的类型如GL_FLOAT
	GLenum type;
	//描述该属性类型的值，使用的值是GLProgram类的枚举，例如	GLProgram::VERTEX_ATTRIB_POSITION
	int  vertexAttrib;
	//存储该属性所需要的字节数，等于size * sizeof(type)
	int attribSizeBytes;
};
再介绍一下模型蒙皮数据结构体如下所示：
struct MeshData
{
	//模型的顶点索引数组
typedefstd::vector<unsignedshort> IndexArray;
	//模型的顶点数组
std::vector<float> vertex;
	//模型的顶点数量
int vertexSizeInFloat;
//子模型的索引
std::vector<IndexArray> subMeshIndices;
//子模型的名字ID
std::vector<std::string> subMeshIds; //子网格名字 (从版本3.3开始)
//模型的碰撞盒
	std::vector<AABB> subMeshAABB;
int numIndex;
//模型的顶点属性信息
	std::vector<MeshVertexAttrib> attribs;
int attribCount;
｝
以c3t文件为例，先介绍模型相关文件属性：
"version": "0.7", 
	"id": "", 
	"meshes": [
		{
			"attributes": [{
					"size":   3, 
					"type": "GL_FLOAT", 
					"attribute": "VERTEX_ATTRIB_POSITION"
				}, {
					"size":   3, 
					"type": "GL_FLOAT", 
					"attribute": "VERTEX_ATTRIB_NORMAL"
				}, {
					"size":   3, 
					"type": "GL_FLOAT", 
					"attribute": "VERTEX_ATTRIB_TANGENT"
				}, {
					"size":   3, 
					"type": "GL_FLOAT", 
					"attribute": "VERTEX_ATTRIB_BINORMAL"
				}, {
					"size":   2, 
					"type": "GL_FLOAT", 
					"attribute": "VERTEX_ATTRIB_TEX_COORD"
				}],

attribs属性数组分别代表：

（1）顶点在模型坐标系下的位置信息（VERTEX_ATTRIB_POSITION）

（2）顶点的法线（VERTEX_ATTRIB_NORMAL）

（3）顶点的纹理坐标（VERTEX_ATTRIB_TEX_COOD）

（4）作用于该顶点的某骨骼，对该顶点最终位置的权重（VERTEX_ATTRIB_BLEND_WEIGHT）

（5）影响该顶点的骨骼在骨骼数组中的索引（VERTEX_ATTRIB_BLEND_INDEX）

   接下来介绍模型的蒙皮骨骼信息，引擎提供了结构体如下所示：

struct SkinData
{
//影响到模型蒙皮的骨骼名字数组，skinBone的数组
std::vector<std::string> skinBoneNames; 
//未影响到模型蒙皮的骨骼名字数组，nodeBone的数组
std::vector<std::string> nodeBoneNames; 
//从对应的skinBone坐标系到模型坐标系变换的逆变换，可实现将该骨骼影响的蒙	皮顶点从模型坐标系的坐标，转换至骨骼坐标系的坐标
std::vector<Mat4>        inverseBindPoseMatrices; 
//skinBone到其父骨骼坐标的初始矩阵
std::vector<Mat4>        skinBoneOriginMatrices; 
//nodeBone到其父骨骼坐标的初始矩阵
std::vector<Mat4>        nodeBoneOriginMatrices; 
//所有骨骼与其子骨骼索引的map，值得说明的是这个索引是对skinBoneNames	和nodeBoneNames两个数组而言的。
std::map<int, std::vector<int>> boneChild;
//根骨骼索引，同样是相对两个数组而言的
	introotBoneIndex;
｝
//材质数据结构体
struct MaterialData
{
	std::map<int, std::string> texturePaths; //子网格id和纹理路径
	void resetData()
    {
		texturePaths.clear();
    }
};

骨骼动画的运动是通过矩阵之间的变换实现的，在Bone3D类中实现了骨骼矩阵的更新，函数如下所示：

void Bone3D::updateJointMatrix(Vec4* matrixPalette)
{
    {
	static Mat4 t;
	//得到需要的矩阵
	Mat4::multiply(_world, getInverseBindPose(), &t);
	//将矩阵最后一行去掉，得到4 ＊ 3的Vec4向量数组
	 matrixPalette[0].set(t.m[0], t.m[4], t.m[8], t.m[12]);
	 matrixPalette[1].set(t.m[1], t.m[5], t.m[9], t.m[13]);
	 matrixPalette[2].set(t.m[2], t.m[6], t.m[10], t.m[14]);
    }
}

updateJointMatrix函数主要是告诉读者，模型的骨骼在运动时都是通过矩阵运算得到的，骨骼数量越多，它们消耗CPU越多，因此为了优化骨骼运算，现在的处理方式都是将运算移到GPU中计算。

下面构建渲染指令，传递矩阵数据变换到GPU中进行计算，把骨骼动画处理的Shader文件给读者展示如下：

vec4 getPosition()
{
	//对该顶点产生作用的第一块骨骼所占比重
	float blendWeight = a_blendWeight[0];
	
	int matrixIndex = int (a_blendIndex[0]) * 3;
	//对传递进来的matrixPalette矩阵乘以骨骼的权重
	vec4 matrixPalette1 = u_matrixPalette[matrixIndex] * blendWeight;
	vec4 matrixPalette2 = u_matrixPalette[matrixIndex + 1] * blendWeight;
	vec4 matrixPalette3 = u_matrixPalette[matrixIndex + 2] * blendWeight;


    	blendWeight = a_blendWeight[1];
if (blendWeight >0.0)
{
		//若还有别的骨骼对该顶点产生影响，则进行混合
        matrixIndex = int(a_blendIndex[1]) * 3;
        matrixPalette1 += u_matrixPalette[matrixIndex] * blendWeight;
        matrixPalette2 += u_matrixPalette[matrixIndex + 1] * blendWeight;
        matrixPalette3 += u_matrixPalette[matrixIndex + 2] * blendWeight;

        blendWeight = a_blendWeight[2];
	if (blendWeight >0.0)
        {
            matrixIndex = int(a_blendIndex[2]) * 3;
            matrixPalette1 += u_matrixPalette[matrixIndex] * blendWeight;
            matrixPalette2 += u_matrixPalette[matrixIndex + 1] * blendWeight;
            matrixPalette3 += u_matrixPalette[matrixIndex + 2] * blendWeight;

            blendWeight = a_blendWeight[3];
	    if (blendWeight >0.0)
            {
                matrixIndex = int(a_blendIndex[3]) * 3;
                matrixPalette1 += u_matrixPalette[matrixIndex] * blendWeight;
                matrixPalette2 += u_matrixPalette[matrixIndex + 1] * blendWeight;
                matrixPalette3 += u_matrixPalette[matrixIndex + 2] * blendWeight;
            }
        }
    }

    vec4 _skinnedPosition;
    vec4 postion = vec4(a_position, 1.0);
    //使用这个混合后的矩阵，对顶点进行变换，得到该顶点在模型坐标系下的坐标
    _skinnedPosition.x = dot(postion, matrixPalette1);
    _skinnedPosition.y = dot(postion, matrixPalette2);
    _skinnedPosition.z = dot(postion, matrixPalette3);
    _skinnedPosition.w = postion.w;

	return _skinnedPosition;
}
void main()
{
	//得到顶点在模型坐标系下的坐标
	vec4 position = getPosition();
	//使用MVP矩阵进行变换的到最终坐标
	gl_Position = CC_MVPMatrix * position;

    	TextureCoordOut = a_texCoord;
   	TextureCoordOut.y = 1.0 - TextureCoordOut.y;
}

骨骼动画在GPU中根据骨骼的权重进行矩阵运算，这样也可以保证骨骼动画与动画之间的过渡是平滑的，保证了不同的骨骼动画之间的切换是顺畅的。在美术制作模型时，要按照一定的规则制作，从而保证导出的模型可以在Cocos2d-x引擎中加载，接下来给读者介绍关于模型的制作。