かんたんXNA4.0 HLSL編 その３ スカラーとベクトル型

前回の終わりのほうでHLSLを直接いじると
おもしろいいことができるというようなことを書いた気がしますが、
それにはまず変数を操作できないといけないことに気がつきました・・・・・・。

そこでスカラー型とベクトル型の変数に関する簡単な説明をしながら
そのおもしろい効果を見ていこうと思います。

---

スカラーとベクトル型

HLSLで使えるスカラー型（普通の数値を表す型）は
以下のようなものがあります：

HLSLのスカラー型

型名	説明
bool	真偽を表します。trueかfalseです。
int	32bitの符号付き整数です。
half	16bitの浮動小数点数です。
float	32bitの浮動小数点数です。
double	64bitの浮動小数点数です。

そして、さらにそれをまとめたベクトル型の変数を作ることができます。
HLSLの目的からして、ベクトルはよく使うでしょうからね。

[成分の型][ベクトルの成分の数]　[変数名];

具体的にはこんな感じです。

float4 color;

float4は４つの成分を持つベクトルで、
位置や色を表すのに使われます。
(「今やっているのは3DCGなのに、どうして位置を表すのに4次元のベクトルを使うんだろう？」と思われるかもしれません。これはおそらく頂点データをマトリックスで変換するときの計算が関係しています。より柔軟なデータの変換をするためには、3次元のベクトルとして使うよりも4次元のベクトルとして扱ったほうが都合がいいのです。拡大なんかは3次元のままでもいいのですが、たとえば平行移動するときには3次元ではなく4次元ベクトルとして計算しなくてはなりません。つまり計算上の都合です。シェーダの引数として使われる空間ベクトルの4つ目の成分wには変換の計算を上手くやるため1が入っています。この値は計算に使うため変更してはいけません。たとえばwに2をセットすると、平行移動の距離も2倍になって、結果がなんだか変なことになってしまいます。)

この４つの成分にアクセスするためには、
x, y, z, w, （位置としてアクセス）または
r, g, b, a（色としてアクセス）を使います。

位置としても色としてもアクセスできるなんて
ちょっとカプセル化が破壊されているように思えるかもしれません。
でもまぁマーチン・ファウラーさんも
少しくらいカプセル化が壊れてても大丈夫
みたいなことを言ってたのでいいんじゃないでしょうか（たぶん）。


ちなみに初期化は次のように行います：

//new が無いことに注意！！C/C++風です！
float4 variable = float4(0, 1, 2, 3); 

あるいはこうです：

float4 variable = {0, 1, 2, 3};

---

MyGame.cs

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

class MyGame : Game
{
    GraphicsDeviceManager graphics;

    Effect effect;
    VertexPositionColor[] vertices = {
            new VertexPositionColor(new Vector3(0, 1, 0), Color.White),
            new VertexPositionColor(new Vector3(1, 0, 0), Color.Blue),
            new VertexPositionColor(new Vector3(-1, 0, 0), Color.Red)
        };


    public MyGame()
    {
        graphics = new GraphicsDeviceManager(this);
    }

    protected override void LoadContent()
    {
        effect = Content.Load<Effect>("Content/MyEffect");
    }

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);

        foreach (var pass in effect.CurrentTechnique.Passes)
        {
            pass.Apply();

            GraphicsDevice.DrawUserPrimitives<VertexPositionColor>
            (
                PrimitiveType.TriangleList,
                vertices,
                0,
                vertices.Length / 3
            );
        }
    }
}

MyEffect.fx

struct VertexPositionColor
{
	float4 Position : POSITION;
	float4 Color : COLOR;
};

VertexPositionColor MyVertexShader(VertexPositionColor input)
{
	return input;
}

float4 MyPixelShader(float4 color : COLOR) : COLOR
{
	color.r = 0;
	return color;
}

technique MyTechnique
{
	pass MyPass
	{
		VertexShader = compile vs_2_0 MyVertexShader();
		PixelShader = compile ps_2_0 MyPixelShader();
	}
}

ここではピクセルシェーダで各ピクセルの赤い成分を0にしています。
そのため三角形全体から赤っぽさが消えています。

※参考までに、赤っぽさを消す前はこんなかんじでした：
参考：赤っぽさを消す前

各ピクセルの赤い成分を消すために、ピクセルシェーダで
color.r = 0;
としています。
これは実は
color.x = 0;
としても同じです。変な感じはしますけどね。

---

複数の成分を扱う

