Part of the Khronos Group
OpenGL.org

The Industry's Foundation for High Performance Graphics

from games to virtual reality, mobile phones to supercomputers

Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Modifying Hue value with GLSL

  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,128
    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,128
    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,128
    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?

  8. #8
    Junior Member Newbie
    Join Date
    Jan 2013
    Posts
    8
    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.

  9. #9
    Senior Member OpenGL Pro
    Join Date
    Apr 2010
    Location
    Germany
    Posts
    1,128
    So why don't you code those colors directly as RGB values? BTW, what formats do your game assets have?

  10. #10
    Junior Member Newbie
    Join Date
    Jan 2013
    Posts
    8
    Hmm, the image looks like this
    http://i165.photobucket.com/albums/u...ps10812a13.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.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	effect.jpg 
Views:	51 
Size:	3.1 KB 
ID:	957  

Posting Permissions

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