DirectX中的多个渐变绘图

Question

如何绘制渐变矩形（实际上是一种色调光谱），如下所示：

我想过逐像素地绘制它，但需要花费很多时间（内存）。 我想用顶点缓冲区绘制4个不同的渐变效果，它应该是好的，但还有另一种方法吗？

Answer 1

对于每种不同的颜色，添加一个包含颜色作为顶点数据的顶点对。在顶点着色器中，将该颜色转发到像素着色器，然后让像素着色器简单地输出它。由于属性将从顶点着色器插值 - ＆gt;像素着色器你可以免费获得渐变。

Answer 2

这种色彩效果在像素着色器程序中非常容易实现。

• 将纹理坐标添加到顶点声明中（如果它还没有）并将它们指定给您的矩形：例如，左上角（0.0f，0.0f），右下角（1.0f，1.0f），右顶部（1.0f，0.0f）和左底部（0.0f，1.0f）
• 像往常一样，从顶点着色器
传递纹理坐标
• 在像素着色器中，您将获得平滑插值的纹理坐标
• 根据texcoord值设置您想要的任何颜色：在您的示例中，您需要水平彩虹效果，因此在HSL系统中沿纹理坐标的水平分量（x）更改颜色的hue component。然后将色调转换为RGB颜色。

这是我的GLSL着色器中的代码，用于HLSL（将vec3重命名为float3并将其钳制为饱和等）。请注意，它尚未经过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所建议）。
• 只应用纹理

快乐的编码！