three.js - WebGL:更改片段着色器中的颜色饱和度或亮度

Question

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

Answer 1

感谢伟大的链接，但我认为我找到了更简单的方法来实现轻松的颜色过渡，我需要的只是使用 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;   
}

正如您所看到的，我仅用几行代码就在四种颜色之间进行了转换，结果如下所示: