WebGL：更改片段着色器中的颜色饱和度或亮度

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.

Answer 1

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:

Answer 2

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

Answer 3

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