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 :smiley:

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 &lt; 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.

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

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.

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?

Hmm… I don’t know :frowning:

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. @@?

Do you specify the color programmatically or with pre-determined values, i.e. do you change the color based on some runtime calculation or do you know all the possible colors at compile time?

Yea, I will know all the possible colors at compile time because each characters will have their own color and it will be preset by us.
Just that I need to change the color during runtime because once the player selects different characters, I have to change the color of that texture as well.

So why don’t you code those colors directly as RGB values? BTW, what formats do your game assets have?

Hmm, the image looks like this
http://i165.photobucket.com/albums/u50/ylloh5633/effect_zps10812a13.png

Reason why I need to change the Hue value is because I need to maintain the glowing, gradient effects… that’s what my artist told me.
I did try to modify the RGB value end up it goes very weird, like something tinted on top of the color.
I did try with grayscale image first then only set the RGB value, the result doesn’t look as good as adjusting the Hue only.

Forgetting about shaders - can you explain how you intend to change the colour. The sample you have show has a while range of colours in it.

What I want is quite straight forward, basically if I put it in Photoshop, I just need to adjust the HUE value in order to get different colors.

So now in codes, I wish to convert my image to HSV so that I can adjust the HUE value to change color.

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

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.

Hmm, alright, I’ll figure it out.
Thanks.

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.

This topic was automatically closed 183 days after the last reply. New replies are no longer allowed.