MMDモデルを使用したデスクトップユーティリティの開発 その9 スキンメッシュアニメーション(FKのみ)

前 [その8](http://qiita.com/JI1LDG/items/be6dae46846a08cbc5ca)
次 その10

完全に理解できた訳ではないので、間違っている部分もあるかもしれません。
##今回やること
FK・モーションの実装
MSAAの設定
カリングモードの切り替え

ソース(GitHub): [ModelViewer](https://github.com/JI1LDG/ModelViewer/tree/82f2a9532b4475d5cc375a49c05a73bbdfd9edff), [MmdFileLoader](https://github.com/JI1LDG/MmdFileLoader/tree/2dbe3f5e2bad06c34c0e7c505af6611bbbdb8add)

##ボーン
MMDでモデルを動かそうとするときに表示される、これ。
![cirno_bone.png](https://qiita-image-store.s3.amazonaws.com/0/135830/f4874a00-2c74-6f5a-8b01-fc4ba37efca6.png)

ボーン(を可視化したもの)です。
このボーンを回転させるなどすることで動きを表現します。

PMDファイルでは、ボーンを以下のように定義しています。(今回使用するパラメータ・情報のみ抜粋)

```csharp:Bone
public class PmdBone {
	public string Name;
	
	//親ボーンのインデックス なしの場合は-1
	public short ParentIndex;
	
	//子ボーンのインデックス なしの場合は0
	public short TailIndex;
	
	//ボーンの根本の位置
	public Vector3 HeadPosition;
}

public class PmxBone {
	public string Name;
	
	//ボーンの根本の位置
	public Vector3 Position;
	
	//親ボーンのインデックス なしの場合は-1
	public int ParentIndex;
	
	//子ボーンのインデックス なしの場合は-1
	public int TailIndex;

	//ボーンの変形階層
	public int Rank;

	//ボーンの変形フラグ
	public BoneFlagEnum BoneFlag;
}

public enum BoneFlagEnum {
	TransformAfterPhysic = 0x1000
}
```

注意しなければいけない点として、
PMDでは子ボーンのインデックスは「なしの場合は0」になっています。PMXのデータと共通化することを考え、-1に修正しています。
PMXではボーンの向きを決定するために、子ボーンのインデックスで指定 or ボーンの向きを表すベクトルのどちらかで指定します。Offsetで指定されている場合は、子ボーンのインデックスを-2にしています。
さらに、PMXではボーンを変形させる順番が物理演算前後と階層により決まります。

##FK(フォワードキネマティクス)
ボーンを変形させる方法の一つ、FK(フォワードキネマティクス)を実装します。
FKについては[こちら](http://marupeke296.com/DXG_No27_SkinMeshAnimation.html)が詳しいです。

###シェーダの変更
ボーンの計算をさせる前に、ボーンに従って頂点を動かすためにシェーダに情報を送る準備をします。

```effect.fx
matrix World;
matrix View;
matrix Projection;
matrix BoneMatrix[512];
(省略)

struct Vertexes {
	float4 position : SV_Position;
	float4 normal : NORMAL;
	float2 uv : TEXCOORD;
	int4 idx : BLENDINDICES;
	float4 weight : BLENDWEIGHT;
};

(省略)

OutVert myVertexShader(Vertexes input) {
	OutVert output = (OutVert)0;
	matrix Comb = (matrix)0;
	for(int i = 0;i < 4;i++) {
		if(input.idx[i] == -1) continue;
		Comb += BoneMatrix[input.idx[i]] * input.weight[i];
	}
	(省略)
}

(省略)
```

BoneMatrixにはボーンの変形行列を格納します。ボーンの数は多めに512に設定しています。
頂点データには、頂点に影響を与えるボーンのインデックスとその重みを表す配列を渡しています。

```csharp:Bone.cs
public void SetBoneMatrix(Matrix[] bones) {
	effect.GetVariableByName("BoneMatrix").AsMatrix().SetMatrixArray(bones);
}
```

###ボーン変形行列の作成
[こちら](http://marupeke296.com/DXG_No61_WhiteBoxSkinMeshAnimation.html)を参考にしました。

ボーンの親子関係を表現するSkinBoneクラスを作成します。

```csharp:Bone.cs
public class SkinBone {
	public int Id { get; private set; }
	public string Name { get; private set; }
	
	//親ボーン
	public SkinBone Parent { get; set; }
	
	//子ボーンのリスト
	public List<SkinBone> Children { get; set; }
	
	//階層
	public int Rank { get; private set; }
	
	//物理演算前に変形させるか
	public bool IsBeforePhysic { get; private set; }

	//初期姿勢行列
	public Matrix Init { get; private set; }
	
	//オフセット行列
	public Matrix Offset { get; private set; }
	public Matrix Bone { get; set; }

	//回転量
	public Quaternion Rotate { get; set; }
	//移動量
	public Vector3 Translate { get; set; }

	//モーション用の回転・移動量
	public Quaternion MotionRotate { get; set; }
	public Vector3 MotionTranslate { get; set; }
}
```

モデルから読み込んだボーンの情報をSkinBoneクラスに流しこみます。
初期姿勢行列はボーンの根本へ移動する行列を用意し、オフセット行列を親から掛けていくことで得られます。
オフセット行列はボーンを原点に移動させる行列です。

```csharp:Bone.cs
private void CreateMatrix(MmdBone[] bones, int index) {
	Vector3 pos = bones[index].Position;

	Init = Matrix.Translation(pos);
	Offset = Matrix.Invert(Init);
}

public static void CalcRelative(SkinBone me, Matrix parent) {
	foreach(var c in me.Children) {
		CalcRelative(c, me.Offset);
	}
	me.Init *= parent;
}
```

ボーンの回転量と移動量を`Rotate`と`Translate`に設定し、変換行列を更新させます。
シェーダに変換行列を渡すことで、モデルを動かすことができます。

```csharp:Bone.cs
//ボーン行列の更新
private void UpdateBone() {
	foreach(var b in Bones) {
		b.Bone = CalcTranspose(b.Rotate, b.Translate) * b.Init;
		if(b.Parent != null) b.Bone *= b.Parent.Bone;
	}
}

//回転と移動から変換行列の作成
public Matrix CalcTranspose(Quaternion Rotation, Vector3 Translation) {
	return Matrix.RotationQuaternion(Rotation) * Matrix.Translation(Translation);
}

//変換行列配列
public Matrix[] Results {
	get {
		return Bones.Select(x => x.Offset * x.Bone).ToArray();
	}
}
```

##モーション
###VMD
モーションデータとしてVMDを使用します。
フォーマットは[こちら](http://blog.goo.ne.jp/torisu_tetosuki/e/bc9f1c4d597341b394bd02b64597499d)

```csharp:VmdMotion
public class VmdMotion {
	public string BoneName;
	public int FrameCount;
	public Vector3 Position;
	public Quaternion Rotation;
}
```

MMDにおいてモーションとモーションの間は、三次ベジエ曲線を用いて補完されますが、とりあえず線形補完にします。
`FrameCount`は、相対的なフレーム数です。`FrameCount`が`[0, 10, 20, 30]`とあった場合、0・10・20・30フレーム目ではなく、0・10・30・60フレーム目です。

モーションの再生・適用を管理する`MotionManager`クラスを作ります。
現在のフレームを算出するため、`System.Diagnostics.Stopwatch`を用いて再生時間を計測します。
再生されるモーションデータのリストをボーンごとに追加し、それぞれのボーンのモーションが始まるフレームと終了するフレーム番号を記録します。

```csharp:Motion.cs
public class MotionManager {
	private MotionBone[] motionList;
	private Stopwatch stopWatch;
	private readonly int FPS = 30;
	public float NowFrame { get { return FPS * stopWatch.ElapsedMilliseconds / 1000.0f; } }
}

public class MotionBone {
	public string BoneName;
	public List<MotionData> MotionList;
	public int StartFrame;
	public int EndFrame;
}

public class MotionData {
	public int FrameCount;
	public Quaternion Rotate;
	public Vector3 Translate;
}
```

モーションデータを格納し、モーションの再生が始まったら、その時点のフレームをもとに、各ボーンの回転・移動量を計算します。

```csharp:Motion.cs
public ApplyedMotion[] GetMotion() {
	var tmp = new ApplyedMotion[motionList.Length];
	var nowFrame = NowFrame;

	for(int i = 0;i < tmp.Length; i++) {
		tmp[i] = new ApplyedMotion();
		var nowList = motionList[i].MotionList;

		//このボーンのモーションがない場合
		if(nowList.Count == 0) continue;
		int startFrm = motionList[i].StartFrame;
		int endFrm = motionList[i].EndFrame;

		//最後のモーションが終わっている場合
		if(endFrm <= nowFrame) {
			var nowAt = nowList.Last();
			tmp[i].Rotate = nowAt.Rotate;
			tmp[i].Translate = nowAt.Translate;
		//最初のモーションが始まっていない場合
		} else if(nowFrame < startFrm) {
			int nowIdx = 0;
			var t = (nowFrame) / (nowList[nowIdx].FrameCount);
			tmp[i].Translate = Vector3.Lerp(Vector3.Zero, nowList[nowIdx].Translate, t);
			tmp[i].Rotate = Quaternion.Lerp(Quaternion.Identity, nowList[nowIdx].Rotate, t);
		} else {
			int nowIdx = 0;
			while(nowList[nowIdx].FrameCount <= nowFrame) nowIdx++;
			if(nowIdx > 0) nowIdx--;
			var t = (nowFrame - nowList[nowIdx].FrameCount) / (nowList[nowIdx + 1].FrameCount - nowList[nowIdx].FrameCount);
			tmp[i].Translate = Vector3.Lerp(nowList[nowIdx].Translate, nowList[nowIdx + 1].Translate, t);
			tmp[i].Rotate = Quaternion.Lerp(nowList[nowIdx].Rotate, nowList[nowIdx + 1].Rotate, t);
		}
	}
	
	return tmp;
}

public class ApplyedMotion {
	public Quaternion Rotate;
	public Vector3 Translate;
}
```

各ボーンの回転・移動量を計算したあと、ボーンにそれを適用します。

```csharp:DrawMmdModel.cs
//現在のフレームのボーンの動きを取得し、セットする
boneMng.SetPose(motMng.GetMotion());
//変換行列を計算する。
boneMng.Update();
//シェーダにセットする
effect.SetBoneMatrix(boneMng.Results);
//描画
effect.DrawAll(camera);
```

やっと踊らせられました。
![dancing.png](https://qiita-image-store.s3.amazonaws.com/0/135830/d710f3ae-3199-05c4-c6e7-8cf253b7dd88.png)

今回実装したのはFKのみなので、足がぶんぶん振れています。

##アンチエイリアス
前回までの画像を見ると分かるとおり、ちょっとギザギザしてました。
`SlimDX.Direct3D11.Device`を作成したあとに`Device.CheckMultisampleQualityLevels`で`Quality`と`Count`を調べ、`SwapChainDescription`と`Texture2DDescription`の`SampleDescription`に設定することで、アンチエイリアスが働き、綺麗に描画してくれます。

##Lat式ミクの描画
Lat式ミクを描画しようとすると下図のようになってしまいます。
Lat式ミクは若干特殊で、輪郭などを表現するために透明な裏返しのポリゴンを顔に貼り付けているそうです。

![lat.png](https://qiita-image-store.s3.amazonaws.com/0/135830/f47ecf60-d6e9-0978-0012-24eca6149c31.png)

マテリアルのアルファ値が0.999のときのみにカリングさせることで正しく描画されます。
[こちら](http://d.hatena.ne.jp/edvakf/20111020/1319083256)を参考にしました。

```csharp:Effect.cs
private void SetMaterial(int nowCount) {
	texture.SetTexture(nowCount);
	SetLight(nowCount);
	SetCull(!(materials[nowCount].DrawFlag.HasFlag(DrawFlagEnumes.DrawBoth)
			|| materials[nowCount].Alpha == 0.999f));
}
```

![latok.png](https://qiita-image-store.s3.amazonaws.com/0/135830/36e5d5df-1c44-a53d-636b-fe03ca07cafb.png)

##さいごに
次回はIKの実装とTGA読み込み対応をするつもりです。