ここまではC#的な観点からもまだ理解しやすいものだったと思います。
つまりメンバ変数やプロパティのような感じだからです。

しかしここから、見慣れない不穏な感じがでてきます。

こんな風に、複数の成分にアクセスできるのです。

color.rb = 0;

//color.r = 0; 
//color.b = 0; 
//と同じ

ふつうのC言語系の言語になれている人は絶句するのではないでしょうか！
これはrとbの両方を0にしているのですが、
書き方としてはまるでrbというメンバがあるかのようです。

もちろん実際はそんなことはなくて、書き方としてこういうのがあるだけです。
順番を逆、color.br = 0;としても同じことです。

そしてここでは２つの成分だけを同時に扱っていますが、
たとえば３つの成分でcolor.rgb = 0;なんてのもアリです。

struct VertexPositionColor
{
	float4 Position : POSITION;
	float4 Color : COLOR;
};

VertexPositionColor MyVertexShader(VertexPositionColor input)
{
	return input;
}

float4 MyPixelShader(float4 color : COLOR) : COLOR
{
	color.rb = 0;
	return color;
}

technique MyTechnique
{
	pass MyPass
	{
		VertexShader = compile vs_2_0 MyVertexShader();
		PixelShader = compile ps_2_0 MyPixelShader();
	}
}

赤と青の成分を消したため、緑の成分だけが残っています。


また、次のように書くことで成分を入れ替えることができます：

color.rb = color.br;

struct VertexPositionColor
{
	float4 Position : POSITION;
	float4 Color : COLOR;
};

VertexPositionColor MyVertexShader(VertexPositionColor input)
{
	return input;
}

float4 MyPixelShader(float4 color : COLOR) : COLOR
{
	color.rb = color.br;
	return color;
}

technique MyTechnique
{
	pass MyPass
	{
		VertexShader = compile vs_2_0 MyVertexShader();
		PixelShader = compile ps_2_0 MyPixelShader();
	}
}

一見何も変わっていないように見えますが注意ぶかく見てください。
赤と青が入れ替わっています。(左右反転したようにも見えますが、変わっているのは色です)
ここではrとbだけ入れ替えていますが、
r, g, bの３つでローテーションのように入れ替えることも可能です。

---

スカラーとベクトルの計算

スカラーとベクトルを一緒に計算することもできます。
その場合、ベクトルの各成分がスカラーと計算されます。

たとえば、

color += 0.3f;

は次と同じです：

color.r += 0.3f;
color.g += 0.3f;
color.b += 0.3f;
color.a += 0.3f;

struct VertexPositionColor
{
	float4 Position : POSITION;
	float4 Color : COLOR;
};

VertexPositionColor MyVertexShader(VertexPositionColor input)
{
	return input;
}

float4 MyPixelShader(float4 color : COLOR) : COLOR
{
	return 1 - color;
}

technique MyTechnique
{
	pass MyPass
	{
		VertexShader = compile vs_2_0 MyVertexShader();
		PixelShader = compile ps_2_0 MyPixelShader();
	}
}

ここでは色を反転しています。
colorの各成分が、1から引かれています。
{1, 1, 1, 1}が白なので、そこからもとの色を引くと
色がひっくり返るのです。

---

ベクトルとベクトルの計算

ベクトルとベクトルの計算は、お互いの各成分を計算します。
足し算は数学のベクトルの足し算と同じですが、
かけ算は内積や外積とは違うので注意してください。

足し算：
float4 position = float4(0, 1, 2, 3);
float4 offset = float4(1, 2, 3, 4);
//position + offset は {1, 3, 5, 7}
// {0 + 1, 1 + 2, 2 + 3, 3 + 4}

かけ算：
float4 materialColor = float4(0, 1, 2, 3);
float4 lightColor = float4(1, 2, 3, 4);
// materialColor * lightColor は {0, 2, 6, 12}
// {0 * 1, 1 * 2, 2 * 3, 3 * 4}

struct VertexPositionColor
{
	float4 Position : POSITION;
	float4 Color : COLOR;
};

VertexPositionColor MyVertexShader(VertexPositionColor input)
{
	return input;
}

float4 MyPixelShader(float4 color : COLOR) : COLOR
{
	float4 lightColor = float4(1, 0, 0.5f, 1);
	return lightColor * color;
}

technique MyTechnique
{
	pass MyPass
	{
		VertexShader = compile vs_2_0 MyVertexShader();
		PixelShader = compile ps_2_0 MyPixelShader();
	}
}

