３D画像ファイルのアニメーションとは？

はじめに

 
２次元（以下２D）画像でも３次元（以下３D）画像でも、動画に変換された画像を鑑賞するというアニメーションとして知られる映像文化が広く普及しています。
 
連続する静止画を１秒間に数十コマの時間間隔で表示すれば、いわゆる映画として知られる動画になります。
昔の映画は静止画がそのまま記録されていたので膨大な情報量を持っていましたが、デジタル社会のニーズに応えるため、データ量の大幅な圧縮が必要になってこれまで多くのデータ削減技術が開発され、今も開発が続けられています。
２Dや３D画像のアニメーションも、静止した２Dや３D画像のデータをできるだけ増大させないように、数々の工夫を施して動画に変換している技術であると言えるでしょう。
 
アニメーションさせるデータを画像ファイルに組み込んで、所定のアニメーションを動かすという仕組みも開発されてきており、２Ｄ画像ファイルに対してはアニメーションGIFファイルやAPNGファイルなどがあります。
３Ｄ画像ファイルに対しても、アニメーションデータが組み込まれたファイルがあります。
 
以前の３Ｄ画像ファイルの画像とは？で、3Dデータフォーマットの決定版とされるglTFファイルフォーマットを調べましたが、そのglTFファイルにもアニメーションデータが格納されるようになっています。
 
そのglTFファイルについては、

という記事があって、人型3Dアバター用のVRMファイルはglTFファイルをベースにしているのですが、

と記載され、VRM自体にはAnimationが使われないとされています。
 
このVRMファイルに対して、

という、アニメーションの要素の一つである「ボーン」についての問題提起のような記事がありました。
 
「ボーン」を使ったアニメーションは、骨格となるボーン（Bone）を設定してそのBoneに付随する3D物体の動きを制御するアニメーションです。
複数個のBoneを組み合わせて使用されるのが一般的で、人物や動物、その他無機物でも動きがある物体に適用されて広く普及しています。
Boneの用語は別の呼び方の例もあるのですが、ここではボーンアニメーションと呼んでおきます。
 
ウィキペディアには、

と記されています。
 
アニメーション技術には上記のように多くの専門用語が登場して、何となくそれら要素技術が分かったつもりになっていても具体的な挙動を把握するのは容易ではありません。
 
そもそも３Ｄ画像ファイルのアニメーションはどういうものであって、glTFファイルのアニメーションデータはどういう構造になっているのでしょうか？ボーンアニメーションのデータはどのように扱われているのでしょうか？
 
そのglTFファイルのボーンアニメーションについては、

という解説記事や、

という記事が参考になります。
 
今回は、glTFファイルのアニメーションデータの構造を解きほぐすことによってアニメーションの基本的で具体的な技術を学ぶことにします。
 

glTF 2.0ファイルフォーマットのアニメーションデータ

 
glTF 2.0ファイルフォーマットの仕様については、The glTF 2.0 Specificationに書かれています。
 
glTFのアニメーションデータは、
・animation.channels
・animation.samplers
のデータが必須となっています。
他に、
・animation.name
・animation.extensions
・animation.extras
などのデータがあります。
 
そのらのデータの意味や役割を以下に具体的に説明していきます。
 

3D物体の移動アニメーション

 
最初に簡単な例として3D物体を単純に移動させるだけのアニメーションを取り上げます。
 

具体例１（立方体の移動）

具体例１は立方体を一方向に単純に移動するだけのアニメーションです。
 

具体例１のglTFファイル生成：

以前の３Ｄ画像ファイルの画像とは？や、3D画像ファイルのカメラデータとは？
と同様に、glTFファイルの生成には、著名なオープンソースの3DCGソフトであるBlenderから出力されたファイルを用います。
 
Blenderのデフォルト状態（筆者の環境でBlenderインストールした直後の状態なのでデフォルトとしておく）の立方体で、animationモードで0フレームを登録し、立方体をx位置1mにして120フレームに登録します。終了は140フレームに設定しました。
後で述べるglTFデータを分かり易くするため、1フレームでなく0フレームを開始点として登録しています。
また同様に分かり易くするため、アニメーション速度を一定にするように、デフォルト補間モードをリニアに設定しています。
 
