Search code examples
openglcocos2d-xshader

GLSL HSV Shader


I want to use GLSL Shader in my cocos2d-x game, which should make sprite brighter.

Here's my shader:

#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

vec3 rgb2hsv(vec3 c)
{
    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));

    float d = q.x - min(q.w, q.y);
    float e = 1.0e-10;
    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}

vec3 hsv2rgb(vec3 c)
{
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

void main(void)
{
    vec4 c = texture2D(CC_Texture0, v_texCoord);
    vec4 final = c;

    vec3 rgb = vec3(c.r, c.g, c.b);
    vec3 hsv = rgb2hsv(rgb);
    hsv.z = min(hsv.z + 1.0, 255.0); //HERE IS HOW MUCH BRIGHTNESS SHOULD BE ADDED
    vec3 nrgb = hsv2rgb(hsv);

    final.r = nrgb.x;
    final.g = nrgb.y;
    final.b = nrgb.z;

    gl_FragColor = final;
}

rgb to hsv and vice versa are taken from here: http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl

Here's an image with "0" added (hsv.z = min(hsv.z + 0.0, 255.0);):

no brightness

Nothing changed and that's expected. It makes convinced conversion works.

Now, here's an image with "1" addition (hsv.z = min(hsv.z + 1.0, 255.0);):

little brightness

So, it should be just a little little brighter, but it looks just like on screenshot. Changing "1" to for example "10" will make image pure white.

I know somewhere's a catch, but I can't figure out what's wrong.


Solution

  • As @ColonelThirtyTwo says, RGB and HSV value are attended to be in [0, 1] range.

    So your code should be:

    void main(void)
    {
       vec4 c = texture2D(CC_Texture0, v_texCoord);
       vec3 hsv = rgb2hsv(c.rgb);
    
       hsv.z = clamp(hsv.z + 0.05, 0.0, 1.0); // Add 1/20 of brightness.
    
       gl_FragColor = hsv2rgb(hsv);
    }