色彩调整之饱和度和亮度

对应 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公式

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

HSV转RGB公式

注意：上面公式中 含义是向下取整，而不是取绝对值!

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三个通道上加上对应的亮度值即可。

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

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