Part of the Khronos Group
OpenGL.org

The Industry's Foundation for High Performance Graphics

from games to virtual reality, mobile phones to supercomputers

Results 1 to 10 of 16

Thread: Modifying Hue value with GLSL

Hybrid View

  1. #1
    Junior Member Newbie
    Join Date
    Jan 2013
    Posts
    8

    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. #2
    Junior Member Newbie
    Join Date
    Jan 2013
    Posts
    8
    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. #3
    Senior Member OpenGL Pro
    Join Date
    Apr 2010
    Location
    Germany
    Posts
    1,099
    Why do you operate on HSV colors in the first place?

  4. #4
    Junior Member Newbie
    Join Date
    Jan 2013
    Posts
    8
    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. #5
    Senior Member OpenGL Pro
    Join Date
    Apr 2010
    Location
    Germany
    Posts
    1,099
    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. #6
    Junior Member Newbie
    Join Date
    Jan 2013
    Posts
    8
    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. @@?
    Last edited by birdkingz; 01-21-2013 at 06:52 AM.

  7. #7
    Senior Member OpenGL Pro
    Join Date
    Apr 2010
    Location
    Germany
    Posts
    1,099
    Well, if you need HSV you cannot avoid conversion . OpenGL doesn't do HSV natively.

  8. #8
    Senior Member OpenGL Pro
    Join Date
    Jan 2012
    Location
    Australia
    Posts
    1,097
    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. #9
    Junior Member Newbie
    Join Date
    Jan 2013
    Posts
    8
    Hmm, alright, I'll figure it out.
    Thanks.

  10. #10
    Senior Member OpenGL Pro
    Join Date
    Jan 2012
    Location
    Australia
    Posts
    1,097
    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
  •