WebGL: Change color saturation or luminosity in fragment shader

Question

i found this great page hls picker, and i'm wondering if there is possibility to achieve similar effect in WebGL. I'm passing to my fragment shader some color, for example #FF7400, what is the easiest way to convert it to hsl and change its luminosity, or to have smooth transition to black color (luminosity equel 0). I want to make clouds in my page that have different color(luminosity) depends how far they are from sun. Thanks in advance for any help.

`Different color(luminosity) depends how far they are from sun.` This is usually done simply with a basic lightning system and some attenuation based on the distance to the light source. May have transparency issues. If want to fix transparency issues, solution is complex. — WacławJasper, Dec 08 '15 at 07:16
Ok, great tip, but i want to change color in shader, sun was only an example, this color converter will help me a lot, and i think it will be more efficient. — blindepl, Dec 08 '15 at 07:29

score 2 · Accepted Answer · answered Dec 09 '15 at 10:17

thanks for geat links but i think that i found much simplier way to made easy color transition, all i need is to use webGL method T mix(T x, T y, float a) - linear blend of x and y.

This code i use in shadertoy editor:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
     vec2 uv = gl_FragCoord.xy / iResolution.xy;
     vec4 orange = vec4(0.533, 0.25, 0.145, 1.0);
     vec4 blue = vec4(0.18, 0.23, 0.27, 1.0);
     vec4 black = vec4(0.0, 0.0, 0.0, 1.0);
     vec4 white = vec4(1.0, 1.0, 1.0, 1.0);

     float ratio = iResolution.x / iResolution.y;
     float PI = 3.14159265359;

     vec4 mixC = mix(orange, blue, sin(ratio * uv.y));
     mixC = mix(mixC, black, cos(2.0 * PI * uv.x) / ratio);
     mixC = mix(mixC, black, cos(2.0 * PI * uv.y) / ratio);
     mixC = mix(mixC, white, 0.1);
     fragColor = mixC;   
}

As you can see there, i've made transition between of four colors with just couple lines of code and the results looks like this:

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

I think about fragment shader as a little photoshop. Every photoshop operation should be possible with WebGL.

If we are talking about 2D image where sun position is relative and you want to just use some basic image processing, you can use functions from this answer rgb2hsv and hsv2rgb. I think it should work with GLSL 1. Then you can multiply Sat, Lum or Hue and then transfer it back to RGB.

If it doesnt, you might have to reimplement it from common formula, use wiki or this link: http://www.rapidtables.com/convert/color/rgb-to-hsl.htm

If you want to do some more image processing, when neighbour pixels are needed, I suggest this great tutorial where you can easy do some edge sharpening, blur etc.: http://webglfundamentals.org/webgl/lessons/webgl-image-processing.html

edited May 23 '17 at 10:33

Community

1
1

answered Dec 08 '15 at 12:49

Entity Black

3,401
2
23
38

1

Those shaders work just fine in WebGL. I've been using them for a while. [This game uses those function to colorize the characters](http://t.co/JIAZN9HAz0)(warning: has sound). I added a clamp to saturation and value. They're also used on many samples at http://vertexshaderart.com. A couple more interesting color space shaders are [here](https://www.shadertoy.com/view/4sS3Dc) and [here](https://www.shadertoy.com/view/lsdGzN) – gman Dec 08 '15 at 16:37
Hi, thanks for an answer, but i think i have found quite simplier way to made a color transition. – blindepl Dec 09 '15 at 10:20

score 0 · Answer 3 · answered Jan 08 '22 at 19:11

original image

Hi guys, i think i found a unorthodox but easy way to desaturate an RGB image, we just need to find the average color for the pixel, average _color = (R+G+B)/3 keeping the Alpha... vec4(average_color,average_color,average_color, Alpha);

    void main()
{
    //write a color of the current fragment to a variable
    lowp vec4 color_of_pixel = texture2D(texture_sampler, var_texcoord0.xy);

    //Find the average among red, green and blue and it keeps the "force" of the color...
    float average_color = ((color_of_pixel.r + color_of_pixel.g + color_of_pixel.b)/3);

    lowp vec4 color_of_pixel_final = vec4(average_color,average_color,average_color,color_of_pixel.a);
    gl_FragColor = color_of_pixel_final;  // write the color_of_pixel to the output gl_FragColor
}

Desaturated image

WebGL: Change color saturation or luminosity in fragment shader

3 Answers3