Multiple градиент рисования в DirectX

Question

Как нарисовать градиент прямоугольник (цвет оттенок спектра на самом деле), как это:

Я подумал о розыгрыше, пиксель за пикселем, но это занимает много времени (память). Я думал о том, чтобы рисовать 4 разных градиентных прямоугольника с буферами вершин, и это должно быть хорошо, но есть ли другой способ сделать это?

Answer 1

Такие цветовые эффекты очень легко реализовать в пиксельных шейдерах процедурно.

• Добавить координаты текстуры для вашего объявления вершины (если она не имеет его еще) и назначить их на ваш прямоугольник, например, левый верхний угол (0.0f, 0.0f), правый нижний (1.0f, 1.0f), правый верхний (1.0f, 0.0f) и левый нижний (0.0f, 1.0f)
• Как обычно, проходят координаты текстуры без изменений из вершинного шейдера
• В пиксельных шейдеров, вы будете получать ровно интерполированное координаты текстуры
• Установите любой цвет, который вы хотите, зависит от значения texcoord: в вашем примере вы хотите использовать эффект горизонтальной радуги, поэтому измените hue component цвета в системе HSL по горизонтали c omponent (x) координат текстуры. Затем преобразуйте оттенок в цвет 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 посоветовали).
• просто применить текстуру

Счастливый кодирования!

Answer 2

Для каждого отдельного цвета добавьте пару вершин, содержащую цвет в виде данных вершин. В вершинном шейдере переместите этот цвет в пиксельный шейдер, и пусть пиксельный шейдер просто выдает его. Поскольку атрибут будет интерполирован из вершинного шейдера -> пиксельного шейдера, вы получите градиент бесплатно.