今度の三角形はピンクのライトが当たったようになっています。

ピクセルシェーダによって返される色は、

{1 * color.r, 0 * color.g, 0.5f * color.b, 1 * color.a}

です。

これは内積や外積とは違うことに注意してください。
詳しくは後で述べますが、内積はdot関数、外積はcross関数を使うのです。

かんたんXNA4.0 HLSL編 その２ 構造体

前回表示したポリゴンに色はついていませんでした。
使った頂点データには色がついていたにもかかわらず、
実際に描画された三角形のすべてのピクセルの色が白だったのです。

これは前回のエフェクトファイルが色を扱っていないことが原因です。
頂点シェーダでは、位置情報だけではなく色の情報も扱わなければなりませんし、
ピクセルシェーダだって引数として色をとらなければなりません。

位置だけでなく色の情報も扱うためには、その二つをまとめるための
構造体を作る必要があります。
（複数の戻り値を返すことはできませんからね）

構造体のつくり方はC/C++のものとほとんど同じです。
もっともセマンティクス（用途）をつける必要はありますが・・・。

struct 構造体名
{
        型 変数名1 : セマンティクス;
        型 変数名2 : セマンティクス;
...
};

具体的に書くとしたらこんな感じでしょうか。

struct VertexPositionColor
{
        float4 Position : POSITION;
        float4 Color : COLOR;
};

C#やJavaになれているひとは最後のセミコロン(;)を忘れないでください。
また、デフォルトでpublicのようにアクセスできることも意外かもしれません。

---

MyEffect.fx

struct VertexPositionColor
{
	float4 Position : POSITION;
	float4 Color : COLOR;
};

VertexPositionColor MyVertexShader(VertexPositionColor input)
{
	return input;
}

float4 MyPixelShader(float4 color : COLOR) : COLOR
{
	return color;
}

technique MyTechnique
{
	pass MyPass
	{
		VertexShader = compile vs_2_0 MyVertexShader();
		PixelShader = compile ps_2_0 MyPixelShader();
	}
}

MyGame.cs

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

class MyGame : Game
{
    GraphicsDeviceManager graphics;

    Effect effect;
    VertexPositionColor[] vertices = {
            new VertexPositionColor(new Vector3(0, 1, 0), Color.White),
            new VertexPositionColor(new Vector3(1, 0, 0), Color.Blue),
            new VertexPositionColor(new Vector3(-1, 0, 0), Color.Red)
        };

    public MyGame()
    {
        graphics = new GraphicsDeviceManager(this);
    }

    protected override void LoadContent()
    {
        effect = Content.Load<Effect>("Content/MyEffect");
    }

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);

        foreach (var pass in effect.CurrentTechnique.Passes)
        {
            pass.Apply();

            GraphicsDevice.DrawUserPrimitives<VertexPositionColor>
            (
                PrimitiveType.TriangleList,
                vertices,
                0,
                vertices.Length / 3
            );
        }
    }
}

 
今度は色がついています！

頂点シェーダで色を返すようになったので、
ピクセルシェーダの引数として色をとり、
それを描画に反映できるようになったのです。

でもまぁ、こんなんじゃBasicEffectだってできますし、
HLSLだなんてわけのわからないものを使うくらいなら
BasicEffectを使ったほうがずっとましだといえるでしょう。
しかし、HLSLをつかうと、いろいろとおもしろいことができるのです。
次回はそのことについて書くことにします。

かんたんXNA4.0 HLSL編 その１ エフェクトファイル

HLSLとは？

High Level Shader Language (HLSL)とは頂点データを
どのように処理して描画するかを表現するための特別な言語です。
この言語で書いたテキストファイルをコンパイルして、
C#でEffectクラスからコントロールするのです。
（BasicEffectのかわりです。というか、BasicEffect自体Effectから派生しています）

MSDNの記事には、これは上位レベルの言語で、
さらにC言語スタイルがベースになっててプログラマにとってなじみやすい
というような趣旨のことが書いてありますが、
しょうじきなところ真実はまったくの逆であるような気がします。
C言語ライクなのはたしかですが、C#やjavaになれているプログラマからすれば
かなり低レベルでしかもとっつきにくいように思えます。
（まぁでもHLSL以前では、アセンブリ言語をつかわなくてはならなかったため、
これでもまだマシになったほうなのです。）

