glTF学习笔记（6）——glTF Tutorials/Example: A Simple Animation

最新推荐文章于 2024-05-15 09:51:41 发布

翻译最新推荐文章于 2024-05-15 09:51:41 发布 · 878 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://github.com/KhronosGroup/glTF-Tutorials/blob/master/gltfTutorial/gltfTutorial_006_SimpleAnimation.md

glTF学习笔记专栏收录该内容

7 篇文章

订阅专栏

https://github.com/KhronosGroup/glTF-Tutorials/blob/master/gltfTutorial/gltfTutorial_006_SimpleAnimation.md

Table of Contents

源码

效果图

The rotation property of the node

The animation data

The buffer and the bufferView for the raw animation data

The accessor objects for the animation data

The animation

当变换是由TRS属性给定时，animation可被用于一个node的平移、旋转、缩放是如何随之间变化的。

下面是minimal glTF file的扩展版本，增加了animation。

源码

{
  "scenes" : [
    {
      "nodes" : [ 0 ]
    }
  ],
  
  "nodes" : [
    {
      "mesh" : 0,
      "rotation" : [ 0.0, 0.0, 0.0, 1.0 ]
    }
  ],
  
  "meshes" : [
    {
      "primitives" : [ {
        "attributes" : {
          "POSITION" : 1
        },
        "indices" : 0
      } ]
    }
  ],
  
  "animations": [
    {
      "samplers" : [
        {
          "input" : 2,
          "interpolation" : "LINEAR",
          "output" : 3
        }
      ],
      "channels" : [ {
        "sampler" : 0,
        "target" : {
          "node" : 0,
          "path" : "rotation"
        }
      } ]
    }
  ],

  "buffers" : [
    {
      "uri" : "data:application/octet-stream;base64,AAABAAIAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAAACAPwAAAAA=",
      "byteLength" : 44
    },
    {
      "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
    },
    {
      "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 ]
    },
    {
      "bufferView" : 2,
      "byteOffset" : 0,
      "componentType" : 5126,
      "count" : 5,
      "type" : "SCALAR",
      "max" : [ 1.0 ],
      "min" : [ 0.0 ]
    },
    {
      "bufferView" : 2,
      "byteOffset" : 20,
      "componentType" : 5126,
      "count" : 5,
      "type" : "VEC4",
      "max" : [ 0.0, 0.0, 1.0, 1.0 ],
      "min" : [ 0.0, 0.0, 0.0, -0.707 ]
    }
  ],
  
  "asset" : {
    "version" : "2.0"
  }
  
}

效果图

Image 1: A single, animated triangle.

The rotation property of the node

示例中的唯一node具有旋转属性。这是一个包含四元数的四个浮点值的数组，用于描述旋转：

  "nodes" : [
    {
      "mesh" : 0,
      "rotation" : [ 0.0, 0.0, 0.0, 1.0 ]
    }
  ],

给定的值是一个四元数，描述了“大约0度旋转”，因此，三角形将以其初始方向显示。

The animation data

glTF JSON的顶层数据中添加了三个元素，以对动画数据进行编码：

包含原始动画数据的新buffer；
引用buffer的bufferView；
两个新的accessor对象，这两个对象将结构信息添加到动画数据中。

The buffer and the bufferView for the raw animation data

添加了一个新的buffer，其中包含原始动画数据。该buffer还用data URI来编码动画数据组成的100个字节：

  "buffers" : [
    ...
    {
      "uri" : "data:application/octet-stream;base64,AAAAAAAAgD4AAAA/AABAPwAAgD8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAD0/TQ/9P00PwAAAAAAAAAAAACAPwAAAAAAAAAAAAAAAPT9ND/0/TS/AAAAAAAAAAAAAAAAAACAPw==",
      "byteLength" : 100
    }
  ],

  "bufferViews" : [
    ...
    {
      "buffer" : 1,
      "byteOffset" : 0,
      "byteLength" : 100
    }
  ],

