Blender / アニメーションの概要

Blenderで作成したモデルとアニメーションをエクスポートしてthree.jsで利用するための備忘録です

目次

1. はじめに
2. タイムラインエディタ
3. グラフエディタ
4. NLAエディタ（ノンリニアアニメーション）とドップシート
5. シェイプキー
6. リギングとスキニング
   1. リギング
   2. スキニング
   3. ウェイトペイント
7. エクスポート

はじめに

アニメーションの大枠と実装について

1. モデルの準備
   モデリング： アニメーション対象の3Dモデルを用意する
   リギング（アーマチュア）：モデルにボーンを設定して、動きを与えられるようにするプロセスです
   特にキャラクターアニメーションでは、リグを使ってキャラクターの腕や足などを動かします
   スキニング（ウェイトペイント）：ボーンがモデルのどの部分にどのくらいの影響を与えるかを調整するプロセスです
   ウェイトペイントによって、モデルが滑らかで自然に動くようにします（例えば、腕を動かすときに肩や肘も自然に連動して動くように設定）
   シェイプキー：頂点の位置変化を記録して変化のデータを滑らかにつなげることで、自然な動きを作り出す（例えば、キャラクターの表情の変化など）
2. タイムラインエディタとキーフレームを使った実装
   タイムラインエディタ：時間の流れを視覚的に確認しながら、キーフレームを配置
   キーフレーム：大事な点をマークすることです
   モデルの位置、回転、スケール、あるいは他のプロパティ（色、透明度など）を記録して、アニメーションを作成します
   Iキーでキーフレームを挿入
3. アニメーション編集
   グラフエディタ：キーフレーム間の補間や、動きの曲線（例えば滑らかな加速や減速）を調整するために使います
   ドープシート：タイムラインよりも詳細にキーフレームを管理するツール
   NLAエディタ：ストリップ化したアクションを編集するエディタ
4. その他（パーティクルや物理演算によるアニメーション）
   パーティクルシステム：雨、煙、火などの自然現象や群れの動きをシミュレートします
   物理演算：布のような素材の動きや、オブジェクト同士の衝突をリアルに表現するために使います

「タイムラインエディタ」はアニメーション作成の第一歩となるツールで、簡単なアニメーションの場合「タイムラインエディタ」だけで完結できますが
詳細なキーフレーム編集や複数のアクションを組み合わせて管理する場合「ドップシート」や「NLAエディタ」で行う必要があります

キーフレームについて

• 「キーフレーム」とは、アニメーションの重要な位置や状態を記録したポイントのことです
  オブジェクトの位置、回転、スケール、またはその他のプロパティ（例: 色や透明度など）を特定の「フレーム」で設定します
• 「フレーム」は個々の画像のイメージで、複数の「フレーム」を連続して表示することで動きを表現します
• 「FPS（フレームレート）」とは1秒間に表示される「フレーム」の数で、デフォルトでは「24 FPS」に設定されています
  変更は「出力プロパティ」→「フォーマット」→「フレームレート」
  ＊FPSを高く設定すると、アニメーションはよりスムーズに見えますが、レンダリングにはより多くの時間が必要になります

タイムラインエディタ

タイムラインエディタでできること

• キーフレームの操作
  キーフレームは、アニメーションの中で特定の動きを記録したポイントです
  これを設定することで、キャラクターや物がどのように動くかを決めます
• プレイヘッドのスクラブ
  プレイヘッドは、タイムライン上を動かして、アニメーションのどの部分を今見ているかを示すマーカー
  これを動かすことで、アニメーションの任意の場面を見ることができます
• アニメーションのオーバービュー表示
  タイムライン上には、アニメーション全体の概要が表示されます
  これを見ることで、アニメーションの全体の流れを把握することができます
  
  ＊スペースキーで再生、もう１度スペースキーで停止

キーフレームの挿入手順

1. オブジェクトの選択
   3Dビューポートでアニメーションを付けたいオブジェクトを選択
2. フレームの設定
   タイムラインでキーフレームを挿入したいフレーム番号にプレイヘッドを移動
   
