0から学ぶHLSLシェーダーの読み方 第1回～パイプラインと頂点シェーダー～

はじめに

この記事はDirectX11で使っている、シェーダー言語のHLSLを読めるようになるために私が学んだことの備忘録です。

第一回はパイプラインの基本的な流れと頂点シェーダーのコードを説明します。

前提

言語

• C++（DirectX11）
• HLSL

  参考リンク

• HLSL
  • セマンティクス：https://learn.microsoft.com/ja-jp/windows/win32/direct3dhlsl/dx-graphics-hlsl-semantics

レンダリングパイプラインとは

レンダリングパイプラインとは、描画するための機械 のようなものです。

DirectX11の描画のパイプラインを図にすると以下の通りです。

赤色で示した部分が頂点シェーダーです。

頂点のデータを受け取り、変換された情報をラスタライザーに渡します。

頂点シェーダーとピクセルシェーダーの間にラスタライザーというものがあり、映すピクセルを決める処理（深度情報やカリングなど）をしています。

さきほど頂点シェーダーから出力されたデータを受け取り、ピクセルごとにデータを分割し、ピクセルシェーダーへ渡します。

自動で行なわれるので、今回はあるんだなー程度で話を進めていきます。

青色で示した部分はピクセルシェーダーです。

ラスタライザーから出力されたピクセルごとのデータを受け取り、色を計算し決定します。

頂点シェーダーでは赤色で書かれた入力と出力を、ピクセルシェーダーでは青色で書かれた入力と出力をHLSLという言語を使って表します。

頂点シェーダー　Vertex Shader

頂点シェーダーの入力と出力のおさらいです。

入力：頂点データ

出力は本来はラスタライザーに渡されますが、自動なのでピクセルシェーダーにデータを渡すとイメージします。

ここまで理解できた上でHLSLコードを見ていきます。

// 入力部分の構造体定義
struct VertexInput
{
    float3 position : POSITION;  // 頂点の座標
    float4 color : COLOR;        // 頂点の色
};

// 出力部分の構造体定義
struct PixelInput
{
    float4 position : SV_POSITION; // 「ラスタライザーに渡す」頂点の座標
    float4 color : COLOR;          // 頂点の色
};

// 実際の処理
// 出力する構造体 main (入力する構造体) { } というふうに記述
PixelInput main(VertexInput input)
{
    // 出力する構造体を宣言する
    PixelInput output;

    // 座標も色もそのまま渡す
    output.position = float4(input.position, 1.0f);
    output.color = input.color;

    return output;
}

一つずつ説明します。

入力部分の構造体定義

// 入力部分の構造体定義
struct VertexInput
{
    float3 position : POSITION;  // 頂点の座標
    float4 color : COLOR;        // 頂点の色
};

頂点シェーダーの入力部分を定義する構造体で、頂点の座標と色の情報を持っています。

普段のプログラミング言語とは違い、変わった書き方をしています。

これはHLSLの言語でセマンティクスと呼ばれる意味づけをする書き方だからです。

// セマンティクスの例

POSITION     // 頂点の位置
COLOR        // 頂点の色
NORMAL       // 頂点の法線
TEXCOORD     // テクスチャ座標
SV_POSITION  // ラスタライザーに渡す座標

今回の入力部分では、頂点の座標と色を使います。

position という変数にはPOSITIONを（x, y, z の3つの値を持つので float3 型）、

これで入力部分の構造体定義ができました。

出力部分の構造体定義

// 出力部分の構造体定義
struct PixelInput
{
    float4 position : SV_POSITION; // 「ラスタライザーに渡す」頂点の座標
    float4 color : COLOR;          // 頂点の色
};

続いて頂点シェーダーの出力部分の構造体です。

入力した座標と色をそのまま出力するのでほとんど同じですが、座標のセマンティクスに注目してください。

座標部分が POSITION から SV_POSITION に変わっています。

パイプラインの画像をもう一度見てください。

入力されたデータは頂点シェーダーを通り、ラスタライザーへ渡されます。

ちなみに、SVというのは System Value （システム値）というDirectXが特別に認識する値という略です。

main部分

// 実際の処理
// 出力する構造体 main (入力する構造体) { } というふうに記述
PixelInput main(VertexInput input)
{
    // 出力する構造体を宣言する
    PixelInput output;

    // 座標も色もそのまま渡す
    output.position = float4(input.position, 1.0f);
    output.color = input.color;

    return output;
}

main部分で頂点シェーダーの処理内容を記述します。

コメントで詳しく書いたので見れば分かると思いますが、入力した座標と色を出力先の変数に代入しているだけです。

これで頂点シェーダーの説明は終わりです。

まとめると、

おわりに

今回はパイプラインの説明と頂点シェーダーの解説を行ないました。

長くなったのでピクセルシェーダーは次回にします。