色彩调整之饱和度和亮度

对应 GPUImageBrightnessFilter和 GPUImageSaturationFilter两个类

颜色空间

常见的颜色空间除了RGB外，还有HSV(HSB)、YUV等，下面简单介绍一下HSV颜色空间。

HSV的颜色特性如下:

色相(Hue)：表示色彩，用一个0°~360°的圆形来表示不同的色彩，如图1-1所示。其中0°表示红色，60°表示黄色，120°表示绿色，180°表示青色，240°表示蓝色，300°表示深红色。

1-1

饱和度(Saturation)：表示色彩的纯度或颜色接近光谱色的的程度。饱和度的取值越大，纯度越高，接近光谱色的程度也就越高，图像越鲜艳；反之，图像纯度越低，图像也就越接近灰度图。

饱和度为 -100

饱和度为0

饱和度为100
明度(Value)：也叫亮度(Brightness)，表示色彩的明亮程度，明度越高，色彩越亮；反之，色彩越暗。

亮度为 -100

亮度为0

亮度为 150

注:饱和度和明度的图片是使用PS修改对应参数后得出的结果，因而参数范围不同。

HSV的颜色空间模型是一个六棱锥，如图1-2所示:

1-2

H参数表示色彩信息，即所处的光谱颜色的位置，该参数用一个角度量来表示，红、绿、蓝分别相隔120°，互补色相差180°；
S参数为一个比值，范围为0~1，它表示所选颜色的纯度和该颜色最大的纯度之间的比率，当S=0时，只有灰度；
V参数表示色彩的明亮程度，范围为0~1。

如果想改变图片的饱和度，该怎么用Shader实现呢？我们知道，Shader中的色彩空间为RGB，如果想改变图片的饱和度，需要先把色彩空间从RGB转换为HSV，修改了饱和度后，再把色彩空间从HSV转回RGB，交给Shader去渲染。

RGB转HSV公式
$\begin{align*} & max = max(r,g,b) \\ & min = min(r,g,b) \\\\ & h= \begin{cases} 0, &如果 \ max = min \\ 60 * {g - b\over {max - min} } + 0, &如果\ max=r,且\ g\ge b \\ 60 * {g - b\over {max - min} } + 360, &如果\ max=r,且\ g\lt b \\ 60 * {b - r\over {max - min} } + 120, &如果\ max=g \\ 60 * {r - g\over {max - min} } + 240, &如果\ max=b \end{cases} \\\\ & s= \begin{cases} 0, &如果\ max = 0\\ {max - min}\over max, &其他 \end{cases} \\\\ & v = max \end{align*}$

注意，r、g、b均为归一化后的值，范围为 0~1之间。

HSV转RGB公式
$\begin{align*} & h_1 = \lfloor {h\over60} \rfloor \\ & f = {h \over 60} - h_1 \\ & p = v *(1 - s) \\ & q = v * (1 - f *s) \\ & t = v * (1 - (1- f) * s) \\\\ & (r,g,b) = \begin{cases} (v,t,p) &如果\ h_1 = 0 \\ (q,v,p) &如果\ h_1 = 1 \\ (p,v,t) &如果\ h_1 = 2 \\ (p,q,v) &如果\ h_1 = 3 \\ (t,p,v) &如果\ h_1 = 4 \\ (v,p,q) &如果\ h_1 = 5 \\ \end{cases} \end{align*}$
注意：上面公式中 $\lfloor {h\over60} \rfloor$ 含义是向下取整，而不是取绝对值!

Shader实现色彩空间的转换

传统算法(遵循上面的转换公式)

 // RGB转HSV
  vec3 rgb2hsv(vec3 rgb) {
      float r = rgb[0];
      float g = rgb[1];
      float b = rgb[2];
      float h = 0.0;
      float s = 0.0;
      float v = 0.0;
      float minValue = min(min(r, g),b);
      float maxValue = max(max(r, g),b);
      v = maxValue;
      float delta = maxValue - minValue;
      if (maxValue != 0.0){
          s = delta / maxValue;
      }else {
          return vec3(h, s, v);
      }
      if (r == maxValue){
          h = (g - b) / delta;
      }else if (g == maxValue) {
          h = 2.0 + (b - r) / delta;
      }else {
          h = 4.0 + (r - g) / delta;
      }
      h = h * 60.0;
      if (h < 0.0){
          h += 360.0;
      }
      return vec3(h, s, v);
  }

  // HSV转RGB
     vec3 hsv2rgb(vec3 hsvColor) {
      float h = hsvColor[0];
      float s = hsvColor[1];
      float v = hsvColor[2];
      if (h >= 360.0) h = 0.0;
      vec3 rgb = vec3(0.0);
      if(s<=0.0) {
          rgb = vec3(v);
      }else {
          float hi = floor(h/60.0);
          float f = (h/60.0)-hi;
          float p = v*(1.0-s);
          float q = v*(1.0-s*f);
          float t = v*(1.0-s*(1.0-f));
          if(hi<=0.0) {
              rgb = vec3(v,t,p);
          } else if(hi<=1.0) {
              rgb = vec3(q,v,p);
          } else if(hi<=2.0) {
             rgb = vec3(p,v,t);
          } else if(hi<=3.0) {
             rgb = vec3(p,q,v);
          } else if(hi<=4.0) {
            rgb = vec3(t,p,v);
          } else if(hi<=5.0) {
             rgb = vec3(v,p,q);
          }
      }
      return rgb;
  }
  // main函数
    void main(){
         vec3 rgbColor = texture2D(inputImageTexture,textureCoordinate).rgb;
         vec3 hsvColor = rgb2hsv(rgbColor);
         hsvColor.y *= saturation;
         rgbColor = hsv2rgb(hsvColor);
         gl_FragColor = vec4(rgbColor,1.0);
   }

优化后的算法(是我在网上查阅资料时找到的)

 // RGB转HSV
 vec3 rgb2hsv(vec3 c) {
      vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
      vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
      vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
      float d = q.x - min(q.w, q.y);
      float e = 1.0e-10;
      return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
  }
// HSV转RGB
 vec3 hsv2rgb(vec3 c) {
      vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
      vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
      return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
  }

 //IQ大神的算法
 // iq's smooth hsv to rgb
 vec3 hsv2rgb(vec3 c)  {
      vec3 rgb = clamp( abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 );
      rgb = rgb*rgb*(3.0-2.0*rgb);
      return c.z * mix( vec3(1.0), rgb, c.y);
  }

测试效果如下:

Snip20200926_4.png

下面来看看GPUImage中的做法:

    // 灰度值
    const mediump vec3 luminanceWeighting = vec3(0.2125, 0.7154, 0.0721);
void main() {
    lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
    // 根据公式计算同等亮度情况下饱和度最低的值 即Saturation=0 
    lowp float luminance = dot(textureColor.rgb, luminanceWeighting);
    lowp vec3 greyScaleColor = vec3(luminance);
    // 在饱和度最低的图像和原图之间进行差值
    gl_FragColor = vec4(mix(greyScaleColor, textureColor.rgb, saturation), textureColor.w); 
}

此种做法确实精妙!!!

亮度的调节
如果只是单纯的调节亮度，是可以不用色彩空间的转换的，分别在R、G、B三个通道上加上对应的亮度值即可。

$RGB = RGB + brightness$

 void main(){
       vec4 textureColor = texture2D(inputImageTexture,textureCoordinate);
       gl_FragColor = vec4(textureColor.rgb + vec3(brightness),textureColor.a);
 }

参考链接
IQ大神的博客
 RGBToHSV
StackOverFlow