ではなぜそんな言語を使わなければならないのでしょうか？
それはこの言語を使うと、C#だけを使うときより、
描画のやりかたをより細かくコントロールできるからです。
C#でBasicEffectを使うときよりより高度な描画ができるのです。
(そう、HLSLでやるのはBasicEffectとおなじです。
ただし、もう少し、細かい設定ができるのです。)

ここで少し復習です。
これまでかんたんXNAでは、頂点データをどのように描画するかを
BasicEffectクラスでコントロールしていました。
BasicEffectに頂点データをつっこんで、いろいろ処理させて、
ピクセルごとの色を計算し、ディスプレイに表示していたのです。
ところてんのかたまりをあの四角い器具に押しこんで
反対側から完成品の細長いところてんをニューとひねりだすようなかんじです。
データを突っ込み変形させていたのです。

つまり、DrawUserPrimitivesの引数に入れられた頂点データの
絶対座標をカメラからの相対座標に変換し、
それをさらに遠近法を考慮してデータ全体をゆがめ、
ライトの方向を考えて一部を暗くしたりし、
また質感をあらわすデータから色を微妙に調整し、
クスチャのデータなんかをまぜてピクセルの色を決めていたのです。
これはようするに、頂点データをピクセルごとの色に変換する
コンバータの一種と考えてもいいでしょう。

これでも十分に面白いゲームは作れるでしょう。
ただ、もう少し複雑なエフェクトを使いたいというときもあるのではないでしょうか。
たとえば画像をぼかしたりトゥーンレンダリングしたりと
ピクセルごとの色を綿密に制御したいような場合です。

そこでBasicEffectではなく、より細かいことのできるHLSLを使います。
HLSLで頂点データからピクセルの色への変換の仕方を記述し、
そのテキストファイルをContentManagerで読み込み、
Effectクラスのオブジェクトを作るのです。
その後はBasicEffectと同じようなノリで描画を行います。

---

HLSLの骨組み

HLSLでエフェクトファイルを書くにあたって必ず必要なのが、
テクニックとパスの設定です。
このテクニックとパスというのは、BasicEffectで出てきた
CurrentTechniqueプロパティやEffectPassクラスが意味するものと同じです。
テクニックはパスを集めたもので、パスは描画の方法の設定を表すものです。
(テクニックもパスも複数書くことができますが、
ここでは話を簡単にするため１つだけの場合を見ます)

technique テクニック名
{
        pass パス名
        {
        }
}

このパスの中に書くのは、ちょうどコンストラクタや、
クラス内での変数の初期化のようなもので、
つまり設定の初期化です。
このHLSLでどのような描画をするかの設定を行うのです。

では具体的にどのような設定が必要なのでしょうか？
何とか動くようにするためには頂点シェーダとピクセルシェーダの２つを
セットする必要があります。

HLSLで記述するのは頂点データから各ピクセルの色を決定する方法です。
じつはこれは一度に行われるのではなく、二つのステップにわけられます。

ひとつめはこのエフェクトに流し込む頂点データをべつの頂点データに変換します。
ここでは、たとえば絶対座標をカメラからの相対座標にしたり、
それぞれの頂点に遠近法の効果を適用して位置のデータを変更したりというふうに、
頂点を頂点に変換します。
入ってくるデータは頂点データで、出て行くデータも頂点データです。
これを頂点シェーダ(VertexShader)といいます。関数の形で表されます。

もうひとつは、各ピクセルの情報からそのピクセルの
色を決めるステップです。
この変換では引数はそのピクセルのテクスチャ座標だったり、乱反射の色だったり、
あるいは別の何かだったりします。
戻り値はそのピクセルの描画される色です。
これをピクセルシェーダ(PixelShader)といいます。関数の形で表されます。

この二つのセットの仕方はこんな感じです。

technique テクニック名
{
        pass パス名
        {
                VertexShader = compile vs_2_0 頂点シェーダ名();
                PixelShader = compile ps_2_0 ピクセルシェーダ名();
        }
}

気分的にはC#のデリゲートのセットと似た感じです。
vs_2_0とかps_2_0とか言うのがありますが、これは機能のバージョンをあらわします。
たとえば頂点シェーダのバージョンが3.0ならvs_3_0です。
（vs : VertexShader, ps : PixelShader）

---

MyEffect.fx

float4 MyVertexShader(float4 position : POSITION) : POSITION
{
	return position;
}

float4 MyPixelShader() : COLOR
{
	return float4(1, 1, 1, 1);
}

technique MyTechnique
{
	pass MyPass
	{
		VertexShader = compile vs_2_0 MyVertexShader();
		PixelShader = compile ps_2_0 MyPixelShader();
	}
}