3. オブジェクトに対して必要な変更（移動、回転、スケールなど）を行います
4. キーフレームの挿入
   オブジェクトを選択した状態で、キーボードの「Iキー」を押し、キーフレーム挿入メニューを表示
5. 挿入したいキーフレームのタイプ（位置、回転、スケール）を選択
   
   ＊キーフレームは「オブジェクトプロパティ」で右側の点をクリックして「ダイヤモンド形のアイコン」にする
   
   

フレーム範囲は、シーンのアニメーションの長さを決定します
デフォルトでは、フレーム1 で開始、フレーム 250で終了するように設定されています

$$\text{アニメーションの長さ（秒）} = \frac{\text{フレーム数}}{\text{FPS（フレームレート）}}$$

キーフレームの値を確認する

• タイムラインのスライダーを動かして、確認したいキーフレームのフレームに移動します。
• 移動したフレームにおけるオブジェクトのプロパティ（例えば、位置、回転、スケールなど）の値を「プロパティパネル」で確認

• 黄色がかった色の背景
  そのプロパティにキーフレームが設定されており、現在のフレームでキーフレームがアクティブであることを示しています
• 緑色の背景
  そのプロパティがキーフレームの影響を受けていることを示してる
  現在のフレームでは直接的なキーフレームが設定されていない場合に表示されます。これは、現在のフレームの値が、設定されているキーフレームによって補間されている状態
  

グラフエディタ

グラフエディタを使用することで、キーフレーム間での属性値（位置、回転、スケールなど）の補間を調整し、イージング（アニメーションの動き）をコントロールすることができます
縦軸（Y軸）は変化の値
横軸（X軸）はフレーム数

キーフレームを選択して「Tキー」を押すと、補間タイプを変更するメニューが表示されます

NLAエディタ（ノンリニアアニメーション）とドップシート

「NLAエディタ」と「ドープシート」は、GLTF/GLB形式でアニメーションクリップを分けてエクスポートするためのツールとして連携して使用します

「アクション」と「ストリップ」について

• 「アクション」とは、キーフレームの集まり（例えば、キャラクターが「歩く」や「走る」という一連の動作）を意味します
  これは、Blenderでアニメーションを管理する基本単位です
• 「ストリップ」とは、「NLAエディタ」に配置されたアクションやその他の要素（例: サウンド、トランジション）のブロックのことを指します
  ストリップでは、長さの調整、繰り返し再生、ブレンドなどが可能です
  注意
  「ストリップ」という場合、サウンドやトランジションも含む広い概念を指します。そのため、「NLAエディタに配置されたアクション」は、厳密には「アクションクリップ」と呼ばれます
  このアクションクリップがGLTF/GLB形式でエクスポートされ、Three.jsなどでアニメーションクリップとして利用されます

「NLAエディタ」と「ドープシート」について

タイムラインで作成したアニメーションを「ドープシート」で「アクション」として保存する
＊タイムラインから直接NLAエディタに移行することはできない

• タイムラインでアニメーションを作成した状態で、ドープシートエディタを表示
  ＊左上のメニューから「ドープシート」→「アクションエディタ」を選択
• 現在のキーフレームが含まれたアクションが「アクションエディタ」に表示されているはずなので、ドープシートの上部にあるアクション名をクリックして名前を付ける
• アクションが削除されないように、名前の横にあるフェイクユーザーボタン（Fマーク）をクリック
  ＊Blenderを閉じてもアクションが保存されます

ストリップ化する2つの方法
＊ドープシートからNLAエディタに「アクション」を持ち込むには、以下の2つの方法があります

• ドープシート上部にある「ストリップ化」ボタンをクリック
• ノンリニアアニメーション（NLAエディタ）に切り替え、「アクションをストリップ化ボタン」をクリック

NLAトラックに配置されたストリップはタイムライン上のブロックのように表示され、位置や長さを調整できます
＊例：アニメーションの開始タイミングを遅らせたり、繰り返し回数を設定したり、複数のストリップを滑らかに切り替えたりできる

「ドップシート」でアクションを作成して「NLAエディタ」でストリップ化する流れ

1. 「ドップシート」の「アクション」で新規作成からアクションを作成
   ＊作成済みのアクションはリストから選択
   
2. フェイクユーザーボタンをクリックして有効に
   
