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

Question

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

Answer 1

感谢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 2

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

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

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

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