MyGame.cs

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

class MyGame : Game
{
    GraphicsDeviceManager graphics;

    Effect effect;
    VertexPositionColor[] vertices = {
            new VertexPositionColor(new Vector3(0, 1, 0), Color.White),
            new VertexPositionColor(new Vector3(1, 0, 0), Color.Blue),
            new VertexPositionColor(new Vector3(-1, 0, 0), Color.Red)
        };


    public MyGame()
    {
        graphics = new GraphicsDeviceManager(this);
    }

    protected override void LoadContent()
    {
        effect = Content.Load<Effect>("Content/MyEffect");
    }

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);

        foreach (var pass in effect.CurrentTechnique.Passes)
        {
            pass.Apply();

            GraphicsDevice.DrawUserPrimitives<VertexPositionColor>
            (
                PrimitiveType.TriangleList,
                vertices,
                0,
                vertices.Length / 3
            );
        }
    }
}

これがたぶんHLSLを使った最も簡単なプログラムのひとつなのではないでしょうか。
ここでは三角形を表示していますが、頂点データに指定した情報と違って、
色は真っ白になっています。（ほんとうは白、青、赤になるはず）
HLSLで色は無視して全部白にしてしまうようにプログラムしたからです。

MyEffect.fxのピクセルシェーダ、MyPixelShader関数を見てください。
これはすべてのピクセルの色を白にするということを意味しています。

float4 MyPixelShader() : COLOR
{
        return float4(1, 1, 1, 1);
}

"return float4(1, 1, 1, 1)"というのがそのピクセルの色です。
もしこれを"return float4(1, 0, 0, 1)"にすればすべてのピクセルは赤くなり
赤い三角形が表示されるでしょう。

ピクセルシェーダというのは普通引数にそのピクセルの情報を持っていてそれを元にピクセルの色をはじき出すのですが、
ここでは話を簡単にするために引数は省いています。
ほんとうなら引数としてテクスチャ座標やディフューズ色のデータが入ってきます。

ところで、関数名の横についている" : COLOR"というのが気になるかもしれません。
これは何を意味するかというと、この関数の戻り値が何なのかということです。
戻り値のデータの使われる目的、データ型のようなものです。
（しかしややこしいことに、データ型はちゃんと別にあるのです。float4がそれです。）
あるいは、ここにくるのはVertexElementUsage列挙型の
やつと同じようなものといえばわかりやすいかもしれません。
これは「セマンティクス」というもので、実は戻り値だけではなく、
頂点シェーダやピクセルシェーダの引数にもくっつきます。
これはグラフィックスデバイスがデータを識別するために使っているらしく、
これをつけておけば、たとえば引数の順番を入れ替えても平気です。
つけ方はこんな感じ：

データ型　変数名 : セマンティクス

つぎに頂点シェーダ、MyVertexShader関数を見てください。

float4 MyVertexShader(float4 position : POSITION) : POSITION
{
        return position;
}

これは頂点から頂点への変換を表す関数で、
ふつうなら位置の情報に遠近法を適用して結果を返したりするのですが、
ここでは話を簡単にするため位置データをそのまま返しています。

そのため描画した結果は3Dとは言いがたいものになっています。

セマンティクスは引数も戻り値も"POSITION"です。
つまり、位置のデータを扱っているということを意味しています。
ほんとうなら引数には色のデータも来るはずでした。
VertexPositionColorを頂点として使っているわけですからね。
しかしこのサンプルでは話を簡単にするために省きました。
（省くこともできるのです！）

そして戻り値についても同じです。
ほんとうなら戻り値は構造体になっていて、色のデータも含んでいるはずでした。
しかし構造体の話をするとややこしくなるため、シンプルに位置のデータだけにしたのです。

エフェクトファイルについての説明はこのくらいでいいでしょう。
このようにしてHLSLで作ったエフェクトファイルをC#からContentManagerで読み込み、
Effectクラスを使って操作するのです。
やりかたはBasicEffectとおなじです。

かんたんXNA4.0 その２９ カスタム頂点

さて、ここまで、頂点データに使う構造体は
あらかじめXNAに用意されたものを使っていました。

XNAに初めから用意されている頂点の構造体には
以下の４つがあります。
それぞれの名前はそのメンバを反映しています。
(いずれもMicrosoft.Xna.Framework.Graphics名前空間にあります)

