「Blender」で作成したボーンアニメーションを「UltraMotion3D」ライブラリで表示してみよう

はじめに

今回で本連載は最終回となります。今回はBlenderでキャラクターを作りボーンアニメーションさせ、それを筆者が開発した「Vixar Vision」でjsファイルに変換し「UltraMotion3D」ライブラリでボーンアニメーションを表示します。

前回までにコーディングしてきた「lib/BoneModel3D.js」「lib/Material.js」「lib/Matrix3D.js」「lib/Model3D.js」「lib/UltraMotion3D.js」「lib/Vector3D.js」「lib/WGSL.js」「index.html」に追記して、今回は図1のようなキャラクターをレンダリングします。

Blenderでキャラクターを作り
ボーンアニメーションさせる

Blenderでキャラクターをモデリングし、アーマチュアを設定してボーンを割り当て、ウェイトマップを適用することでアニメーションさせます。ウェイトマップは、各ボーンが頂点にどの程度影響するかを示す情報です。

キャラクターをモデリングする

Blenderを起動すると、最初に1つのキューブが表示されます。これをクリックして選択した状態で「Edit Mode」に切り替えます。図2のように「Select Mode」で「Face」を選択し、「Extrude Region」や「Move」ツールを繰り返し使ってポリゴンを押し出し、ヒト型の形状を作成します。

アーマチュアとボーンを埋め込む

1キャラクター分のボーンの集合を「アーマチュア」と呼びます。「Object Mode」で「Add」→「Armature」を選択してアーマチュアを作成し、図3のように「Edit Mode」に切り替えて[E]キーでボーンを追加し、位置を調整します。

「Object Mode」で[Shift]キーを押しながら、まず「Cube」、次に「Armature」の順に選択し、「Object」→「Parent」→「Armature Deform」→「With Automatic Weights」を実行すると、ボーンに対応した頂点のウェイトマップが自動で設定されます。

アニメーションさせる

「Animation」タブをクリックして「Pose Mode」に切り替えます。1フレーム目で全てのボーンを選択し[K]キーを押して「Rotation」のキーフレームを追加します。次に30フレーム目へ移動し、ボーンを1つずつ選択して「Rotate」ツールで回転させ、[K]キーで回転のキーフレームを追加します。最後に1フレーム目へ戻り、図4のように「▷」ボタンを押してアニメーションを再生します。

BlenderからFBXファイルに書き出す

Blenderで「File」→「Export」→「FBX(.fbx)」メニューを実行してファイルダイアログを開きます。「Armature」「Mesh」「Apply Transform」の3つのチェックを押下した状態で「Export FBX」ボタンをクリックして「Character.fbx」ファイルに書き出します。

Vixar Visionで
UltraMotion3D形式jsファイルに変換する

こちらのURLから「Vixar Vision」をダウンロードして起動します。「ファイル」→「開く」でCharacter.fbxを読み込むとキャラクターが表示されます。

続いて「ファイル」→「アニメーションを読み込む」から同じ Character.fbx を指定すると、図5のようにキャラクターがアニメーションします。さらに同メニューで別のFBXファイルを読み込めば、複数のアニメーションを追加できます。

最後に「ファイル」→「名前を付けて保存」を選び、「ファイルの種類」を「WebGPUファイル(*.js)」に指定して「Character.js」として書き出します。