3. 「NLAエディタ」で作成したアクションをストリップ化する
   
   ＊NLAトラックにアクションが表示されていない場合はリスト（フェイクユーザーボタンをクリックしたアクションの一覧）から選択
   ＊アクティブでないアクションをNLAエディタでストリップ化する場合は、リストから選択する必要があります
   

シェイプキー

シェイプキーの追加と編集

• シェイプキーはオブジェクトモードでメッシュオブジェクトに追加されます
  プロパティパネルの「データ」タブから「シェイプキー」セクションを開き、「＋」ボタンをクリックして新しいシェイプキーを追加
  最初に追加される「Basis」というキーは、オリジナルのメッシュ形状を保持します
  
• 新しいシェープキーを追加して、編集したいシェイプキーを選択
  編集モードでメッシュを編集します
  ＊この変更は選択したシェイプキーにのみ適用され、他のキーには影響しません
  
  チェックボックスは「使用」を切り替えます
  ＊チェックボックスをオフにするとシェイプキーが適用されないので特定のシェイプキーの影響を一時的に非表示にできます
• オブジェクトモードに戻った後は
  値を「0」にすると、そのシェイプキーの効果は見えなくなり、「1」にすると完全にそのシェイプキーの変形が適用された状態を見ることができます
  ＊スライダーを使って0から1の範囲で値を調整できます
  
• シェイプキーのブレンド
  複数のシェイプキーを異なる値に（0から1の範囲で値を調整）することによって、これらのキーをブレンドして全く新しい形状を作成できます
  ＊例えば、キャラクターの表情を作る際には、眉を上げるシェイプキーと口角を下げるシェイプキーを組み合わせて、複雑な表情を作り出すことが可能

シェイプキーの値をキーフレームに挿入する
＊シェイプキーの値

• オブジェクトモードでシェイプキーを選択し、
  アニメーションに使用するシェイプキーの値を、キーフレームを設定したい値に調整
• キーフレームの挿入：シェイプキーの値を設定した状態で
  値の横にカーソルを合わせ、「Iキー」を押します
  ＊値の横にあるキーフレームボタンをクリックしてもキーフレームを挿入できます（ダイヤモンド形のアイコン）
  

Three.jsでのアニメーションクリップを実装するためには、モディファイアを適用した後、メッシュにシェイプキーを追加します

リギングとスキニング

リギング

リギングやスキニングを行う前処理で、トランスフォームとモディファイアを適用する

「リギング」はボーン（骨格）を組み、これらの「ボーン」を使ってキャラクターを動かすための階層的な構造（アーマチュア）を作成します
ボーンは親子関係を持ち、階層的に接続されており、親ボーンの動きが子ボーンに伝播します
＊エンプティはメッシュ全体を動かすのに便利ですが、頂点グループごとに細かい動きを設定することはできません
アーマチュア（ボーン） は頂点グループとリンクすることで、メッシュの一部だけを動かす柔軟な制御も可能です

Shift + Aから「アーマチュア」を追加する

「アーマチュア」が追加されたら、プロパティパネルでアーマチュアに関する様々な表示オプション（ボーンの形を変えるなど）を設定できます

• 「最前面」と「名前」にチェックをつけると選択しやすくなります
• 「座標軸」にチェックをつけると各ボーンのローカル座標軸がビューポートに表示されるます
  ＊「ボーンのローカル座標軸」は、ボーン自身の方向性を示し、アニメーション時の動きの基準点となります
  編集モードで「N」パネルを開き、「アイテム」の「ロール」値を調整して、ボーンのローカル軸の向きを変更できます

アーマチュアにはオブジェクトモード・編集モード・ポーズモードがあります