名前	座標	色	テクスチャ座標	法線
VertexPositionColor	○	○	×	×
VertexPositionColorTexture	○	○	○	×
VertexPositionNormalTexture	○	×	○	○
VertexPositionTexture	○	×	○	×

しかし、ManagedDirectXでは14個用意されていたことを考えると、
「以下の４つがあります」というより
「以下の４つしかありません」という方が適切でしょう。
だいたいVertexPositionNormalColorが無いってどういうことですか！
初学者を殺す気ですか！？

しかしながら用意されていないからといって泣き寝入りする必要はありません。
頂点の構造体は自分で新たに作ることが出来るからです。
VertexPositionNormalColorはもちろん、
さまざまなタイプの頂点を作ることが出来るのです。

といっても頂点のメンバの型は何でもいいわけではなく、
Microsoft.Xna.Framework.Graphics.VertexElementFormat列挙体
で定義された型のものだけに限られます。
（型というか正確には「メモリ上にどうデータが入るか」です。
メモリの配置が同じなら型は同じでなくてもかまいません。）
まぁstringやDateTimeをメンバに持った頂点を作ってもあまり意味無いでしょうしね。

public enum VertexElementFormat

メンバ

メンバ名	説明
Single	floatです。(32bit)
Vector2	Vector2構造体です。
Vector3	Vector3構造体です。
Vector4	Vector4構造体です。
HalfVector2	16bitの浮動少数点数が２つです。（VertexShaderのバージョンが2.0以上でなければなりません）
HalfVector4	16bitの浮動小数点数が4つです。（VertexShaderのバージョンが2.0以上でなければなりません）
Color	Color構造体です。
NormalizedShort2	符号付き16bit整数が2つです。それぞれ小数に展開されて0～1の範囲内の大きさになります。
NormalizedShort4	符号付き16bit整数が4つです。それぞれ小数に展開されて0～1の範囲内の大きさになります。
Short2	符号付き16bit整数が2つです。
Short4	符号付き16bit整数が4つです。
Byte4	unsinged byteが4つです。

以上のデータを頂点の構造体のメンバにすることができます。
構造体のメンバを定義したら、今度は
Microsoft.Xna.Framework.Graphics.VertexElement構造体の
配列を作る必要があります。

[Serializable]
public struct VertexElement

これは頂点の構造体がどんなメンバを持っているかを意味していて、
ハードウェアが頂点データを扱うのに役立ちます。
つまり、VertexPositionColor.VertexElements静的フィールドのようなものを
自分で作る必要があるのです。

コンストラクタはかなりフクザツです。

public VertexElement (
        short offset,
        VertexElementFormat elementFormat,
        VertexElementUsage elementUsage,
        byte usageIndex
)

offsetはメンバの構造体内での位置です。（バイト単位）
最初のメンバはこれは0で、次のメンバのは最初のメンバのサイズで、
その次のは・・・という具合にどんどん増えていきます。

elementFormatはデータのサイズを意味する列挙体、
先ほど説明したVertexElementFormatです。

elementUsageは最重要で、これはデータの利用目的です。PositionとかColorとかNormalとかそういうやつです。これは単なる印、C#でいう属性のようなもので、ここで決めたとおりにメンバを使う必要は必ずしもありませんが、特に理由がない限り正直に入力すべきでしょう。保守が難しくなるかもしれませんし。

VertexElementUsage

メンバ名	説明
Position	頂点の位置です。
Normal	法線です。
Color	色です。UsageIndexが0の時にはディフューズの色を表し、UsageIndexが1の時にはスペキュラの色を表します。
TextureCoordinate	テクスチャの座標です。
PointSize	ポイントスプライトの大きさです。
Depth	深度です。
Sample	サンプラーデータです。
Fog	フォグに使うデータです。
Binormal	従法線ベクトル（接ベクトル×法線ベクトル、接線と法線の両方に対して垂直です）データです。
BlendIndices	ブレンディングのインデックスのデータです。
BlendWeight	ブレンディングに使われる重みのデータです。
Tangent	接線ベクトルです。
TessellateFactor	テセラレーションに使われる浮動小数点数です。

usageIndexは1つの構造体の中で、別々のメンバが同じVertexElementUsageを指定した場合に、お互いを識別するために使います。例えばポリゴンに複数のテクスチャを使いたくなったとしましょう。そういった場合、両方ともelementUsageがTextureCoordinateになってしまうのですが、これが困るのです。ハードウェアとしては、別々のメンバが同じ利用目的を持っていてはそれぞれの区別が出来ないので困るのです。そこで、問題を解決するためにインデックスを振ります。片方のテクスチャ座標をTexCoord0、もう片方をTexCoord1とでもすれば区別が出来るようになり、問題解決です。この引数に指定するのは、そのインデックスです。普通は0でいいでしょう。

