格式详解_glTF格式详解(示例：一个简单的蒙皮)

本文翻译自：https://github.com/fangcun010/glTF-Tutorials/blob/master/gltfTutorial/gltfTutorial_019_SimpleSkin.md

由于本人才疏学浅，翻译难免有误，望各位不吝惜指正。

---

glTF资源格式支持顶点蒙皮，允许几何数据基于骨骼数据进行变形。这使得场景中的3D对象可以变得更加真实。在glTF资源的JSON文件中可以通过定义skin对象来描述蒙皮信息。

下面给出了一个带有简单蒙皮信息的glTF资源的JSON文件。在本章节，我们会对这一JSON文件进行简单地说明，有关顶点蒙皮的更多信息会在下一章节介绍。

{
  "scenes" : [ {
    "nodes" : [ 0 ]
  } ],
  
  "nodes" : [ {
    "skin" : 0,
    "mesh" : 0,
    "children" : [ 1 ]
  }, {
    "children" : [ 2 ],
    "translation" : [ 0.0, 1.0, 0.0 ]
  }, {
    "rotation" : [ 0.0, 0.0, 0.0, 1.0 ]
  } ],
  
  "meshes" : [ {
    "primitives" : [ {
      "attributes" : {
        "POSITION" : 1,
        "JOINTS_0" : 2,
        "WEIGHTS_0" : 3
      },
      "indices" : 0
    } ]
  } ],

  "skins" : [ {
    "inverseBindMatrices" : 4,
    "joints" : [ 1, 2 ]
  } ],
  
  "animations" : [ {
    "channels" : [ {
      "sampler" : 0,
      "target" : {
        "node" : 2,
        "path" : "rotation"
      }
    } ],
    "samplers" : [ {
      "input" : 5,
      "interpolation" : "LINEAR",
      "output" : 6
    } ]
  } ],
  
  "buffers" : [ {
    "uri" : "data:application/gltf-buffer;base64,AA为了排版而省略，可以使用英文原文中的代码",
    "byteLength" : 168
  }, {
    "uri" : "data:application/gltf-buffer;base64,A//=为了排版而省略，可以使用英文原文中的代码",
    "byteLength" : 320
  }, {
    "uri" : "data:application/gltf-buffer;base64,AA=为了排版而省略，可以使用英文原文中的代码",
    "byteLength" : 128
  }, {
    "uri" : "data:application/gltf-buffer;base64,AA//为了排版而省略，可以使用英文原文中的代码",
    "byteLength" : 240
  } ],
  
  "bufferViews" : [ {
    "buffer" : 0,
    "byteOffset" : 0,
    "byteLength" : 48,
    "target" : 34963
  }, {
    "buffer" : 0,
    "byteOffset" : 48,
    "byteLength" : 120,
    "target" : 34962
  }, {
    "buffer" : 1,
    "byteOffset" : 0,
    "byteLength" : 320,
    "byteStride" : 16
  }, {
    "buffer" : 2,
    "byteOffset" : 0,
    "byteLength" : 128
  }, {
    "buffer" : 3,
    "byteOffset" : 0,
    "byteLength" : 240
  } ],

  "accessors" : [ {
    "bufferView" : 0,
    "byteOffset" : 0,
    "componentType" : 5123,
    "count" : 24,
    "type" : "SCALAR",
    "max" : [ 9 ],
    "min" : [ 0 ]
  }, {
    "bufferView" : 1,
    "byteOffset" : 0,
    "componentType" : 5126,
    "count" : 10,
    "type" : "VEC3",
    "max" : [ 1.0, 2.0, 0.0 ],
    "min" : [ 0.0, 0.0, 0.0 ]
  }, {
    "bufferView" : 2,
    "byteOffset" : 0,
    "componentType" : 5123,
    "count" : 10,
    "type" : "VEC4",
    "max" : [ 0, 1, 0, 0 ],
    "min" : [ 0, 1, 0, 0 ]
  }, {
    "bufferView" : 2,
    "byteOffset" : 160,
    "componentType" : 5126,
    "count" : 10,
    "type" : "VEC4",
    "max" : [ 1.0, 1.0, 0.0, 0.0 ],
    "min" : [ 0.0, 0.0, 0.0, 0.0 ]
  }, {
    "bufferView" : 3,
    "byteOffset" : 0,
    "componentType" : 5126,
    "count" : 2,
    "type" : "MAT4",
    "max" : [ 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, -0.5, -1.0, 0.0, 1.0 ],
    "min" : [ 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, -0.5, -1.0, 0.0, 1.0 ]
  }, {
    "bufferView" : 4,
    "byteOffset" : 0,
    "componentType" : 5126,
    "count" : 12,
    "type" : "SCALAR",
    "max" : [ 5.5 ],
    "min" : [ 0.0 ]
  }, {
    "bufferView" : 4,
    "byteOffset" : 48,
    "componentType" : 5126,
    "count" : 12,
    "type" : "VEC4",
    "max" : [ 0.0, 0.0, 0.707, 1.0 ],
    "min" : [ 0.0, 0.0, -0.707, 0.707 ]
  } ],
  
  "asset" : {
    "version" : "2.0"
  }
}

上面代码由渲染程序渲染的效果如下：

图19a：简单的蒙皮效果

简单蒙皮示例中出现的场景元素

示例代码中出现的场景元素汇总如下：

• scenes数组对象和nodes数组对象已经在之前的章节介绍过。代码中加入了索引为1和索引为2两个新的node对象，用来定义骨骼。可以认为新添加的node对象是骨骼间的关节点，用于变形网格。
• skins数组对象，我们会在下一章节解释说明。
• animations数组对象，之前的章节，我们已经做过介绍。animation对象引用了作为骨骼的node对象，用来产生蒙皮动画。
• meshs数组对象，之前的章节，我们已经做过介绍。在本示例，我们为mesh.primitive对象添加了"JOINTS_0"和"WEIGHT_0"属性，用于顶点蒙皮。
• buffers数组对象，bufferViews数组对象和accessors数组对象，之前的章节，我们已经做过介绍。在本示例，新添加的这类对象被我们用来描述顶点蒙皮信息。

下一章节，我们会介绍这些元素如何结合起来产生蒙皮动画。

---

fangcun：glTF格式详解(目录)​zhuanlan.zhihu.com