# Thread: Modifying Hue value with GLSL

1. ## Modifying Hue value with GLSL

Hi, I just started to learn shader and what I would like to do is changing the HUE value of an image.

Does anyone know how to do it?
I did found some articles/tutorials talk about HUE but I don't really understand it. I was looking for an easy way to change the HUE value.

Hope I can get some useful replies here

2. I found these methods online

vec3 RGBToHSL(vec3 color)
{
vec3 hsl; // init to 0 to avoid warnings ? (and reverse if + remove first part)

float fmin = min(min(color.r, color.g), color.b); //Min. value of RGB
float fmax = max(max(color.r, color.g), color.b); //Max. value of RGB
float delta = fmax - fmin; //Delta RGB value

hsl.z = (fmax + fmin) / 2.0; // Luminance

if (delta == 0.0) //This is a gray, no chroma...
{
hsl.x = 0.0; // Hue
hsl.y = 0.0; // Saturation
}
else //Chromatic data...
{
if (hsl.z < 0.5)
hsl.y = delta / (fmax + fmin); // Saturation
else
hsl.y = delta / (2.0 - fmax - fmin); // Saturation

float deltaR = (((fmax - color.r) / 6.0) + (delta / 2.0)) / delta;
float deltaG = (((fmax - color.g) / 6.0) + (delta / 2.0)) / delta;
float deltaB = (((fmax - color.b) / 6.0) + (delta / 2.0)) / delta;

if (color.r == fmax )
hsl.x = deltaB - deltaG; // Hue
else if (color.g == fmax)
hsl.x = (1.0 / 3.0) + deltaR - deltaB; // Hue
else if (color.b == fmax)
hsl.x = (2.0 / 3.0) + deltaG - deltaR; // Hue

if (hsl.x < 0.0)
hsl.x += 1.0; // Hue
else if (hsl.x > 1.0)
hsl.x -= 1.0; // Hue
}

return hsl;

}

float HueToRGB(float f1, float f2, float hue)
{
if (hue < 0.0)
hue += 1.0;
else if (hue > 1.0)
hue -= 1.0;
float res;
if ((6.0 * hue) < 1.0)
res = f1 + (f2 - f1) * 6.0 * hue;
else if ((2.0 * hue) < 1.0)
res = f2;
else if ((3.0 * hue) < 2.0)
res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
else
res = f1;
return res;
}

vec3 HSLToRGB(vec3 hsl)
{
vec3 rgb;

if (hsl.y == 0.0)
rgb = vec3(hsl.z); // Luminance
else
{
float f2;

if (hsl.z < 0.5)
f2 = hsl.z * (1.0 + hsl.y);
else
f2 = (hsl.z + hsl.y) - (hsl.y * hsl.z);

float f1 = 2.0 * hsl.z - f2;

rgb.r = HueToRGB(f1, f2, hsl.x + (1.0/3.0));
rgb.g = HueToRGB(f1, f2, hsl.x);
rgb.b= HueToRGB(f1, f2, hsl.x - (1.0/3.0));
}

return rgb;
}

But I found it very slow because first I need to convert my RGB to HUE then adjust the HUE and lastly convert it back to RGB.
I'll be making it to run on mobile device so I was looking for better/faster methods.

3. Why do you operate on HSV colors in the first place?

4. Actually my scenario is like this:
I was trying to do an effect in games.
Because I wanted to have different colors for different characters, so I asked my artist to give me one default color then later on I can modify the HUE in codes to get different color without using different set of textures.

I'm not sure is there any other better way for me to achieve what I want.

5. That doesn't answer the question. Why do you need color values to be represented using the HSV color space? Why don't you have your artist specify the colors in RGB directly?

6. Hmm... I don't know

Basically he draw a shape filled with gradient color in Photoshop, then he told me if I want to change color then I need to adjust the HUE. @@?

7. Well, if you need HSV you cannot avoid conversion . OpenGL doesn't do HSV natively.

8. basically if I put it in Photoshop, I just need to adjust the HUE value
I assume you are using a hue/saturation/lightness layers to do this. That is a different technique to just modifying a colour in a texture. Think about how you will modify the colour if you don't use layers.

9. Hmm, alright, I'll figure it out.
Thanks.

10. It is a bit more costly but you could do a hue layer type modify to the texutre, then render all the characters with this texture, modfiy the texture again and render the next set of characters.

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•