本文主要记录学习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);
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