GPUImage滤镜实现分析(一)

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

颜色调整滤镜

  • GPUImageBrightnessFilter
    调整图像的亮度:
    y = x + 255 * b

    其中x为调节前的像素值,y为调节后的像素值,b为调节参数;即分别在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)满足公式:
    EV = log_{2}\frac{N^2}{t}

    2^{EV} = \frac{N^2}{t}

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

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

    // 曝光值设置成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
    调节图像的对比度。对比度,简单来讲就是反应了一张图像的亮区域和暗区域的层次感。更详细的内容请访问对比度。对比度的算法公式:
    y = [x - 127.5 * (1 - b)] * k + 127.5 * (1 + b)
    其中x为调节前的像素值,y为调节后的像素值;b的取值范围[-1,1],用于调节亮度;k用于调整对比度。特别地:当b=0时, y = (x - 127.5) * k + 127.5,此时只调整对比度;当k=1时, y = x + 255 * b,此时只调整亮度。

    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
    伽马线效果
    f(I) = I^γ

    // 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
    深褐色(怀旧效果)
    颜色转换公式:
    Red = 0.393 * Red + 0.769 * Green + 0.189 * Blue;\\ Green = 0.349 * Red + 0.686 * Green + 0.168 * Blue;\\ Blue = 0.272 * Red + 0.534 * Green + 0.131 * Blue;

    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
    灰度滤镜。获取图片的灰度图方法有很多种,常见的有平均值法心理学法去饱和法分解法单一通道法
    平均值法:Gray = (Red + Green + Blue) / 3
    心理学法:Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)
    和心理学类似的算法还有:Gray = (Red * 0.2126 + Green * 0.7152 + Blue * 0.0722)Gray = (Red * 0.299 + Green * 0.587 + Blue * 0.114)
    去饱和法: Gray = (max(Red, Green, Blue) + min(Red, Green, Blue) ) / 2
    分解法:Gray = max(Red, Green, Blue) 或 Gray = min(Red, Green, Blue)
    单一通道法:Gray = Red 或 Gray = Green 或 Gray = Blue
    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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容