• 編集モード
  アーマチュアの骨格を組み立てたり、既存のボーンを調整します
  ボーンの移動、回転、スケーリングの他、押し出しや複製などの操作も行えます
  • テールを選択して「Eキー」を押してボーンを押し出すと、選択したボーンの末端から新しいボーンが生成されます。この新しいボーンは元のボーンの子ボーンとして作成されます
    ＊途中のボーンを削除してもデフォルトの親子関係は次のボーンに引き継がれるが「接続を解除」（波線で表示）される
    
  • 選択したボーンを「Shift+D」で複製
    新しいボーンを元のボーンと同じ階層に追加します
  • ヘッドからの押し出し操作はボーンのヘッド部分から新しいボーンを生成することを意味します
    この操作で作られる新しいボーンは、元のボーンと逆の方向へ伸びます
    ＊親子関係にしたい場合
    「子→親」の順に選択して「Ctrl＋P」→テールに繋ぎたくない場合は（接続を解除）は「オフセットを保持」
• ポーズモード
  作成したアーマチュアのボーンを動かしてキャラクターにポーズを取らせます
  ボーンを動かしその位置をキーフレームとして記録できます
  制約を適用してボーンの動きを制限することも可能です
  ＊「R」キーを使用してボーンを回転させる際、通常はボーンの根元「ヘッド」を基準
  一般的にヘッドが関節の位置にくるようにする
  元のポーズに戻すには、Aで全選択して「Alt ＋」R（回転）やG（移動）

「接続を解除」し、単に親子関係だけを保持することができる
子ボーンは親ボーンの終端に固定されるわけではなく、独自に移動することが可能だが、親ボーンの移動や回転には追随する
ショートカット
Alt + Pキーから「コネクト解除」
＊親子関係も解除したい場合は、Alt + Pキーから「親子関係をクリア」

ボーンの制約（ボーンコンストレイント）とは

ボーンの制約とは、キャラクターやオブジェクトのボーンに特定の動作条件を設定することです
例えば、ボーンの動きを特定の方向や範囲に限定したり、他のボーンの位置や回転、サイズをコピーしたりする

• ボーンに「制約」を設定するには「ポーズモード」で作業を行います
• 制約を加えたいボーンを選び
• 「ボーンコンストレイント」プロパティを選択
• 「ボーンコンストレイントを追加」をクリックして必要な制約を選択
• 制約には様々なオプションがありますので、目的に応じて適切な設定を行います

ボーンの役割

• 変形ボーン
  変形ボーンは、直接的にメッシュを変形させる役割を持つボーンです
  メッシュにウェイトが割り当てられ、モデルの特定の部分を動かすために使用されます
• コントロールボーン
  メッシュを変形とは関係なく、変形ボーンや他のコントロールボーンを操作するために使われるボーンで、複数のボーンをより少数のボーンで制御するため
  ＊ボーンプロパティの変形のチェックを外す
  
  ＊通常、変形ボーンとの親子関係は設定しません

コントロールボーンを使って他のボーンの動きを調整する一般的なプロセスは、ターゲットとなる「変形ボーン」（または操作したい任意のボーン）に対して適切な「制約」を設定し、その制約のオプションでコントロールボーンを指定することになります
この方法で、コントロールボーンの動きが直接的または間接的に変形ボーンに影響を与えるようになります

ボーンのミラーリング

キャラクターのリグを作成する際は、腕や脚一方の体側のボーンを設定し、それをミラーして反対側に複製することが一般的です
一般的には、ボーンの名前の最後に「.L」または「.R」を付けることで、左（Left）側と右（Right）側を区別します

編集モードで、右上の「Xミラーを有効」にして、
「Shift＋Eキー」で押し出す
次からはEキーだけで押し出しができる

＊「Xミラーを有効」機能を使わずに、一括でミラーする場合
まずは名前に「.R」などを付ける必要があるので
ミラーしたいボーンを全て選択して、「アーマチュア」メニューの「名前」→「自動ネーム」
次に「アーマチュア」メニューの「対称化」を選択します

スキニング

「スキニング」は
1：メッシュとアーマチュアを関連付け
2：各頂点がどのボーンからどれだけ影響を受けるか「ウェイト」を設定します
＊ウェイトは0（影響を受けない）から1（完全に影響を受ける）の範囲で設定
＊ウェイトペイントは、これらのウェイトを視覚的に編集する方法（0は青・1は赤）

メッシュとアーマチュアを関連付けする方法

スキニングを行う場合、複数のメッシュはアーマチュアに対して並列に配置することが一般的にわかりやすく、管理もしやすい

