頂点カラー

 これまでの単一色で、立体なのかどうかが定かではない図形と違い、ハッキリと立方体に見えます。その上フルカラーでキレイです。この立方体の色は、ライティングによるものではなく、立方体に対して直接色を指定し塗りつぶしています。と言ってもプログラマが直接色を指定するのは、立方体の頂点に対してのみです。

上の図は頂点が2つの直線を描画する場合の例です。左側の丸が頂点1、右側の丸が頂点2です。それぞれ、緑色と赤色を指定しています。プログラマが用意するのはここまでです。後はこの2つの頂点の座標データと色データをDirectXに渡すだけです。すると、DirectXは2つの頂点、頂点Aから頂点Bへ結ぶ線の色を、緑色から赤色になるように勝手に描画してくれます。

面の場合、三角形のポリゴンに対して同様の考えが適用されます。上の図は、緑色の頂点A、赤色の頂点Bに青色の頂点Cを追加した場合の図を描きました。三角形のそれぞれの辺の色は、それぞれの頂点の色を橋渡しするようなグラデーションになっています。頂点以外を結ぶ線の色も、その両端の色を橋渡しをするグラデーションになっています。このように三角形の面全体が塗りつぶされます。

 頂点カラーの描画を行うためには、これまで座標値しか持っていなかった頂点に、新たに色データを追加して持たせる必要があります。そのため、変更点としては、頂点情報を持つ構造体、それに伴い頂点レイアウト、そして、シェーダ側で色情報の取得とその利用です。

​コード解説

① 構造体の定義とレイアウト
 頂点データとして、座標値の他に色データを保持するメンバを追加しています。それに伴い頂点レイアウトの内容も、色情報の部分が追加されています。

3行目に新しく加わったメンバ「C」が、色情報を保持します。このメンバ「C」が何者であるかに関する情報を、頂点レイアウトに追加した部分が8行目になります。カラー情報は、float型4つで表現されるため、「DXGI_FORMAT_R32G32B32A32_FLOAT」を指定してます。その2つ隣に、12という数値が書かれています。これは、メンバ「C」が先頭から何バイト目に置かれているのかを意味します。もしも「V」がXMFLOAT4を用いていた場合は、2番手の「C」は16バイト目からになるので、16と明記します。

② シェーダ内での色情報の取り扱い
 以下はこれまでのシェーダのコードと変更があった所を抜き出しました。シェーダ内では色に関する特別な処理は一切に記述していません。内容的には、頂点シェーダで色情報を受け取り、それをそのまま受け流しているだけです。

頂点シェーダで色情報を受け取るため、引数が一つ増えました。2つの引数はfloat4のため、どちらが頂点情報で、どちらが色情報なのかを明示するために、色情報の方にセマンティクスのCOLORを指定しています。これまでは、頂点シェーダの返値は頂点の座標値のみだったのでfloat4でしたが、今回は色情報も含めるため、1行目から4行目で構造体を一つ定義し、それを返しています。その構造体の中でも頂点情報なのか色情報なのかを判別させるために、各メンバにセマンティクスが付与されています。この定義した構造体をピクセルシェーダで受け取っています。

​ ピクセルシェーダで受け取った構造体の頂点と色の情報は、DirectXによって加工済みのものになります。しかし、今回は、頂点データは使わないので、色情報のみをピクセルシェーダの返値で渡しています。

サンプル​コード

< 動作確認環境 >
 ・Windows10 Pro
 ・Visual Studio Community 2017


基本的には空のプロジェクトを作ってもらい、以下のソースコードをコピペするだけでうまく実行できるかと思います。もしうまくいかない場合がありましたら、サンプルコードの実行に関する注意事項を一度参照してみてください。

​ソースコード

シェーダのソースコード (shader.hlsl ※必ずこの名前で保存してください)