MMDモデルを使用したデスクトップユーティリティの開発 その3 三角形の表示

前: [その2](http://qiita.com/JI1LDG/items/9de611bce86c0b3d5b6f)
次: [その4](http://qiita.com/JI1LDG/items/973f41efae3d3c101ac1)

##今回やること
1. 三角形の表示
2. 四角形の表示
3. とりあえずPMDモデルを表示してみる 

今回のソース: [三角形](https://github.com/JI1LDG/ModelViewer/tree/cb5d20af581792ab554fcc8ceab1839520d46d34),  [PMDモデル表示](https://github.com/JI1LDG/ModelViewer/tree/0b787a69c6839006bc91911ca5c3cf5cf0681b1e)

##三角形の表示
細かいことは[こちら](http://memeplex.blog.shinobi.jp/directx11/c-%E3%81%A7directx11%20slimdx%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%9D%E3%81%AE04%20%E4%B8%89%E8%A7%92%E5%BD%A2%E3%81%AE%E8%A1%A8%E7%A4%BA%EF%BC%88%E8%89%B2%E3%81%AA%E3%81%97%EF%BC%89)を参照してください。

前回でDirectXを使用する準備が整ったので、描画の基本となる三角形を表示します。
三角形にする理由は、MMDで使用されるモデルデータは、下の図のように三角形の集合で表されるからです。
MMDでモデルを表示し、「表示」→「ワイヤフレーム表示」を選択することで、確認できます。
(モデル: えと式チルノ)
![cirno_wire.jpg](https://qiita-image-store.s3.amazonaws.com/0/135830/98241d81-2ca4-dd8a-9854-8c3ea2cbe63e.jpeg)

DirectXで三角形を表示するためには、以下の4つを生成しなければなりません。
1. 頂点や色などの情報を格納するBuffer
2. Bufferに格納されたデータの解釈方法を定義するInputLayout
3. 影や色合いなどをつけたり決めたりするEffect
4. 描画範囲を決めるViewport

さらに、Effectでの動作(どのように描画するか)を定義するために、HLSL言語を使います。
[これ](https://github.com/JI1LDG/ModelViewer/tree/cb5d20af581792ab554fcc8ceab1839520d46d34)の実行ファイルと同じフォルダに、以下のHLSL言語で書かれたエフェクトファイルを追加して実行します。

```hlsl:effect.fx
float4 myVertexShader(float4 position: SV_Position) : SV_Position {
	return position;
}

float4 myPixelShader() : SV_Target {
	return float4(1, 1, 1, 1);
}

technique10 myTechnique {
	pass myPass {
		SetVertexShader(CompileShader(vs_5_0, myVertexShader()));
		SetPixelShader(CompileShader(ps_5_0, myPixelShader()));
	}
}
```

成功すれば下の画像のようになるはずです。
描画領域は、中心を原点とし、x軸y軸共に-1.0～1.0の範囲です。
![tri.png](https://qiita-image-store.s3.amazonaws.com/0/135830/8a36079b-108e-943d-e856-97a5df87f4b3.png)


Triangle.csの `new Vector3(0, 0.5f, 0), new Vector3(0.5f, 0, 0), new Vector3(-0.5f, 0, 0)` 部分で、頂点バッファに送る頂点の座標を定義しているので、ここを変えることで表示される三角形の形も変わります。
また、エフェクトファイルのピクセルシェーダ部分の返り値を変更することで、色を変えることもできます。
下図左: `new Vector3(0, 0.5f, 0), new Vector3(0.5f, 0, 0), new Vector3(0, 0, 0)`に変更
下図右: `return float4(1, 0, 1, 1);`に変更
![tri_edit.png](https://qiita-image-store.s3.amazonaws.com/0/135830/44fad3a0-11f4-8076-98d1-6c487543c0da.png)![tri_shader.png](https://qiita-image-store.s3.amazonaws.com/0/135830/b0dce5e8-d28a-74c8-5505-7ecf2bacf7b7.png)

##四角形の表示
三角形が表示できれば、少しコードを変えることで四角形の表示が可能です。
Triangle.csの頂点バッファに送る頂点の座標を定義している部分に`new Vector3(0, 0.5f, 0), new Vector3(0.5f, 0, 0), new Vector3(0, -0.5f, 0)`を加えます。
頂点の数が3から6に増えたので、`device.ImmediateContext.Draw(3, 0);`の3を6にして実行すると、下の図のようになります。
![square.png](https://qiita-image-store.s3.amazonaws.com/0/135830/651912fe-d5ce-dd01-5b4a-ffc86bc204e8.png)

##PMDモデルの読み込みと表示
PMDファイルから読み込んだ情報を元に、三角形の表示をたくさん行うことで、モデルの表示ができるはずです。

[こちら](https://github.com/JI1LDG/MmdFileLoader/releases/tag/0.1.1)を使って頂点座標を取得し、頂点バッファに送り、描画させるだけです。
頂点のリストは`pmdLoader.Vertex.Select(x => x.Position).ToArray()`で取得、
頂点の数は`pmdLoader.Vertex.Length`で取得できます。

描画する領域は、x軸y軸共に-1.0～1.0の範囲なので、何もせずに描画しようとすると、「足しか見えない」となるかもしれません。
今回は、PMDEditorでモデルを1/20に縮小したものを使用しています。

実際に読み込んで表示させた結果がこちらです。
![cirno_vertonly.png](https://qiita-image-store.s3.amazonaws.com/0/135830/bd38b4af-e7b8-5d73-9c24-d9a12dab23f7.png)

なんとなく羽のようなものがあるのは見えますが、変なことになってますね。
実は、読み込んだ頂点データだけではモデルを表示するのには不十分です。
三角形の三点の頂点を指定する頂点インデックス(面頂点)というものが必要になります。

##おわりに
次回は頂点インデックスとカメラを扱います。