3D骨骼动画是实现较为复杂3D场景的重要技术，Babylon.js引擎内置了对骨骼动画的支持，但Babylon.js使用的骨骼动画的模型多是从3DsMax、Blender等3D建模工具转换而来，骨骼动画的具体生成方式被透明化。本文从babylon格式的3D模型文件入手，对骨骼动画数据的生成方式进行具体分析，并尝试建立一个简易的3D骨骼动画生成工具。

一、模型文件分析

我们从Babylon.js官方网站上的一个骨骼动画示例开始分析：

(示例地址：https://www.babylonjs-playground.com/frame.html#DMLMIP#1)

下载示例中的3D模型dummy3.babylon文件后，在JSON工具中展开：

(使用的JSON工具是bejson在线工具，地址：https://www.bejson.com/jsoneditoronline/)

可以看到，这个模型文件中包含了作者信息、背景色、雾效、物理效果、相机、光照、网格、声音、材质、粒子系统、光晕效果、阴影效果、骨骼、行为响应、额外信息、异步碰撞运算标志等场景信息。(也许称之为“场景文件”更合适)

我们主要关注其中与骨骼动画有关的网格数据和骨骼数据，展开网格数据：

其中，positions保存每个顶点在网格自身坐标系中的位置(数组中的每三个元素对应一个顶点)，normals保存每个顶点对应的法线方向，uvs是顶点的纹理坐标，indices是顶点的绘制索引。

matricesIndices中保存每一个顶点属于哪一块骨骼，在这个模型里matricesIndices数组每个元素都是数字索引，但是从Babylon.js的这一段代码可以看出：

1 if(parsedGeometry.matricesIndices) {2 if (!parsedGeometry.matricesIndices._isExpanded) {3 var floatIndices =[];4 for (var i = 0; i < parsedGeometry.matricesIndices.length; i++) {5 var matricesIndex =parsedGeometry.matricesIndices[i];6 floatIndices.push(matricesIndex & 0x000000FF);7 floatIndices.push((matricesIndex & 0x0000FF00) >> 8);8 floatIndices.push((matricesIndex & 0x00FF0000) >> 16);9 floatIndices.push(matricesIndex >> 24);10 }11 mesh.setVerticesData(BABYLON.VertexBuffer.MatricesIndicesKind, floatIndices, parsedGeometry.matricesIndices._updatable);12 }13 else{14 deleteparsedGeometry.matricesIndices._isExpanded;15 mesh.setVerticesData(BABYLON.VertexBuffer.MatricesIndicesKind, parsedGeometry.matricesIndices, parsedGeometry.matricesIndices._updatable);16 }17 }18 if(parsedGeometry.matricesIndicesExtra) {19 if (!parsedGeometry.matricesIndicesExtra._isExpanded) {20 var floatIndices =[];21 for (var i = 0; i < parsedGeometry.matricesIndicesExtra.length; i++) {22 var matricesIndex =parsedGeometry.matricesIndicesExtra[i];23 floatIndices.push(matricesIndex & 0x000000FF);24 floatIndices.push((matricesIndex & 0x0000FF00) >> 8);25 floatIndices.push((matricesIndex & 0x00FF0000) >> 16);26 floatIndices.push(matricesIndex >> 24);27 }28 mesh.setVerticesData(BABYLON.VertexBuffer.MatricesIndicesExtraKind, floatIndices, parsedGeometry.matricesIndicesExtra._updatable);29 }30 else{31 deleteparsedGeometry.matricesIndices._isExpanded;32 mesh.setVerticesData(BABYLON.VertexBuffer.MatricesIndicesExtraKind, parsedGeometry.matricesIndicesExtra, parsedGeometry.matricesIndicesExtra._updatable);33 }34 }

View Code

数组的一个元素也可以保存四个骨骼索引，并且可以使用扩展模式使一个顶点同时和八块骨骼关联。

matricesWeights数组保存每个顶点默认的四块骨骼对顶点姿态影响的权重。

展开骨骼数据：

可以看出同一个场景文件中可以包含多套不同id的骨骼，通过网格的skeletonId属性可以标示使用哪一套骨骼。网格的ranges属性里保存不同动作对应的动画帧数范围，比如第127帧到148帧动画对应机器人奔跑的动作。

展开一个骨骼元素：

经过试验得知，网格的matricesIndices属性中应该保存bones数组的自然索引，而不是bone的index元素。

bone的parentBoneIndex属性表示这个骨骼的“父骨骼”的索引，parentBoneIndex为-1表示这块骨头没有父骨骼(经过试验，Babylon.js只支持一个parentBoneIndex为-1的“根骨骼”，且根骨骼在骨骼数组中的位置应先于所有其他网格，所以可以添加一个不包含动画变化和顶点关联的“空骨骼”作为唯一的根骨骼，以避免出现多个根骨骼)

matrix属性是和骨头关联的顶点在进行了一系列变化之后，最终附加的一个在骨骼当前坐标系中的姿态变化矩阵(？)。

每一块骨骼有一个animation属性保存这个骨骼的动画信息，animation中的dataType=3表示这个动画是对矩阵类型的值进行动态变化，framePerSecond=30表示默认每秒播放30帧，keys里保存了每一个关键帧对应的矩阵值：

在关键帧时和这块骨骼关联的顶点会在骨骼的自身坐标系里进行values矩阵所表示的姿态变化，其父骨骼的姿态变化会和它的姿态变化叠加。

可以看出这个动画的每一个帧都是关键帧，这些数据应该是通过动作捕捉技术获取的。

二、生成并导出骨骼模型：

1、html文件：

1

2

3

4

5

最简单元素测试

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24