同样还有一个新的bufferView，这里只引用索引为1的新buffer，其中包含了整个动画的buffer数据。其他结构信息将通过下面详细讨论的accessor对象添加。

注意还可以将动画数据附加到已经包含三角形几何数据的现有buffer中。在这种情况下，新的bufferView将引用索引为0的buffer，并使用适当的byteOffset来引用buffer中随后包含的动画数据的部分。

在此处的示例中，动画数据被添加为新的buffer，以保持几何数据和动画数据相互独立。

The accessor objects for the animation data

添加了两个新地accessor对象，它们描述了如何解释动画数据。

第一个accessor描述了动画关键帧的时间。有五个元素（count为5），每隔元素都是标量浮点值SCALAR FLOAT，总共20个字节。

第二个accessor在前20个字节之后，有5个元素，每个元素都是具有浮点分量的4D向量VEC4 FLOAT，它们是动画的五个关键帧相对应的旋转，以四元数的形式给出。

  "accessors" : [
    ...
    {
      "bufferView" : 2,
      "byteOffset" : 0,
      "componentType" : 5126,
      "count" : 5,
      "type" : "SCALAR",
      "max" : [ 1.0 ],
      "min" : [ 0.0 ]
    },
    {
      "bufferView" : 2,
      "byteOffset" : 20,
      "componentType" : 5126,
      "count" : 5,
      "type" : "VEC4",
      "max" : [ 0.0, 0.0, 1.0, 1.0 ],
      "min" : [ 0.0, 0.0, 0.0, -0.707 ]
    }
  ],

下表显示了由时间accessor和旋转accessor使用示例中来自缓冲区的数据提供的实际数据：

times accessor	rotations accessor	Meaning
0.0	(0.0, 0.0, 0.0, 1.0 )	At 0.0 seconds, the triangle has a rotation of 0 degrees
0.25	(0.0, 0.0, 0.707, 0.707)	At 0.25 seconds, it has a rotation of 90 degrees around the z-axis
0.5	(0.0, 0.0, 1.0, 0.0)	At 0.5 seconds, it has a rotation of 180 degrees around the z-axis
0.75	(0.0, 0.0, 0.707, -0.707)	At 0.75 seconds, it has a rotation of 270 (= -90) degrees around the z-axis
1.0	(0.0, 0.0, 0.0, 1.0)	At 1.0 seconds, it has a rotation of 360 (= 0) degrees around the z-axis

因此，此动画描述了围绕z轴的360度旋转，持续1秒。

The animation

最后，这是实际添加动画的部分，顶层动画数组（animations array）包含一个animation对象，它由两个元素组成：

samplers，描述动画数据的来源；
channels，可以被想象为将动画数据的“源（source）”连接到“目标target”的通道。

在这个给定的例子中，有一个sample。每个sampler会定义一个input和一个output属性。它们都引用accessor对象。在这里，它们引用的是时间accessor（索引为2）和旋转accessor（索引为3）。另外，采样器定义了一个插值类型（interpolation），在这里，插值类型为线性Linear。

该例子中还有一个channel。该channel引用了唯一的sampler（索引为0），作为动画数据的源。动画的target被编码在channel.target对象中：它包含一个ID，该ID指向应为其属性设置动画的结点。实习的结点属性在path中命名。在给定的数据中，通道目标表明索引为0的结点的“rotation”属性应设置为动画。

  "animations": [
    {
      "samplers" : [
        {
          "input" : 2,
          "interpolation" : "LINEAR",
          "output" : 3
        }
      ],
      "channels" : [ {
        "sampler" : 0,
        "target" : {
          "node" : 0,
          "path" : "rotation"
        }
      } ]
    }
  ],

结合所有的信息，可以将给定的动画对象总结为：

During the animation, the animated values are obtained from the rotations accessor. They are interpolated linearly, based on the current simulation time and the key frame times that are provided by the times accessor. The interpolated values are then written into the "rotation" property of the node with index 0.