肥仔教程网

下面的文件是在最小gltf文件基础上增加了动画，表示的是上图所示的一个旋转的三角形，针对动画部分添加了注释

{
  "scene": 0,
  "scenes" : [
    {
      "nodes" : [ 0 ]
    }
  ],
  
  "nodes" : [
    {
      "mesh" : 0,
      // rotation属性是使用4元数表示的旋转,[0,0,0,1]表示旋转角度为0°，即没有任何旋转，这里不对四元数做相关说明，后续文章再单独介绍
      "rotation" : [ 0.0, 0.0, 0.0, 1.0 ]
    }
  ],
  
  "meshes" : [
    {
      "primitives" : [ {
        "attributes" : {
          "POSITION" : 1
        },
        "indices" : 0
      } ]
    }
  ],
  //该属性定义动画内容
  "animations": [
    {
      //表示动画数据来源
      "samplers" : [
        {
          //input对应accessors，2表示第2个序列数据，这个数据对应5个时间节点
          "input" : 2,
          //动画数据只是关键帧，interpolation定义了中间过渡动画插值方法，LINEAR表示采用线性插值
          "interpolation" : "LINEAR",
          //input对应accessors，3表示第3个序列数据，这个数据对应5个四元数表示的旋转
          "output" : 3
        }
      ],
      //通道，动画可以包含多个通道，每个通道一般都是简单的动画，多个通道组合可以产生复杂的动画效果
      "channels" : [ {
        //对应samplers[0]
        "sampler" : 0,
        //指定动画的目标对应
        "target" : {
          //对应nodes[0]
          "node" : 0,
          //这里表示nodes[0]中的rotation属性应该被执行
          "path" : "rotation"
        }
      } ]
    }
  ],

  "buffers" : [
    {
      "uri" : "data:application/octet-stream;base64,AAABAAIAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAAACAPwAAAAA=",
      "byteLength" : 44
    },
    //buffers[1]表示的旋转相关的数据，响应的解码后的十六进制见后面截图，共100个字节
    {
      "uri" : "data:application/octet-stream;base64,AAAAAAAAgD4AAAA/AABAPwAAgD8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAD0/TQ/9P00PwAAAAAAAAAAAACAPwAAAAAAAAAAAAAAAPT9ND/0/TS/AAAAAAAAAAAAAAAAAACAPw==",
      "byteLength" : 100
    }
  ],
  "bufferViews" : [
    {
      "buffer" : 0,
      "byteOffset" : 0,
      "byteLength" : 6,
      "target" : 34963
    },
    {
      "buffer" : 0,
      "byteOffset" : 8,
      "byteLength" : 36,
      "target" : 34962
    },
    // 对应buffers[1]，字节长度为100
    {
      "buffer" : 1,
      "byteOffset" : 0,
      "byteLength" : 100
    }
  ],
  "accessors" : [
    {
      "bufferView" : 0,
      "byteOffset" : 0,
      "componentType" : 5123,
      "count" : 3,
      "type" : "SCALAR",
      "max" : [ 2 ],
      "min" : [ 0 ]
    },
    {
      "bufferView" : 1,
      "byteOffset" : 0,
      "componentType" : 5126,
      "count" : 3,
      "type" : "VEC3",
      "max" : [ 1.0, 1.0, 0.0 ],
      "min" : [ 0.0, 0.0, 0.0 ]
    },    
    {
	  //对应bufferViews[2]
      "bufferView" : 2,
      //起始偏移量为0
      "byteOffset" : 0,
      //5126表示数据类型为FLOAT，占用4个字节
      "componentType" : 5126,
      //有5组数据，共占用5x4=20字节，每个数据表示一个时间点
      "count" : 5,
      //数据为标量
      "type" : "SCALAR",
      "max" : [ 1.0 ],
      "min" : [ 0.0 ]
    },    
    {
      //对应bufferViews[2]
      "bufferView" : 2,
      //起始偏移量为20
      "byteOffset" : 20,
      //5126表示数据类型为FLOAT，占用4个字节
      "componentType" : 5126,
      //有5组数据，共占用5x(4x4)=80字节，每个数据对应一个四元数，表示对应时间点旋转的角度
      "count" : 5,
      //数据为VEC4向量，使用4元数来表示旋转
      "type" : "VEC4",
      "max" : [ 0.0, 0.0, 1.0, 1.0 ],
      "min" : [ 0.0, 0.0, 0.0, -0.707 ]
    }
  ],
  
  "asset" : {
    "version" : "2.0"
  }
  
}

buffers[1][uri]base64解码后的十六进制表示，其中每四个字节表示一个浮点数，通过使用在线工具可以将它们转换为浮点数，由此得到一组旋转动画关键帧数据