animationモードは24Hzの周期になっているので、120フレームは120／24＝5秒後に相当します。立方体が5秒間でx方向に1m移動するというアニメーションです。
レンダリングを操作し、120フレームに達してanimation記録が完了したら、メッシュモードなし、カメラ設定ONにしてglTFファイルであるサンプル1.glbをエクスポートしました。
 
Blenderでのアニメーションの様子を見ていただくために、Blenderの出力機能で動画であるaviファイルを出力し、そのaviファイルを適当な外部ツールでデータ圧縮されたwebmファイルに変換した動画を【図１】に表示します。
aviファイルはデータ容量が大きいので、ブラウザで表示させるためにデータ圧縮されたwebmファイルに変換しています。
 

具体例１のglTFファイルのデータ：

Blenderからエクスポートされたサンプル1.glbファイルのJSONデータを調べると、ジオメトリを示す"meshes"情報の"primitives"は、
 "primitives"
 {
 　"attributes":
 　{
 　　"POSITION":0
 　},
  "indices":1,
  "material":0
 }
となっていて、３Ｄ画像ファイルの画像とは？の具体例１とanimationしか変わっていないので、この"primitives"データは同じです。
 
アニメーションデータを示す"animations"情報は、
 "animations": [
  {
 　"channels": [
 　 {
 　　"sampler": 0,
 　　"target": {
 　　　"node": 0,
 　　　"path": "translation"
 　　}
 　 }
 　],
 　"name": "CubeAction.001",
 　"samplers": [
 　 {
 　　"input": 2,
 　　"interpolation": "LINEAR",
 　　"output": 3
 　 }
 　]
  }
 ],
となっています。
 
"nodes"情報は、
カラム0が、
 "nodes": [
  {
 　"mesh": 0,
 　"name": "Cube"
  }
 ],
カラム1省略
となっています。
 
animation.channelsデータは、"node": 0の物体（Cube）が"translation"（移動）する"CubeAction.001"という名のアニメーションであることを示しています。
 
animation.samplersデータは、"input": 2がアニメーションのフレーム時間、"output": 3がアニメーションのキーフレームと呼ばれるフレームの状態変化データを示しており、"accessors"情報のカラム2に"input"のデータ、カラム3に"output"のデータが格納されます。
"interpolation": "LINEAR"は、補間方法がリニアであることを示していますが意味はなさそうです。後述します。
 
