GLSL 效果示例

彩虹渐变(HSV 转 RGB)

在 GLSL 里把 HSV 转成 RGB,得到一个流动的彩虹渐变,附一个不用 if 的简洁 hsv2rgb 函数。

在线示例

修改右侧代码,左侧预览会实时更新。

工作原理

RGB 是屏幕混合光的方式,但用来挑颜色很别扭。HSV 是按人的习惯描述颜色:

  • 色相(Hue):色环上的哪种颜色。0% 是红,33% 是绿,67% 是蓝,100% 又回到红。
  • 饱和度(Saturation):有多鲜艳。0% 是灰色,100% 是纯色。
  • 明度(Value):有多亮。0% 是黑,100% 是最亮。

让色相在屏幕上从 0 扫到 1,就直接得到一条彩虹。如果手动去调 RGB,这件事非常难做。

hsv2rgb 把红、绿、蓝三个通道分别算成色相上的三角波,每个通道错开色环的三分之一。clamp 把三角波的尖顶削平,再用饱和度做 mix,让颜色向白色过渡。

试着改一改

修改效果
saturation 改成 0.3柔和的马卡龙色
uv.x 改成 length(uv - 0.5)从中心向外的圆形彩虹
u_time * 0.1 改成 u_time * 0.5颜色流动快 5 倍
fract(uv.x + ...) 改成 0.6只有一种蓝色,越往上越亮

用到的内置函数

一步步学会这个效果