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

Question

我发现了这个很棒的页面 hls picker，我想知道是否有可能在 WebGL 中实现类似的效果。我正在向我的片段着色器传递一些颜色，例如#FF7400，将其转换为 hsl 并更改其亮度或平滑过渡到黑色（亮度等于 0）的最简单方法是什么。我想在我的页面中制作具有不同颜色（亮度）的云，这取决于它们与太阳的距离。在此先感谢您的帮助。

Answer 1

我认为片段着色器是一个小的 Photoshop。使用 WebGL 应该可以进行每个 photoshop 操作。

如果我们谈论的是太阳位置相对的 2D 图像，而您只想使用一些基本图像处理，则可以使用函数 from this answer rgb2hsv 和 hsv2rgb。我认为它应该适用于 GLSL 1。然后您可以将 Sat、Lum 或 Hue 相乘，然后将其传输回 RGB。

如果没有，您可能需要从通用公式重新实现它，使用 wiki 或这个 link：http://www.rapidtables.com/convert/color/rgb-to-hsl.htm

如果你想做更多的图像处理，当需要相邻像素时，我建议这个很棒的教程，你可以在其中轻松地进行一些边缘锐化、模糊等操作：http://webglfundamentals.org/webgl/lessons/webgl-image-processing.html

Answer 2

感谢 geat 链接，但我认为我找到了更简单的方法来轻松进行颜色转换，我只需要使用 webGL 方法 T mix(T x, T y, float a) - x 和 y 的线性混合。

我在 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;   
}

如您所见，我只用了几行代码就在四种颜色之间进行了转换，结果如下所示：

Answer 3

original image

大家好，我想我找到了一种非正统但简单的方法来降低 RGB 图像的饱和度，我们只需要找到像素的平均颜色， average _color = (R+G+B)/3 保持 Alpha... vec4(average_color,average_color,average_color,阿尔法);

    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：在片段着色器中更改颜色饱和度或亮度

WebGL: Change color saturation or luminosity in fragment shader

hsl

webgl

fragment-shader

three.js