"accessors"情報は、
 "accessors": [
　　　カラム0省略
　　　カラム1省略
カラム2は、
 {
 　"bufferView": 2,
 　"componentType": 5126,
 　"count": 121,
 　"max": [
 　　5
 　],
 　"min": [
 　　0
 　],
 　"type": "SCALAR"
 },
カラム3は、
 {
 　"bufferView": 3,
 　"componentType": 5126,
 　"count": 121,
 　"type": "VEC3"
 }
となっています。
 
カラム2の"input"のデータは、最小値0秒、最大値5秒の121個のフレーム時間データがあることを示しています。
フレーム0からフレーム120までは121フレームあり、それぞれのフレーム時間が、"componentType": 5126により4Byteの浮動小数点（単精度float）で"bufferView": 2のバッファに格納されています。
 
その"bufferView": 2には、
 0、0.04167、0.08333、・・・、5
のデータが格納されていて、0秒から5秒までの5／120＝0.04167刻みで変化する時間データになっています。
 
カラム3の"output"のデータは、121個ある各フレーム毎のx位置、y位置、z位置の3個のデータが"componentType": 5126により4Byteの浮動小数点（単精度float）で"bufferView": 3のバッファに格納されています。
 
その"bufferView": 3には、
 （0、0、0）、（0.00833、0、0）、（0.01667、0、0）、・・・、（1、0、0）
のデータが格納されていて、x位置だけが0mから1mまでの1／120＝0.00833刻みで変化する位置データになっています。
 

具体例１のglTFファイルを用いたアニメーション：

生成されたglTFファイルを用いてアニメーションするには、three.jsを利用したJavascriptを用います。
three.jsは「ウェブブラウザ上でリアルタイムレンダリングによる3次元コンピュータグラフィックスを描画する、クロスブラウザ対応の軽量なJavaScriptライブラリおよびAPIである。」
 引用：Three.js
と書かれており、広く利用されているライブラリです。
 
three.jsでサンプル1.glbファイルのデータ（geometry、material、camera、animation）と上記"output"のデータを読み取ります。
Blenderの24Hzに合わせるように描画周期を調整して、立方体の位置をその"output"のデータに逐次変更します。
この実行結果を【図２】に示します。ブラウザがこのJavascriptを実行して表示しています。
【図１】と同様のアニメーションがされていることが分かると思います。

具体例１の解説

ボーンアニメーション

 
次に３Dアニメーションで基本的な技術の一つになっているボーンアニメーションを取り上げます。
ここではボーンアニメーションに用いられるglTFファイルの構造をできるだけ具体的に説明します。
 

具体例２（１個のボーンだけの回転）

具体例２は１個のボーン（Bone）だけがX軸周りに90゜回転するだけの単純なアニメーションで、まだBoneに付随する3D物体との関連付けは行っていません。
ボーンアニメーションは複数個のBoneを関節部を介して結合して用いられることが多いのですが、先ずは単独での動きを調べてBoneのデータがどのように扱われているかを示します。
 

具体例２のglTFファイルの生成：

Blenderを用い具体例１と同じ立方体で、「オブジェクトの追加」機能で１個のアーマチュア（BlenderではBoneのこと）を設定します。
立方体（Cube）は位置関係を示すために削除しないで非表示にしておきます。
デフォルト状態でアーマチュアボタンをクリックすると【図３】に示す上向き（Blenderでは+ｚ方向）の8角形（上に延びた4角錐の底に小さな4角錐が連結した形）のBoneが設定されます。
このBoneの形状はいろいろな形に変更できますがここではデフォルトの8角形にしておきます。
位置、回転は0、スケールは1になっています。
 

 
Boneの動きを分かり易くするためにスケールを2に変更します。
立方体は頂点が±1.0になっているので、Boneが立方体の中心から立方体をはみ出た形になります。
 
具体例１と同様に、animationモードでアーマチュアの上記初期状態を0フレームを登録し、アーマチュアのx回転角を90゜にして120フレームに登録します。終了は140フレームに設定しました。
アニメーション速度を一定にするように、デフォルト補間モードをリニアに設定しています。
 
具体例１と同様に、レンダリングを操作し、120フレームに達してanimation記録が完了したら、メッシュモードなし、カメラ設定ONにしてglTFファイルであるサンプル2.glbをエクスポートしました。
 
具体例１と同様に、Blenderでのアニメーションの様子を見ていただくために、Blenderの出力機能で動画であるaviファイルを出力し、そのaviファイルを適当な外部ツールでデータ圧縮されたwebmファイルに変換した動画を【図４】に表示します。
この出力には、立方体は位置確認用のために配置しているので、「ビューポート表示」で「ワイヤーフレーム」にチェックしてワイヤーフレームにしておきます。
このワイヤーフレームの情報はglTFファイルには格納されません。
 

具体例２のglTFファイルのデータ：

Blenderからエクスポートされたサンプル2.glbファイルのJSONデータを調べると、ジオメトリを示す"meshes"情報の"primitives"は、
 "primitives"
 {
 　"attributes":
 　{
 　　"POSITION":0
 　},
  "indices":1,
  "material":0
 }
となっていて、具体例１と同じです。
具体例２ではボーンがあるのですが、まだ関連付ける物体を設定していないからボーンアニメーションは行っていないことになり、"primitives"にボーンアニメーションを制御する"JOINTS"データは入っていません。
 
"nodes"情報は、
 "nodes": [
　　　カラム0省略
　　　カラム1省略
 {
 　"name": "Bone"
 },
 {
 　"children": [
 　　2
 　],
 　"name": "30a230fc30de30c130e530a2",　※アーマチュアの意
 　"scale": [
 　　2,
 　　2,
 　　2
 　]
 }
となっていて、Boneデータは"nodes"情報のカラム2、3に格納されています。
"Bone"と"アーマチュア"の２つが混在していて分かりにくいのですが、Blenderからこのような形にエクスポートされています。
"アーマチュア"のTRSプロパティであるPosition、rotationはそれぞれデフォルトの(0, 0, 0)、(0, 0, 0, 1)であるので省略され、変更していたscaleの(2, 2, 2)だけが格納されています。
 
アニメーションデータを示す"animations"情報は、
 "animations": [
 　{
 　　"channels": [
 　　　{
 　　　　"sampler": 0,
 　　　　"target": {
 　　　　　"node": 2,
 　　　　　"path": "translation"
 　　　　}
 　　　},
 　　　{
 　　　　"sampler": 1,
 　　　　"target": {
 　　　　　"node": 2,
 　　　　　"path": "rotation"
 　　　　}
 　　　},
 　　　{
 　　　　"sampler": 2,
 　　　　"target": {
 　　　　　"node": 2,
 　　　　　"path": "scale"
 　　　　}
 　　　},
 　　　{
 　　　　"sampler": 3,
 　　　　"target": {
 　　　　　"node": 3,
 　　　　　"path": "rotation"
 　　　　}
 　　　}
 　　],
 　　"name": "30a230fc30de30c130e530a2Action",　※アーマチュアActionの意
 　　"samplers": [
 　　　{
 　　　　"input": 2,
 　　　　"interpolation": "LINEAR",
 　　　　"output": 3
 　　　},
 　　　{
 　　　　"input": 2,
 　　　　"interpolation": "LINEAR",
 　　　　"output": 4
 　　　},
 　　　{
 　　　　"input": 2,
 　　　　"interpolation": "LINEAR",
 　　　　"output": 5
 　　　},
 　　　{
 　　　　"input": 2,
 　　　　"interpolation": "LINEAR",
 　　　　"output": 6
 　　　}
 　　]
 　}
 ],
となっています。
 
animation.channelsデータは、カラム0、カラム1、カラム2が"node": 1の"Bone"という名前のオブジェクトの"translation"（移動）、"rotation"（回転）、"scale"（拡大縮小）を示しています。カラム3は、"アーマチュア"という名前のオブジェクトの"rotation"（回転）を示していて、"アーマチュアaction"という名前のアニメーションであることを示しています。
 
animation.samplersデータは、"input": 2がアニメーションのフレーム時間、"output": 3、4、5、6がアニメーションのキーフレームと呼ばれるフレームの状態変化データを示しており、"accessors"情報のカラム2に"input"のデータ、カラム3、4、5、6に"output"のデータが格納されます。
"sampler": 0、1、2は"node": 2を示しているので、"Bone"という名前のオブジェクトに対する制御を表します。
"sampler": 3は"node": 3を示しているので、"アーマチュア"という名前のオブジェクトに対する制御を表すことになります。
従って、カラム3、4、5の"output"は"Bone"についての状態変化データ、カラム6の"output"は"アーマチュア"についての状態変化データになります。
 
"accessors"情報は、
 "accessors": [
　　　カラム0省略
　　　カラム1省略
カラム2は、
 {
 　"bufferView": 2,
 　"componentType": 5126,
 　"count": 121,
 　"max": [
 　　5
 　],
 　"min": [
 　　0
 　],
 　"type": "SCALAR"
 },
カラム3は、
 {
 　"bufferView": 3,
 　"componentType": 5126,
 　"count": 121,
 　"type": "VEC3"
 },
カラム4は、
 {
 　"bufferView": 4,
 　"componentType": 5126,
 　"count": 121,
 　"type": "VEC4"
 },
カラム5は、
 {
 　"bufferView": 5,
 　"componentType": 5126,
 　"count": 121,
 　"type": "VEC3"
 },
カラム6は、
 {
 　"bufferView": 6,
 　"componentType": 5126,
 　"count": 121,
 　"type": "VEC4"
 },
となっています。
 
カラム2の"input"のデータは、具体例１と同じで最小値0秒、最大値5秒の121個のフレーム時間データがあることを示しています。
フレーム0からフレーム120までは121フレームあり、それぞれのフレーム時間が、"componentType": 5126により4Byteの浮動小数点（単精度float）で"bufferView": 2のバッファに格納されています。
 
その"bufferView": 2には、具体例１と同様に
 0、0.04167、0.08333、・・・、5
のデータが格納されていて、0秒から5秒までの5／120＝0.04167刻みで変化する時間データになっています。
 
カラム3の"output"のデータは、121個ある各フレーム毎のx位置、y位置、z位置の3個のデータが単精度floatで"bufferView": 3のバッファに格納されているのですが、121個全部が（0、0、0）になっていて、移動しないことを示しています。
 
カラム4の"output"のデータは、121個ある各フレーム毎の回転角を表すquaternionの4個のデータが単精度floatで"bufferView": 4のバッファに格納されているのですが、121個全部が（0、0、0、1）になっていて、回転しないことを示しています。
 
カラム5の"output"のデータは、121個ある各フレーム毎の拡大縮小を表すxスケール、yスケール、zスケールの3個のデータが単精度floatで"bufferView": 5のバッファに格納されているのですが、121個全部が（1、1、1）になっていて、初期状態のまま拡大縮小しないことを示しています。
 
"アーマチュア"の状態変化データであるカラム6の"output"のデータは、121個ある各フレーム毎の回転角を表すquaternionの4個のデータが単精度floatで"bufferView": 6のバッファに格納されており、
 （0、0、0、1）、（0.006545、0、0、0.999979）、（0.01309、0、0、0.999914）、・・・、（0.707107、0、0、0.707107）
のデータが格納されていて、Y軸からZ軸に0゜から90゜まで徐々に回転していくデータになっています。
 

具体例２のglTFファイルを用いたアニメーション：

具体例２は１個のボーン（Bone）だけがX軸周りに90゜回転するだけの単純なアニメーションで、まだBoneに付随する3D物体との関連付けは行っていません。
ボーンアニメーションは複数個のBoneを関節部を介して結合して用いられることが多いのですが、先ずは単独での動きを調べてBoneのデータがどのように扱われているかを示します。
具体例１と同様に、生成されたglTFファイルを用いてアニメーションするには、three.jsを利用したJavascriptを用います。
three.jsでサンプル1.glbファイルのデータ（geometry、material、camera、animation）と上記アーマチュア（Bone）の"output"のデータを読み取ります。
Blenderの24Hzに合わせるように描画周期を調整して、逐次Boneの位置にその"output"のデータ（quaternionデータ）を用いた回転処理を施します。
この実行結果を【図５】に示します。ブラウザがこのJavascriptを実行して表示しています。
three.jsでは、Boneは緑から青へのグラディエーションになっている線で表示されます。
このBoneの形状もthree.jsで変更できますがデフォルト状態の線のままにしています。
【図４】と同様のBoneアニメーションがされていることが分かると思います。
立方体はBoneの位置関係を示すために、three.jsでワイヤフレームにした立方体を表示させています。

具体例２の解説

具体例３（ボーンに付随する立方体の回転）

具体例３は、具体例２の１個のボーン（Bone）だけがX軸周りに90゜回転するアニメーションに対して、Boneに付随する立方体と関連付けを行ったアニメーションです。
ボーンアニメーションは、Boneの動きに関連付けされる３D物体の要素（頂点やポリゴンや立体）と、その関連付けの度合い（weightデータと呼ばれる）を定めることによって複雑な立体表面の動きが制御されます。
この機能を単純化して、１個のBoneに対して単純な立方体の頂点を関連付けることにして分かり易くしてみます。
 

具体例３のglTFファイルの生成：

Blenderを用い具体例２と同じに、立方体で１個のBoneを設定します。Boneの動きを分かり易くするためにスケールを2に変更します。
立方体とBoneを「オブジェクトモード」－「ペアレント」－「自動のウェイトで」に設定します。
これにより立方体の全頂点がBoneと関連付けられたことになります。
 
具体例２と同様に、animationモードでアーマチュアの上記初期状態を0フレームを登録し、アーマチュアのx回転角を90゜にして120フレームに登録します。終了は140フレームに設定しました。
アニメーション速度を一定にするように、デフォルト補間モードをリニアに設定しています。
 
具体例２と同様に、レンダリングを操作し、120フレームに達してanimation記録が完了したら、メッシュモードなし、カメラ設定ONにしてglTFファイルであるサンプル3.glbをエクスポートしました。
 
具体例１や２と同様に、Blenderでのアニメーションの様子を見ていただくために、Blenderの出力機能で動画であるaviファイルを出力し、そのaviファイルを適当な外部ツールでデータ圧縮されたwebmファイルに変換した動画を【図６】に表示します。
この出力も、「ビューポート表示」で「ワイヤーフレーム」にチェックしてワイヤーフレームにしておきます。
このワイヤーフレームの情報はglTFファイルには格納されません。

具体例３のglTFファイルのデータ：

Blenderからエクスポートされたサンプル3.glbファイルのJSONデータを調べると、ジオメトリを示す"meshes"情報の"primitives"は、
 "primitives"
 {
 　"attributes":
 　{
 　　"POSITION":0
 　　"JOINTS_0": 1,
 　　"WEIGHTS_0": 2
 　},
  "indices":3,
  "material":0
 }
となっていて、具体例１や２に対して"JOINTS_0": 1と"WEIGHTS_0": 2が加わっています。
 

"nodes"情報は、
 "nodes": [
　　　カラム0省略
 {
 　"name": "Bone"
 },
 {
 　"mesh": 0,
 　"name": "Cube",
 　"skin": 0
 },
 {
 　"children": [
 　　2
 　　1
 　],
 　"name": "30a230fc30de30c130e530a2",　※アーマチュアの意
 　"scale": [
 　　2,
 　　2,
 　　2
 　]
 }
となっていて、Boneデータは具体例２と異なり、"nodes"情報のカラム1に"name": "Bone"が入り、カラム2に"Cube"の情報、カラム3に"children"が2と1に設定されています。
これにより、カラム1の"Bone"とカラム2の"Cube"が関連付けられていることになります。
BoneのTRSプロパティであるPosition、rotationは具体例２と同様にそれぞれデフォルトの(0, 0, 0)、(0, 0, 0, 1)であるので省略され、変更していたscaleの(2, 2, 2)だけが格納されています。
 
アニメーションデータを示す"animations"情報は、
 "animations": [
 　{
 　　"channels": [
 　　　{
 　　　　"sampler": 0,
 　　　　"target": {
 　　　　　"node": 1,
 　　　　　"path": "translation"
 　　　　}
 　　　},
 　　　{
 　　　　"sampler": 1,
 　　　　"target": {
 　　　　　"node": 1,
 　　　　　"path": "rotation"
 　　　　}
 　　　},
 　　　{
 　　　　"sampler": 2,
 　　　　"target": {
 　　　　　"node": 1,
 　　　　　"path": "scale"
 　　　　}
 　　　},
 　　　{
 　　　　"sampler": 3,
 　　　　"target": {
 　　　　　"node": 3,
 　　　　　"path": "rotation"
 　　　　}
 　　　}
 　　],
 　　"name": "30a230fc30de30c130e530a2Action",　※アーマチュアActionの意
 　　"samplers": [
 　　　{
 　　　　"input": 5,
 　　　　"interpolation": "LINEAR",
 　　　　"output": 6
 　　　},
 　　　{
 　　　　"input": 5,
 　　　　"interpolation": "LINEAR",
 　　　　"output": 7
 　　　},
 　　　{
 　　　　"input": 5,
 　　　　"interpolation": "LINEAR",
 　　　　"output": 8
 　　　},
 　　　{
 　　　　"input": 5,
 　　　　"interpolation": "LINEAR",
 　　　　"output": 9
 　　　}
 　　]
 　}
 ],
となっていて、番号はnodesの値などによって異なりますが、具体例２と同等です。
 
animation.channelsデータとanimation.samplersデータは、具体例２と同等なのですが番号が異なっているので、再度記載しておきます。
animation.channelsデータは、カラム0、カラム1、カラム2が"node": 1の"Bone"という名前のオブジェクトの"translation"（移動）、"rotation"（回転）、"scale"（拡大縮小）を示しています。カラム3は、"アーマチュア"という名前のオブジェクトの"rotation"（回転）を示していて、"アーマチュアAction"というnameのアニメーションであることを示しています。
 
animation.samplersデータは、"input": 5がアニメーションのフレーム時間、"output": 6、7、8、9がアニメーションのキーフレームと呼ばれるフレームの状態変化データを示しており、"accessors"情報のカラム5に"input"のデータ、カラム6、7、8、9に"output"のデータが格納されます。
"sampler": 0、1、2は"node": 1を示しているので、"Bone"という名前のオブジェクトに対する制御を表します。
"sampler": 3は"node": 3を示しているので、"アーマチュア"という名前のオブジェクトに対する制御を表すことになります。
従って、カラム6、7、8の"output"は"Bone"についての状態変化データ、カラム9の"output"は"アーマチュア"についての状態変化データになります。
 
"accessors"情報は、
 "accessors": [
　　　カラム0省略
カラム1は、
 {
 　"bufferView": 1,
 　"componentType": 5121,
 　"count": 8,
 　"type": "VEC4"
 },
カラム2は、
 {
 　"bufferView": 2,
 　"componentType": 5126,
 　"count": 8,
 　"type": "VEC4"
 },
　　　カラム3省略
　　　カラム4省略
カラム5は、
 {
 　"bufferView": 2,
 　"componentType": 5126,
 　"count": 121,
 　"max": [
 　　5
 　],
 　"min": [
 　　0
 　],
 　"type": "SCALAR"
 },
カラム6は、
 {
 　"bufferView": 3,
 　"componentType": 5126,
 　"count": 121,
 　"type": "VEC3"
 },
カラム7は、
 {
 　"bufferView": 4,
 　"componentType": 5126,
 　"count": 121,
 　"type": "VEC4"
 },
カラム8は、
 {
 　"bufferView": 5,
 　"componentType": 5126,
 　"count": 121,
 　"type": "VEC3"
 },
カラム9は、
 {
 　"bufferView": 6,
 　"componentType": 5126,
 　"count": 121,
 　"type": "VEC4"
 },
となっています。
 
カラム1は"JOINTS_0"のデータで、"componentType": 5121によりunsigned byteで8個の（0、0、0、0）が格納されています。
8個のデータはCubeの頂点に対応しており、その順番は"POSITION": 0に格納されている座標データの格納順です。
（0、0、0、0）は各頂点が関連付けられるBoneの番号で、ここでは1個のBoneなので1番目に0が格納されています。
2～4番目は不使用なので0が入っています。
 
カラム2は"WEIGHTS_0"のデータで、"componentType": 5126により4Byteの浮動小数点（単精度float）で8個の（1、0、0、0）が格納されています。
"JOINTS_0"データと同様に、8個のデータはCubeの頂点に対応しています。
（1、0、0、0）は各頂点がBoneに関連付けられる重み（weight）を示していて、1が100％、0が0％の重みになっています。
ここでは全頂点が100％Boneに関連付けられているので1番目に1が格納されています。
2～4番目は不使用なので0が入っています。
全頂点が同じ重みであるので8個のデータが全部（1、0、0、0）になっています。
 
カラム5の"input"のデータは、具体例１や２と同じで最小値0秒、最大値5秒の121個のフレーム時間データがあることを示しています。
カラム6の"output"、カラム7の"output"、カラム8の"output"、カラム9の"output"データはデータは、具体例２の"output"のデータと同じです。すなわち、"Bone"の"output"のデータの"translation"は、121個全部が（0、0、0）になっているので移動しない、"output"のデータの"rotation"は、121個全部が（0、0、0、1）になっているので回転しない、"output"のデータの"scale"は、121個全部が（1、1、1）になっているので拡大縮小しない、ことを示しています。
 
そして、"アーマチュア"の状態変化データであるカラム9の"output"のデータは、121個ある各フレーム毎の回転角を表すquaternionの4個のデータが単精度floatで"bufferView": 9のバッファに格納されており、
 （0、0、0、1）、（0.006545、0、0、0.999979）、（0.01309、0、0、0.999914）、・・・、（0.707107、0、0、0.707107）
のデータが格納されていて、Y軸からZ軸に0゜から90゜まで徐々に回転していくデータになっています。
 

具体例３のglTFファイルを用いたアニメーション：

具体例３は１個のボーン（Bone）だけがX軸周りに90゜回転し、Boneに付随する立方体3D物体と全頂点100％の重みで関連付けたアニメーションです。
具体例１や２と同様に、生成されたglTFファイルを用いてアニメーションするには、three.jsを利用したJavascriptを用います。
 
three.jsでサンプル3.glbファイルのデータ（geometry、material、camera、animation）と上記アーマチュア（Bone）の"output"のデータと"JOINTS_0"データと"WEIGHTS_0"データを読み取ります。
Blenderの24Hzに合わせるように描画周期を調整して、逐次Boneの位置にその"output"のデータ（quaternionデータ）を用いた回転処理を施します。更に、Cubeの頂点の位置にもその"output"のデータ（quaternionデータ）を用いた回転処理を施します。
この実行結果を【図７】に示します。ブラウザがこのJavascriptを実行して表示しています。
 
【図６】と同様の立方体が回転するBoneアニメーションがされていることが分かると思います。
立方体は、three.jsでワイヤフレームにした立方体を表示させています。
 

具体例３の解説

具体例４（ボーンに付随する立方体の回転で１個の頂点だけ回転しない）

具体例４は、具体例３の１個のボーン（Bone）だけがX軸周りに90゜回転し、Boneに付随する立方体と関連付けを行ったアニメーションに対して、１個の頂点だけ回転させないアニメーションです。
具体例３では立方体の8個の全頂点にweight=1が設定されているために、立方体全体がBoneに合わせて回転していましたが、頂点にweight=0が設定されている場合にどのようなボーンアニメーションになるかを示します。
 

具体例４のglTFファイルの生成：

Blenderを用い具体例３と同じに、立方体で１個のBoneを設定します。Boneの動きを分かり易くするためにスケールを2に変更します。
立方体とBoneを「オブジェクトモード」－「ペアレント」－「自動のウェイトで」に設定します。
これにより立方体の全頂点がBoneと関連付けられたことになりますが、その後Blenderの「ウェイトペイント」機能を使って1個の頂点だけをweight=0に設定します。
 
具体例３と同様に、animationモードでアーマチュアの上記初期状態を0フレームを登録し、アーマチュアのx回転角を90゜にして120フレームに登録します。終了は140フレームに設定しました。
アニメーション速度を一定にするように、デフォルト補間モードをリニアに設定しています。
 
具体例３と同様に、レンダリングを操作し、120フレームに達してanimation記録が完了したら、メッシュモードなし、カメラ設定ONにしてglTFファイルであるサンプル4.glbをエクスポートしました。
 
具体例３と同様に、Blenderでのアニメーションの様子を見ていただくために、Blenderの出力機能で動画であるaviファイルを出力し、そのaviファイルを適当な外部ツールでデータ圧縮されたwebmファイルに変換した動画を【図８】に表示します。
この出力も、「ビューポート表示」で「ワイヤーフレーム」にチェックしてワイヤーフレームにしておきます。
このワイヤーフレームの情報はglTFファイルには格納されません。
1個の頂点をweight=0に設定しているため、立方体がBoneに追従して変形しながら回転しています。
 

具体例４のglTFファイルのデータ：

Blenderからエクスポートされたサンプル4.glbファイルのJSONデータを調べると、具体例３のサンプル3.glbファイルと同じでした。
weight=0に設定したのにglTFファイルに反映されていません。
サンプル4.glbファイルをBlenderでインポートしてみても【図８】のような挙動にならず、全頂点がweight=1の【図６】と同じ挙動になります。
 

具体例４のglTFファイルを用いたアニメーション：

glTFファイルにweight=0が反映されていないので、three.jsで立方体のそのweight=0にした頂点だけを回転しないようにしてみました。
この実行結果を【図９】に示します。ブラウザがこのJavascriptを実行して表示しています。
【図８】と同様の立方体が変形しながら回転するBoneアニメーションがされていることが分かると思います。
立方体は、three.jsでワイヤフレームにした立方体を表示させています。
 

具体例４の解説

おわりに

記事一覧

前の記事

次の記事

最新

３D画像モデルの回転表示とは？

ボーンアニメーションのオフセット行列とは？

３D画像ファイルのアニメーションとは？

Googleアースに使われるKMLとは？

点群におけるLASとは？

GeoTIFFリーダーを作りました

3D画像ファイルのGeoTIFFとは？

3D画像ファイルの点群とは？

3D画像ファイルのカメラデータとは？

3D画像ファイルの画像とは？

3DにおけるJPEGとは？

立方体に写真を貼り付けるツールを作りました

球体に写真を貼り付けるツールを作りました