• アーマチュア（親）とメッシュ（子）の親子関係を設定する
  オブジェクトモードでShiftを押しながら選択（最後にアーマチュアを選択）
  Ctrl+P ペアレント（ペアレント解除はAlt+P）
  ＊通常、アーマチュアをメッシュの親として設定するとメッシュオブジェクトに自動的にアーマチュアモディファイアが追加される
  • 「空のグループで」
  • 「自動のウェイトで」
  • 「エンベロープのウェイトで」
• メッシュにアーマチュアモディファイアを追加する
  メッシュオブジェクトを選択
  頂点グループを作成して選択
  プロパティパネルの「モディファイア」タブから
  「アーマチュアモディファイア」を追加し、関連付けたいアーマチュアを指定

「空のグループで」「自動のウェイトで」「エンベロープのウェイトで」

• 「空のグループで」
  メッシュに対応する全てのボーン（ボーンプロパティの変形のチェックがついているボーン）について頂点グループが作成されます
  全てウェイト0なので手動でウェイトを割り当てます
  ＊メッシュの「オブジェクトデータ」パネルから頂点グループを選択⇨頂点を選択⇨ウェイトの割り当て
• 「自動のウェイトで」
  アーマチュアのボーンとメッシュの頂点間のウェイトを自動的に計算して割り当てる
• 「エンベロープのウェイトで」
  頂点グループとは別の制御方法で、ボーンの周りに可視的な影響エリア（エンベロープ）を作成し、そのエリア内のメッシュ頂点に対して影響を与えます
  ＊アーマチュアモディファイアのバインド先をボーンエンベロープに変更します
  アーマチュアデータプロパティで表示方法をエンベロープ
  
  ボーンプロパティの「変形」から影響範囲を調整できる

頂点グループとは
メッシュを構成する頂点の集合で、特定の名前を付けることができます
特定の動きを特定の頂点グループにのみ適用することができます
ボーンをメッシュの頂点グループにリンクすることで、そのボーンがメッシュのどの部分を動かすかを指定します
手動で頂点グループを作成する場合は、編集モードで特定の頂点を選択
「オブジェクトデータ」から「+」アイコンをクリックして新しい頂点グループを作成し、選択した頂点をそのグループに割り当てます（「割り当て」ボタンを使用）

ウェイトの正規化について
メッシュの各頂点に割り当てられたウェイトの総和が1になるように調整すること
＊ある頂点のウェイトを1にして、他のボーンからは全く影響を受けない（ウェイト0）に設定したい場合など

ウェイトペイント

モデルの各頂点に色を付けて、各ボーンによる影響の度合いを示します
＊プロパティタブで数値を直接入力することもできますが、多くの場合「ウェイトペイントモード」の方が細かいウェイトの調整ができ効率的です

ウェイトペイントは頂点ベースで行われています（選択した頂点に色を塗る）
＊面を選択した場合も面を構成している頂点に対して色を塗っていることになる

ウェイトペイントモードへの切り替え方

• 塗りたいオブジェクトを選択
• オブジェクトモードのメニューからウェイトペイントモードを選択
  
  または「Ctrl+Tabキー」を押して表示されるモード選択メニューからウェイトペイントを選択

ウェイトペイントモードでは、色を使用してウェイトの強度を視覚的に表現

• 赤：高いウェイト値（強い影響）
• 青：低いウェイト値（弱い影響）
• 緑から黄色：中間のウェイト値

ウェイトペイントの表示方法を変更
＊ウェイト0の部分は黒にする

ビューポートの上部にある「オーバーレイ」アイコンをクリック
オーバーレイのドロップダウンメニューから、ウェイトペイントに関連するオプションを調整
＊ウェイト０の項目をアクティブにすると、ウェイト0の部分は黒になる

ブラシツールパネルとブラシツール

ブラシツールパネル

で使用するブラシを選択し
ブラシツールの設定パネル

でそのブラシの詳細な設定（ウェイト、半径、強さなど）を行います

「空のグループで」頂点グループを作りウェイトペイントする場合

• 「アーマチュアを選択」次に「メッシュ」の順に選択してウェイトペイントモードに切り替え、ウェイトペイントモードでボーンを選択（Ctrlを押しながら選択）すると、関連付けられた頂点グループが自動的にアクティブになる
  ＊意図した頂点グループが選択されているか確認すること
