c++ - DirectX 中的多重渐变绘制

Question

我怎样才能像这样绘制渐变矩形（实际上是色调光谱）：

我想逐个像素地绘制它，但它需要很多时间（内存）。我想用顶点缓冲区绘制 4 个不同的渐变矩形，应该不错，但是还有其他方法吗？

Answer 1

对于每种不同的颜色，添加一个包含该颜色的顶点对作为顶点数据。在顶点着色器中，将该颜色转发给像素着色器，然后让像素着色器简单地输出它。由于该属性将从顶点着色器 -> 像素着色器进行插值，因此您将免费获得渐变。

Answer 2

这种颜色效果在像素着色器中很容易实现。

• 将纹理坐标添加到您的顶点声明（如果还没有）并将它们分配给您的矩形：例如，左上角（0.0f，0.0f），右下角（1.0f，1.0f），右上角（1.0 f, 0.0f) 和左下角 (0.0f, 1.0f)
• 像往常一样，从顶点着色器传递纹理坐标不变
• 在像素着色器中，您将收到平滑插值的纹理坐标
• 根据 texcoord 值设置您想要的任何颜色：在您的示例中，您需要水平彩虹效果，因此沿纹理坐标的水平分量 (x) 更改 HSL 系统中颜色的色调分量。然后将色调转换为 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 建议的）。
• 只需应用纹理

快乐编码！