こうして作ったVertexElementの配列をVertexDeclarationのコンストラクタに突っ込みます。
出来たVertexDeclarationのインスタンスはIVertexType.VertexDeclarationプロパティで返してあげましょう。
この「頂点の宣言」はGraphicsDeviceがポリゴンを描画するのに必要なのです。

---

で、VertexPositionNormalColorを作るとしたらこんな感じになります。

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;


public struct VertexPositionNormalColor:IVertexType
{
    public Vector3 Position;
    public Vector3 Normal;
    public Color Color;

    public VertexPositionNormalColor(Vector3 position, Vector3 normal, Color color)
    {
        this.Position = position;
        this.Normal = normal;
        this.Color = color;
    }

    public static readonly VertexDeclaration VertexDeclaration = new VertexDeclaration
        (
            new VertexElement(
                0,
                VertexElementFormat.Vector3,
                VertexElementUsage.Position,
                0
            ),
            new VertexElement(
                sizeof(float) * 3,
                VertexElementFormat.Vector3,
                VertexElementUsage.Normal,
                0
            ),
            new VertexElement(
                sizeof(float) * (3 + 3),
                VertexElementFormat.Color,
                VertexElementUsage.Color,
                0
            )
        );

    VertexDeclaration IVertexType.VertexDeclaration
    {
        get { return VertexDeclaration; }
    }
}

これを実際に使うのはあらかじめ用意された頂点のやり方と変わりません。

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

class MyGame : Game
{
    GraphicsDeviceManager graphics;
    BasicEffect basicEffect;

    VertexPositionNormalColor[] vertices =
    {
        new VertexPositionNormalColor(new Vector3(0, 1, 0),new Vector3(0, 0, 1), Color.Red),
        new VertexPositionNormalColor(new Vector3(1, 0, 0),new Vector3(0, 0, 1), Color.Red),
        new VertexPositionNormalColor(new Vector3(-1, 0, 0),new Vector3(0, 0, 1), Color.Red)
    };

    public MyGame()
    {
        graphics = new GraphicsDeviceManager(this);
    }

    protected override void LoadContent()
    {
        basicEffect = new BasicEffect(GraphicsDevice)
        {
            VertexColorEnabled = true,
            View = Matrix.CreateLookAt
            (
                new Vector3(0, 0, 3),  //カメラの位置
                new Vector3(0, 0, 0),   //カメラの見る点
                new Vector3(0, 1, 0)    //カメラの上向きベクトル
            ),
            Projection = Matrix.CreatePerspectiveFieldOfView
            (
                MathHelper.ToRadians(45),   //視野の角度。ここでは45°
                GraphicsDevice.Viewport.AspectRatio,//画面のアスペクト比(=横/縦)
                1,      //カメラからこれより近い物体は画面に映らない
                100     //カメラからこれより遠い物体は画面に映らない
            )
        };

        basicEffect.EnableDefaultLighting();
    }

    protected override void UnloadContent()
    {
        basicEffect.Dispose();
    }

    protected override void Update(GameTime gameTime)
    {
        basicEffect.World *= Matrix.CreateRotationY(MathHelper.ToRadians(1));
    }

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);

        foreach (var pass in basicEffect.CurrentTechnique.Passes)
        {
            pass.Apply();

            GraphicsDevice.DrawUserPrimitives<VertexPositionNormalColor>
            (
                PrimitiveType.TriangleList,
                vertices,
                0,
                vertices.Length / 3
            );
        }
    }
}

このサンプルでは法線付きの赤い三角形を回転させています。
角度によって明るさが変わるのがわかると思います。
これは法線があるからです。
法線のないVertexPositionColorではライティングに意味はありません。
法線つきのVertexPositionNormalColorを作ることによって、
ライティングの出来る色つきポリゴンを作ったのです。

かんたんXNA4.0 その２８ テクスチャへの描画 RenderTarget

今まではウィンドウの画面にだけポリゴンを描画していましたが、
XNAでは実はテクスチャに対して描画することも出来ます。

これによりテクスチャを動的に作り出すことができ、
例えばゲームの中のアイテムとしてパソコンを作って、その画面を動かしたり出来るでしょう。
テクスチャに対していろいろ描画して、
それをゲームの中のパソコン画面に貼り付ければいいのです。

