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

前: その2
次: その4

今回やること

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

今回のソース: 三角形, PMDモデル表示

三角形の表示

細かいことはこちらを参照してください。

前回でDirectXを使用する準備が整ったので、描画の基本となる三角形を表示します。
三角形にする理由は、MMDで使用されるモデルデータは、下の図のように三角形の集合で表されるからです。
MMDでモデルを表示し、「表示」→「ワイヤフレーム表示」を選択することで、確認できます。
(モデル: えと式チルノ)

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

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

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の範囲です。

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);に変更

四角形の表示

三角形が表示できれば、少しコードを変えることで四角形の表示が可能です。
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にして実行すると、下の図のようになります。

PMDモデルの読み込みと表示

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

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

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

実際に読み込んで表示させた結果がこちらです。

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

おわりに

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