• ウェイトの割り当て
  ブラシツールを使用して、モデルの特定の領域にウェイトを編集します
  • ウェイト・半径・強さ調整（右クリックでパレメーターを表示）
    ショートカットは：ウェイト（Ctrl+F）・半径（F）・強さ（Shift+F）
  • 「減衰」を「一定」にするとベタ塗り
  • 左クリックで塗る
  • ウェイトの削除
    ウェイトメニューからクリーンを選択
    制限：制限値未満のウェイトが全て除去されます（1にすると全部除去）
    ＊不要なウェイトデータを削除することで、アニメーションの計算に必要なリソースが減り、パフォーマンスが向上
• 調整：ウェイトペイントモードでもボーンを動かすことができるので、確認しながら調整する

正規化について
正規化は一つの頂点が複数のボーン（頂点グループ）から影響を受ける場合に特に重要
たとえば、ある頂点がボーンAとボーンBの両方に影響を受けている場合、正規化を行うことで、ボーンAとボーンBからの影響の合計が常に1に保たれます

• 自動正規化
  ウェイトペイントモードで「オプション」タブを選択→「自動正規化」を有効にすると、ウェイトをペイントする際に自動的に正規化されます
  １で上書きすると、他のボーンからは全く影響を受けない（ウェイト0）にする
  ＊自動正規化がオンの状態でウェイトを調整する場合、１からは減らすことができないのでウェイトが0側から塗る
• 手動正規化
  ウェイトペイントモードで、ウェイトを調整したい頂点を選択
  Nキーでサイドメニューを開き頂点ウェイトで数値を直接書き換えることもできます
  書き換えると 合計が1でなくなるため正規化ボタンで正規化
  他のボーンとわけ合うようにする

頂点や面を選択した部分にだけペイントする（マスク機能）
＊マスク機能が有効な状態でボーンが選択ができない場合があるので、ボーンを選択する場合はマスク機能を無効にする

選択中のオブジェクトではなく特定の面や頂点を選択してペイントすることもできる
＊マスク機能（ショートカート：頂点のマスク機能は「Vキー」で切り替え）

Ctrlを押しながら選択
複数選択はCtrl + Shift

「Shift+K」：選択中の頂点にアクティブな設定（現在のウェイト・半径・強さ）を適用する
＊注意：この操作はウェイトの自動正規化（合計が1になるように調整）を行わない

エクスポート

gltfファイルでエクスポートするときのアニメーションのオプションについて

• 「現在のフレームを使用」がチェックされている場合、Blenderの現在のフレームのアニメーションのみがエクスポートされます
  ＊タイムラインで現在選択されているフレームから始まり、そこからアニメーションの終了フレームまでの間のアニメーションがエクスポートされます
• 再生範囲限定
  このオプションを有効にすると、アニメーションのエクスポート範囲がBlender内で設定された再生範囲に制限されます
  ＊全アニメーションではなく、特定のフレーム範囲のみがエクスポートされます
• サンプリングレート
  この数値は、アニメーションデータのサンプリング間隔を指定します。例えば「1」と設定すると、各フレームがサンプリングされますが、「2」を設定すると、1フレームおきにデータがサンプリングされることになります
  ＊ファイルサイズを削減できる場合がありますが、動きがスムーズでなくなる可能性もあります
• 常にアニメーションをサンプリング
  このオプションが有効の場合、キーフレームが設定されていないアニメーションプロパティでも、強制的に全フレームがサンプリングされます
  ＊非常に滑らかなアニメーションを保証することができますが、ファイルサイズが大きくなる
• NLAトラックでグループ化
  有効にすると、エクスポートされるアニメーションがNLAトラックに基づいてグループ化されますNLAトラックを使用して複数のアニメーションクリップを管理している場合、このオプションは特が便利
• アクション別のボーンズポーズをリセット
  アクションごとにポーズをリセットする必要がある場合、このオプションを有効にします
  ＊アクションが切り替わるたびにボーンの位置が初期状態に戻り、予期しないアニメーションの変形を防ぐことができます