GPUImage滤镜实现分析(一)

本文主要记录学习GPUImage滤镜的算法。
To Do => 贴一个图 展示所有滤镜的分类

颜色调整滤镜

• GPUImageBrightnessFilter
  调整图像的亮度:
  

  其中为调节前的像素值，为调节后的像素值，为调节参数；即分别在R、G、B三通道上加上调节参数(归一化后的值)即可。

  vec3 col = texture(iChannel0,uv).rgb;
  float brightness = 0.5;// brightness factor
  col += vec3(brightness);
  fragColor = vec4(col, 1.);
  

  brightness分别等于0.0、0.5、0.7 时:
  

  

• GPUImageExposureFilter
  调整图像的曝光度。根据维基百科给出的定义

  曝光值是一个以2为底的对数刻度系统。曝光值(EV)满足公式:
  

  

  其中N是光圈(f值)；t是曝光时间(快门)，单位秒。

  因为我们关心的是曝光值大小与图像的关系，所以只看即可。这里GPUImage的作者认为图像的呈现效果是与大小成线性关系的。

  // 曝光值设置成1.0
  const float exposure = 1.;
  vec2 uv = fragCoord/iResolution.xy;
  vec4 col = texture(iChannel0,uv);
  // 调整图像的RGB
  col.rgb = col.rgb * pow(2.,exposure);
  fragColor = vec4(col.rgb,1.0);
  

  exposure分别等于0.0、1.0、1.5 时
  

  

• GPUImageContrastFilter
  调节图像的对比度。对比度，简单来讲就是反应了一张图像的亮区域和暗区域的层次感。更详细的内容请访问对比度。对比度的算法公式:
  
  其中为调节前的像素值，为调节后的像素值;的取值范围,用于调节亮度;用于调整对比度。特别地:,此时只调整对比度；当,此时只调整亮度。

  vec3 col = texture(iChannel0,uv).rgb;
  float contrast = 0.2;
  col = (col.rgb - vec3(.5)) * contrast + vec3(.5);
  fragColor = vec4(col, 1.);
  

  contrast分别等于1.0、2.0、3.0 时:
  

  

• GPUImageSaturationFilter
  调整图像的饱和度。色彩调整之饱和度和亮度已经介绍了饱和度相关的概念，此处不再赘述。

   float saturation = 2.2;
   vec3 col = texture(iChannel0,uv).rgb;
    // 根据公式计算同等亮度情况下饱和度最低的值 即Saturation=0 
   const vec3 luminanceWeighting = vec3(0.2125, 0.7154, 0.0721);
   float luminance = dot(col,luminanceWeighting);
   vec3 greyScaleColor = vec3(luminance);
   // 在饱和度最低的图像和原图之间进行差值
   fragColor = vec4(mix(greyScaleColor, col, saturation), 1.);
  

  当saturation分别等于0.0、1.0、2.2时:
  

  

• GPUImageGammaFilter
  伽马线效果
  

  // gamma值设置为2.2  一般取值范围 0.0 ~ 3.0，默认1.0
  const float gamma = 2.2; 
  vec2 uv = fragCoord/iResolution.xy;
  vec4 col = texture(iChannel0,uv);
  // 分别对R、G、B进行gamma增长
  fragColor = vec4(pow(col.rgb,vec3(gamma)),col.a);
  

  当gamma分别等于0.5、1.5、2.5时:
  

  

• GPUImageColorInvertFilter
  反色效果

  vec4 col = texture(iChannel0,uv);
  // rgb取相反值
  fragColor = vec4(1.-col.rgb,col.a);
  

  

• GPUImageSepiaFilter
  深褐色(怀旧效果)
  颜色转换公式:
  

  vec2 uv = fragCoord/iResolution.xy;
  vec4 col = texture(iChannel0,uv);
  
  // common 
  const mat3 RGBToSepiaMatrix = mat3(
    0.393,0.769,0.189,
    0.349,0.686,0.168,
    0.272,0.534,0.131
  );
  // gpuimage使用的Matrix
  const mat3 RGBToSepiaMatrix = mat3(
      0.3588,0.7044,0.1368,
      0.2990,0.5870,0.1140,
      0.2392,0.4696,0.0912
  );
  const float sepiaIntensity = 1.;
  col.rgb = mix(col.rgb,col.rgb * RGBToSepiaMatrix,sepiaIntensity);
  fragColor = vec4(col.rgb,1.0);
  

  

  https://learnopengl.com/Advanced-Lighting/Gamma-Correction

• GPUImageLevelsFilter

• GPUImageGrayscaleFilter
  灰度滤镜。获取图片的灰度图方法有很多种，常见的有平均值法、心理学法、去饱和法、分解法、单一通道法。
  平均值法:
  心理学法:
  和心理学类似的算法还有: 或
  去饱和法:
  分解法:
  单一通道法:
  GPUImage这里采用的是心理学法。

   const vec3 W = vec3(0.2125, 0.7154, 0.0721);
   vec4 col = texture(iChannel0,uv);
   // to gray 
   float gray = dot(col.rgb,W);
   fragColor = vec4(vec3(gray),1.0);
  

  注: dot(col.rgb,W) = col.r * W.x + col.g * W.y + col.b * W.z