CODEWITHSUNDEEP
silverlightalgorithmpixelshaderhlsl
Bogdan Ioan Gabor
Bogdan Ioan Gabor

Reputation: 419

HLSL hue change algorithm

I want to make a pixel shader for Silverlight which will help me to change the Hue/Saturation/Lightness using a slider. * Hue slider has values in range: [-180, 180] * Saturation slider has values in range: [-100, 100] * Lightness slider has values in range: [-100, 100]

I managed to create a pixel shader which can manipulate the Saturation and Lightness values. But I can find any algorithm for changing the hue value. Can anyone provide me an algorithm? Thank you.

Here is my HLSL code:

/// <summary>The brightness offset.</summary>
/// <minValue>-180</minValue>
/// <maxValue>180</maxValue>
/// <defaultValue>0</defaultValue>
float Hue : register(C0);

/// <summary>The saturation offset.</summary>
/// <minValue>-100</minValue>
/// <maxValue>100</maxValue>
/// <defaultValue>0</defaultValue>
float Saturation : register(C1);

/// <summary>The lightness offset.</summary>
/// <minValue>-100</minValue>
/// <maxValue>100</maxValue>
/// <defaultValue>0</defaultValue>
float Lightness : register(C2);

sampler2D input : register(S0);

//--------------------------------------------------------------------------------------
// Pixel Shader
//--------------------------------------------------------------------------------------

float4 main(float2 uv : TEXCOORD) : COLOR
{
 // some vars
 float saturation = Saturation / 100 + 1;
 float lightness = Lightness / 100;
 float3  luminanceWeights = float3(0.299,0.587,0.114);

    // input raw pixel
    float4 srcPixel = tex2D(input, uv);

    // Apply saturation
    float luminance = dot(srcPixel, luminanceWeights);
    float4 dstPixel = lerp(luminance, srcPixel, saturation);

    // Apply lightness
    dstPixel.rgb += lightness;

    //retain the incoming alpha
    dstPixel.a = srcPixel.a;

    return dstPixel;
}

Upvotes: 1

Views: 3725

Answers (3)

G&#225;bor
G&#225;bor

Reputation: 10224

With a slightly different input domain but it can be adapted easily:

float Hue : register(C0); // 0..360, default 0
float Saturation : register(C1); // 0..2, default 1
float Luminosity : register(C2); // -1..1, default 0

sampler2D input1 : register(S0);

static float3x3 matrixH =
{
  0.8164966f,  0,           0.5352037f,
 -0.4082483f,  0.70710677f, 1.0548190f,
 -0.4082483f, -0.70710677f, 0.1420281f
};

static float3x3 matrixH2 =
{
  0.84630f, -0.37844f, -0.37844f,
 -0.37265f,  0.33446f, -1.07975f,
  0.57735f,  0.57735f,  0.57735f
};

float4 main(float2 uv : TEXCOORD) : COLOR
{
  float4 c = tex2D(input1, uv);

  float3x3 rotateZ =
  {
    cos(radians(Hue)), sin(radians(Hue)), 0,
   -sin(radians(Hue)), cos(radians(Hue)), 0,
    0,                 0,                 1
  };
  matrixH = mul(matrixH, rotateZ);
  matrixH = mul(matrixH, matrixH2);

  float i = 1 - Saturation;
  float3x3 matrixS =
  {
    i*0.3086f+Saturation, i*0.3086f,            i*0.3086f,
    i*0.6094f,            i*0.6094f+Saturation, i*0.6094f,
    i*0.0820f,            i*0.0820f,            i*0.0820f+Saturation
  };
  matrixH = mul(matrixH, matrixS);

  float3 c1 = mul(c, matrixH);
  c1 += Luminosity;
  return float4(c1, c.a);
}

Upvotes: 2

Andreas
Andreas

Reputation: 4013

Here is a great excample how to work with hue.

http://www.silverlightshow.net/news/Hue-Shift-in-Pixel-Shader-2.0-EasyPainter-Silverlight.aspx

Upvotes: -1

Kris
Kris

Reputation: 7170

The conversions between colour spaces are available at EasyRGB, see this post at nokola.com for a Silverlight implementation of a Hue shift. It may be possible to fit hue, saturation and brightness in one PS 2.0 shader if you take the approach mentioned here but I haven't tried.

Upvotes: 1

Related Questions