c++ - DirectX での複数グラデーション描画

Question

次のようにグラデーション四角形(実際には色相スペクトル)を描画するにはどうすればよいですか:

ピクセルごとに描画しようと思ったのですが、時間がかかります（メモリ）。頂点バッファーを使用して 4 つの異なるグラデーション四角形を描画することを考えましたが、それは良いはずですが、それを行う別の方法はありますか?

Answer 1

このような色効果は、手続き的にピクセル シェーダーに実装するのが非常に簡単です。

• テクスチャ座標を頂点宣言に追加し (まだない場合)、長方形に割り当てます。たとえば、左上隅 (0.0f、0.0f)、右下 (1.0f、1.0f)、右上 (1.0) f, 0.0f) と左下 (0.0f, 1.0f)
• いつものように、頂点シェーダーからテクスチャ座標を変更せずに渡します
• ピクセル シェーダーでは、スムーズに補間されたテクスチャ座標を受け取ります
• texcoord 値に応じて必要な色を設定します。この例では、水平方向の虹色効果が必要なため、HSL システムの色の色相成分をテクスチャ座標の水平成分 (x) に沿って変更します。次に、色相を RGB カラーに変換します。

これは、HLSL に採用された私の GLSL シェーダーからのコードです (vec3 を float3 に、clamp を saturate に名前変更するなど)。HLSL としてテストされていないことに注意してください。

struct PSInput
{
    float2 texcoord;
};


float3 HueToRGB(in float h)
{
    float3 rgb = 0.0f;
    rgb.r = abs(h * 6.0f - 3.0f) - 1.0f;
    rgb.g = 2.0f - abs(h * 6.0f - 2.0f);
    rgb.b = 2.0f - abs(h * 6.0f - 4.0f);
    rgb = saturate(rgb);
    return rgb;
}

void main() : SV_Target
{
    float3 colorRGB = HueToRGB(in.texcoord.x);
    return float4(colorRGB, 1.0f);
}

色をより詳細に制御するには、次のことができます。

• より洗練されたピクセル シェーダを作成する
• 異なる色成分を持つ頂点を追加します (Ylisar のアドバイスのように)。
• テクスチャを適用するだけ

ハッピーコーディング！