---

この、描画の対象となるテクスチャを
レンダーターゲットといいます。
クラスはMicrosoft.Xna.Framework.RenderTarget2Dです。

public class RenderTarget2D : Texture2D

このクラスのインスタンスを作成し、GraphicsDeviceにセットすると、
これまでと違って、画面ではなくこのレンダーターゲットにたいして
描画されるようになります。

コンストラクタを見てみましょう。

public RenderTarget2D (
        GraphicsDevice graphicsDevice,
        int width,
        int height
)

graphicsDeviceはグラフィックスデバイスです。
widthとheightは作成するレンダーターゲットのテクスチャのサイズを表します。

このコンストラクタによって作成したレンダーターゲットを
GraphicsDeviceにセットするには、
GraphicsDevice.SetRenderTargetメソッドを使います。

public void SetRenderTarget (
        RenderTarget2D renderTarget
)

renderTargetはセットするレンダーターゲットです。

---

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

class MyGame : Game
{
    GraphicsDeviceManager graphics;
    BasicEffect basicEffect;

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

    RenderTarget2D renderTarget;
    SpriteBatch spriteBatch;

    public MyGame()
    {
        graphics = new GraphicsDeviceManager(this);
    }

    protected override void LoadContent()
    {
        basicEffect = new BasicEffect(GraphicsDevice)
        {
            VertexColorEnabled = true,
            View = Matrix.CreateLookAt
            (
                new Vector3(0, 0, 5),  //カメラの位置
                new Vector3(0, 0, 0),   //カメラの見る点
                new Vector3(0, 1, 0)    //カメラの上向きベクトル
            ),
            Projection = Matrix.CreatePerspectiveFieldOfView
            (
                MathHelper.ToRadians(45),   //視野の角度。ここでは45°
                400/200,//画面のアスペクト比(=横/縦)
                1,      //カメラからこれより近い物体は画面に映らない
                100     //カメラからこれより遠い物体は画面に映らない
            )
        };

        spriteBatch = new SpriteBatch(GraphicsDevice);
        renderTarget = new RenderTarget2D(GraphicsDevice, 400, 200);
    }

    protected override void UnloadContent()
    {
        basicEffect.Dispose();
    }

    protected override void Draw(GameTime gameTime)
    {
        renderToRenderTarget();

        GraphicsDevice.Clear(Color.CornflowerBlue);
        spriteBatch.Begin();
        spriteBatch.Draw(renderTarget, new Rectangle(0, 0, 400, 200), Color.White);
        spriteBatch.End();
    }

    private void renderToRenderTarget()
    {
        GraphicsDevice.SetRenderTarget(renderTarget);
        GraphicsDevice.Clear(Color.Gray);

        foreach (var pass in basicEffect.CurrentTechnique.Passes)
        {
            pass.Apply();

            GraphicsDevice.DrawUserPrimitives<VertexPositionColor>
            (
                PrimitiveType.TriangleList,
                vertices, 
                0,
                vertices.Length / 3
            );
        }

        GraphicsDevice.SetRenderTarget(null);
        
    }
}

このサンプルでは、まず400x200のテクスチャに対して三角形を描画した後、
そのテクスチャをさらにSpriteBatchで画面に描画しています。

レンダーターゲットをGraphicsDeviceにセットして、そのテクスチャをクリア、三角形をを描画します。
その後、その描画を解決、GraphicsDeviceからレンダーターゲットを取り除きます。
（これをやらないとウィンドウに何も映らなくなります。
その後の描画が全て画面ではなくレンダーターゲットに行われるのです）

これだけではビューポートを使った描画と区別がつかないかもしれません。
しかし、こちらはビューポートを使う場合よりもずっと柔軟で、用途が広いのです。

まず、ここではSpriteBatchで2Dとして描画していますが、
実際には3Dのモデルのテクスチャとして使ってもかまいません。
例えば斜めに傾いたモデルに貼り付ければ、そのモデルが実はディスプレイで、
そのテクスチャを表示しているように見えるでしょう。
これはビューポートには出来ない芸当です。

また、レンダーターゲットは光加減やぼやけ具合みたいな描画の効果を表現するのに利用されたりもします。
まずレンダーターゲットに対して何か描画して、
その後そのテクスチャを参考にして光やぼやけ具合などを計算するといった具合です。
XNA Creators Clubのサンプル、BloomPostprocessSampleもそのようなことをやっています。

このように、レンダーターゲットはかなりいろいろなことに使えるのです！