Top > ComputerGraphics > XNA > Vertex > SimpleVertex_2
Last-modified: Sat, 09 Jun 2012 18:10:54 JST
Counter:1792 Today:2 Yesterday:1 Online:3
このエントリーをはてなブックマークに追加

頂点の取り扱い-2「TriangleList/Index」

About

0.png

 前回は頂点情報を利用した三角形ポリゴンの描画を行った。ここで解説する内容は、前回の内容を引き継いでいるので必要に応じて参照されたい。ここでは複数の三角形ポリゴンの描画について取り扱う。例として2つの三角形ポリゴンを描画して四角形を描画する。3DCGで描画される"面"は、見た目や表現はどうであれ全て三角形の集合で構成される。つまりゲームで見られるキャラクタは全て三角形の集合である。

頂点情報の定義

1.png

 前回と同様に、まずは頂点定義の定義をしておく。四角形を2つの三角形で表現しようとすると、頂点は4つ必要になる。ここでは次の様な4点を用意することにした。ここで紹介する図は以降で複数回参照される。

        private VertexPositionColor[] vertices = {
            new VertexPositionColor(new Vector3(-1, 0, 0), Color.Red),
            new VertexPositionColor(new Vector3(-1, 1, 0), Color.Green),
            new VertexPositionColor(new Vector3(1, 0, 0), Color.Blue),
            new VertexPositionColor(new Vector3(1, 1, 0), Color.Yellow),
        };

前回と同じ手法を用いる場合

 ここで前回の手法を用いて描画する場合を考えてみる。前回は描画する三角形の頂点を全て定義して描画していたので、同じ手法を用いて描画しようとすると、頂点定義は次の様になる。

        private VertexPositionColor[] vertices = {       
            //1つ目の三角形
            new VertexPositionColor(new Vector3(-1, 0, 0), Color.Red),
            new VertexPositionColor(new Vector3(-1, 1, 0), Color.Green),
            new VertexPositionColor(new Vector3(1, 0, 0), Color.Blue),

            //2つ目の三角形
            new VertexPositionColor(new Vector3(1, 1, 0), Color.Blue),
            new VertexPositionColor(new Vector3(1, 0, 0), Color.Green),
            new VertexPositionColor(new Vector3(-1, 1, 0), Color.Red),
        };

 ソースコードから見てとれる通り、四角形ポリゴンの表示に必要な頂点数は4つであるのに、重複する頂点(先の図で[1][2])があるために、頂点の定義が6つになっている。これは非常に非効率で、もしも膨大な数の連続するポリゴンを表示することになると、その非効率さはどドンドン酷くなっていく。一般的にはこの様な手法は用いないので、ここではこうならないための手法を解説している。

Indexの定義

 先の通り、普通は重複した頂点が生じないよう、必要最低限の頂点だけ宣言する。しかしながらこのままでは、三角形がどの頂点から構成されているか判別できず、描画することができない。そこで「三角形を構成する頂点は、宣言された頂点の何番目と何番目と何番目である」という情報を用意する。利用する頂点と、その順番を示す情報を「Index」という。まずは次のソースコードを参照されたい。

        private VertexPositionColor[] vertices = {
            new VertexPositionColor(new Vector3(-1, 0, 0), Color.Red),
            new VertexPositionColor(new Vector3(-1, 1, 0), Color.Green),
            new VertexPositionColor(new Vector3(1, 0, 0), Color.Blue),
            new VertexPositionColor(new Vector3(1, 1, 0), Color.Yellow),
        };

        private Int16[] indexes = {
            0,
            1,
            2,
            3,
            2,
            1
        };

 ここで頂点は長さ4の配列として宣言されている。さらに三角形を構成する頂点を指定するのが、その下の「indexes」である。indexesの配列は、先頭から順に、三角形を構成する頂点の配列参照番号を指定する。つまりここでは indexes はまず「0,1,2」と並んでいるので、1つ目の三角形は、vertices の0番目、1番目、2番目の頂点を使って構成される。続いて「3,2,1」と並んでいるので、2つ目の三角形には3番目、2番目、1番目の頂点が用いられる。こうして indexes では、宣言された頂点の内、どの頂点をどういう順序で利用するのかを指定する。下に対応関係を図示したので適宜参照されたい。

2.png

頂点の描画

 頂点の描画に関しては、前回取り扱った内容と殆ど同様である。まずは次の設定を行い、頂点色の有効化を忘れないようにしておく。ここでは、前回利用した「DrawUserPrimitivesメソッド」ではなく「DrawUserIndexedprimitives<T>メソッド」を利用する。要するに、前回はIndex(利用する頂点とその順番)を指定する必要はなかったが、今回はIndex情報を利用しましょうね、ということになる。

                //頂点色の有効化
                basicEffect.VertexColorEnabled = true;

                 //2枚のポリゴンを描画する
                this.GraphicsDevice.DrawUserIndexedPrimitives<VertexPositionColor>
                    (PrimitiveType.TriangleList,
                    vertices, 0, vertices.Length,
                    indexes, 0, indexes.Length / 3);

 メソッドの引数には、まず描画する物体の種類を指定する。ここは前回と変わらず、三角形を描画するための「TriangleList」を選択する。次いで、描画する三角形の頂点情報の配列、その配列の何番目からが必要な頂点情報であるか(オフセット)と、利用する頂点数をそれぞれ指定する。ここからが特に新しい要素で、まず利用するIndex(の配列)を指定し、頂点情報と同じくオフセットを指定する。最後に、描画する図形の数、ここでは三角形の数を指定することになる。三角形の数はIndexで指定する頂点の数/3で求めることができる。ここでは2つ描画することを前提としているので愚直に2としても良い。

サンプルの実行結果

3.png

 見た通り2つの三角形が繋がって四角形を描画することができた。

References