1. 从颜色加深这个叫法说起它到底是不是你想的那个滤镜今天这个打卡内容其实是被产品经理逼出来的。用户一直在问能不能把卧室背景一键换成马尔代夫在美颜相机这类项目里这就是典型的背景替换需求底层靠的正是 GPUImageChromaKeyBlendFilter。我平时跟组里人聊的时候习惯叫它颜色加深混合滤镜但严格来说这个名字是有点误导的它真正的身份是色度键混合滤镜。这两者差的可不是一星半点Photoshop 里那种颜色加深Color Burn混合模式是把底图颜色按照特定公式向暗部压深而 ChromaKeyBlendFilter 是让画面中某个特定颜色区域消失露出下面垫着的另一张图。一个是调色思路一个是抠图思路。1.1 为什么用户总想把背景换掉在美颜相机里换背景不是刚需但一旦有人问回应起来就特别麻烦。你可以给用户上百个滤镜都抵不过把我身后那堆快递箱抹掉来得直接。我们调研过一小批活跃用户其中将近四成的人拍摄环境是卧室和出租屋背景里挂着衣架、排插、半开的衣柜门。这些画面在照片里还好一到视频预览就很出戏。所以背景替换成了美颜之外最被念叨的功能而实现它绕不开色度键处理。所谓色度键就是绿幕、蓝幕这类纯色背景被识别后把纯色区域透明化再把另一张背景图从底下透出来。这个过程在实时预览里必须用 GPU 做CPU 抽帧抠图根本跑不动 30 帧。GPUImage 这个开源框架之所以适合我们是因为它的滤镜链设计得很直白输入纹理进链每个滤镜处理完丢给下一个中间不用反复回读像素。而 ChromaKeyBlendFilter 就是链上负责抠的那一环。1.2 ChromaKeyBlendFilter 的真实身份这个滤镜的全名拆开看就很清楚了ChromaKey色度键 Blend混合。网上很多教程只讲 ChromaKeyFilter也就是输出透明通道的版本但那个版本在 GPUImage 里输出的是带 alpha 的结果后续还得再接 Blend 滤镜把透明区域和背景叠起来。ChromaKeyBlendFilter 把这两步合并了它有两个输入纹理一个是要被抠的前景一个是垫底的背景内部直接算出混合结果输出。这省掉一次纹理拷贝和一次绘制在移动端是实打实的性能节省。真正让我觉得它值得单独写一篇的是它在颜色空间上的处理。它不是简单比 RGB 三个通道的差值而是先把颜色转到类似 YCrCb 的亮度-色度表示再去比较色度分量。这个细节直接决定了抠图对光照的容忍度后面我会专门拆解。2. 把着色器拆开看色度键匹配的每一步2.1 YCrCb 颜色空间为什么不直接比较 RGB如果你只是想把绿色去掉第一反应肯定是判断像素 RGB 里 G 是否显著大于 R 和 B。这种做法在纯色背景、均匀光照、不追求边缘质感的时候勉强能跑但一遇到反光、阴影、现场灯光偏绿偏黄就会漏掉一大片或者把肤色给抠穿。原因是 RGB 三个通道相关性太高人对绿色的感知也不是单看 G 通道。GPUImage 的做法是把颜色映射到 YCrCb 这类空间Y 代表亮度Cr 和 Cb 代表两个色度分量。这样亮度变化被单独隔离出去了绿色阴影即使变暗了它的 Cb、Cr 依然和标准绿幕很接近不会因为亮度一降就被判定为非绿色。不管是用自适应还是固定公式转换核心都在于抠像比较的是颜色长相不是颜色深浅。这就好比你在人群里找一个穿绿衣服的人判断依据是他衣服的色相而不是衣服被灯光照得亮不亮。亮度变了你还认得出那件绿衣服颜色空间转换就是为了让算法也这样认人。2.2 smoothstep 与边缘过渡的计算逻辑ChromaKeyBlendFilter 的着色器里最关键的是这一段逻辑把当前像素的 CbCr 和预设绿色幕布的 CbCr 算一个距离再把这个距离扔进 smoothstep得到 0 到 1 之间的混合权重。距离小说明它是绿色幕布权重趋于 0距离大说明它是要保留的前景内容权重趋于 1。smoothstep 有三个参数实际用起来是阈值下限、阈值上限、距离值。低于下限直接返回 0高于上限直接返回 1中间则做平滑曲线过渡。这就是为什么边缘不会像硬切那样出现一条像素锯齿。我们调参时管这叫羽化量smoothing 越大边缘过渡越宽但过渡太宽会把头发丝、衣服边缘的半透明感也一块儿吃掉smoothing 越小边缘越干净利落但光照不均的绿幕上容易出现一块一块的残留。默认参数 0.4 的 thresholdSensitivity 和 0.1 的 smoothing 只适合理想环境到了实际拍摄场景必须按光调。2.3 混合公式的两种写法很多人在网上搜这个滤镜的源码会看到两种看起来不太一样的实现。一种是用 mix(textureColor, textureColor2, blendValue) 做最终混合另一种是先算出 mask再用 mask 乘前景、用 (1 - mask) 乘背景相加。这两种写法数学上等价唯一的差别在于精度表现。GPUImage 里用 mix 多一些因为它在底层会映射到硬件混合指令执行更快。如果你自己写 GLSL我建议也优先用 mix别手动做乘法不然在低端机上可能出现颜色偏移。顺便提一个容易看错的地方输入的 textureColor 是底图背景textureColor2 才是有绿幕的前景。混合权重靠近 0 时输出背景靠近 1 时输出前景。很多第一次读源码的人把这俩搞反了结果抠出来的画面背景全变成前景图了。我第一天调试时就栽在这儿画面怎么都不对后来查纹理绑定顺序才发现。3. Android 端的接入与管线下沉3.1 依赖引入与滤镜链设计Android 端接入 GPUImage 不算复杂但项目里要有一个整体规划不能直接 new 完就扔进预览链。我们的美颜管线大致是 Camera 纹理 → 原图缩放 → 磨皮美白 → 色度键混合 → 滤镜调色 → 输出。ChromaKeyBlendFilter 在这个链里属于中间层它前面要有美颜处理后面还要接调色因为它输出的边缘质量会影响后续滤镜的颗粒感。我在项目里把它单独抽成一个 BackgroundReplacementFilter 的封装类内部持有 GPUImageChromaKeyBlendFilter 实例对外只暴露两个方法setBackgroundBitmap 和 setChromaKeyColor。这样做的好处是上层 UI 完全不用关心滤镜细节产品换背景图只要传 Bitmap换抠像色只要传色值。串到滤镜链里时也只暴露这一个封装对象将来换成自定义着色器影响面能控制在一个类里。3.2 两路纹理输入的桥接细节ChromaKeyBlendFilter 是典型的双输入滤镜也就是说它除了主纹理还需要第二个纹理输入源。GPUImage 框架里这类滤镜大多数叫 GPUImageTwoInputFilter 的派生类使用时要把背景图转成 GPUImagePicture 再 addTarget 给混合滤镜。这个操作本身不复杂但有个隐坑背景图分辨率如果和相机预览分辨率不一致滤镜不会帮你自动缩放对齐。所以传给它的背景图必须预先按预览分辨率裁好。我实际用的缩放策略是封面裁剪也就是背景图按预览宽高比居中裁剪后缩放避免拉伸变形。这个裁剪不能放在 UI 线程做否则切图瞬间会掉帧。我把裁剪放到后台裁完再回主线程 setBitmap。一旦背景图准备就绪混合滤镜会立刻用新纹理替换不需要重建滤镜链视觉上就是背景瞬间切换这也是 GPUImage 这类框架最顺手的地方。3.3 预览、拍照、录屏三态下的参数同步美颜相机里最容易被忽略的是三种输出状态下的参数一致性。预览时 SurfaceView 或 GLSurfaceView 的尺寸可能不是相机原始尺寸到了拍照走的是相机全尺寸输出录屏则可能走的是另一个编码分辨率。如果每次都用同一组 thresholdSensitivity 和 smoothing三种状态下绿幕残留程度会不一样因为降采样会掩盖一部分边缘噪点全尺寸输出时这些噪点全部现形。我们的做法是对外暴露的调参逻辑全部基于绿幕均匀度和边缘羽化偏好在内部做映射。预览时把参数略微调激进一点让边缘看起来干净拍照时恢复标准值并且拍完会立即在后台用拍照的原图重新过一遍滤镜避免把预览的激进参数用在成片上。这个细节虽然小但对成片质量影响非常明显。4. 调参实战把一块绿幕干净地吃掉4.1 理想环境下的效果与参数区间我在测试时专门借了一支打光灯和一块还算平整的绿幕布模拟相对理想的拍摄环境绿色幕布占画面大约 70% 以上主体离幕布半米左右灯光从左右 45 度打到主体身上不在幕布上留下明显阴影。这种条件下参数宽容度挺高的thresholdSensitivity 放在 0.35 到 0.45 之间都能出干净结果smoothing 放在 0.08 到 0.15 边缘都比较舒服。具体来说我用 thresholdSensitivity 0.4、smoothing 0.1 的时候绿幕基本被吃干净人物的肩膀、头发边缘保留完整只有极细的碎发处有一点绿边。调成 0.35 和 0.15 之后绿边几乎消失但代价是人物边缘多了一圈微弱的光晕这是因为过渡区间把部分半透明前景也抹掉了。所以干净和自然在调参上是对着干的你得知道用户更在意哪头。4.2 光照不均匀时怎么救现实场景根本没有理想绿幕。家里拉个窗帘、床头灯一开幕布上就是一片亮一片暗。这种时候如果还用默认参数暗部绿幕会抠不干净亮部则可能把人物肩膀附近的肤色误伤。我针对这种环境调了一套抢救参数thresholdSensitivity 降到 0.25 甚至 0.2让算法对色度差异更敏感同时 smoothing 提高一点到 0.18 左右用来软化暗部边缘的残留。但这里要提醒一下thresholdSensitivity 调低不是万能的。它本质上是让接近绿色的判定范围变宽范围变宽后浅绿色的衣服、偏黄的肤色也会被波及。我在一台测试机上试过用户穿了一件军绿色卫衣站在不均匀光照的绿幕前threshold 压到 0.2 之后卫衣直接变成半透明。所以面对真实环境更稳妥的方案是加强打光或者退而求其次接受边缘有一点残留通过后续的模糊滤镜把它淡化。4.3 边缘残留和半透明抖动的取舍提到边缘残留就不得不说视频预览下的半透明抖动。这个问题在静态图里根本看不出一录视频就特别明显人物边缘一圈像素在透明和不透明之间反复横跳看起来像边缘在抖。根因是预览画面的噪声让 CbCr 距离刚好卡在 smoothstep 的过渡区间里一帧算出来权重是 0.45下一帧噪声一跳变成 0.52透明度就跟着跳了。我实测下来的缓解办法是给混合结果加一个时域上的稳定不是每帧单独算权重而是把上一帧的权重缓存下来当前帧的权重和上一帧做线性插值。这个操作可以在滤镜外部做也可以在自定义着色器里用 uniform 传入上一帧权重。我们最后选了第二种在着色器里加了 prevBlendValue 的 uniform每帧更新。插值系数取 0.3 到 0.5 之间既能压住抖动又不会让边缘拖出残影。5. 真正的颜色加深混合两个滤镜一起用的进阶玩法5.1 ChromaKeyBlendFilter 与 ColorBurnBlendFilter 的分工标题里既然挂了颜色加深混合滤镜几个字就不得不聊一下 GPUImage 里另一个名为 GPUImageColorBurnBlendFilter 的滤镜。它在移动端图像处理里也挺常用实现的是颜色加深混合模式会让底图暗部更暗、亮部保留原样公式核心是反相、相除、再反相那一套。它和 ChromaKeyBlendFilter 完全是两回事但在我的滤镜链里两者可以配合出现。我把它们的分工讲清楚ChromaKeyBlendFilter 负责去掉你不想要的东西ColorBurnBlendFilter 负责让留下的东西更有氛围。举个例子用户想把自己放到一张傍晚海边的背景图里抠像完成后整张画面偏亮、没有黄昏感这时候再接一个 ColorBurnBlendFilter把夕阳云层的暗部压深一点人物的轮廓和背景的暗部就融在一起了代入感会强很多。5.2 叠加效果示例复古暗调背景替换我在测试时做过一个很直观的叠加实验。先用 ChromaKeyBlendFilter 把绿幕去掉替换成一张深色木质墙面的背景图然后再叠加一层 ColorBurnBlendFilter权重设在 0.3 到 0.4 之间。最终人物的皮肤稍微压暗了一点木质墙面的纹理纹路变得更清楚整体出来是那种偏复古、偏质感的暗调风格和单独用 ChromaKeyBlendFilter 出来的贴图感完全是两码事。顺带说一句ColorBurnBlendFilter 叠加在整个滤镜链的哪个位置也是有讲究的。如果放在色度键混合之前它对原图的改动会直接影响到抠像的颜色判断让原本纯正的绿幕颜色变掉导致抠不干净。我统一把它放在色度键混合之后、最终调色滤镜之前这样它只作用于已经抠好的合成图不会反向干扰抠像逻辑。5.3 性能开销在手机上的真实表现说了这么多性能才是能不能落地的关键。我们把滤镜链从磨皮美白直出改成磨皮美白 → ChromaKeyBlend → ColorBurn → 输出之后在一台中端机上做了 30 分钟压力测试。1080p 预览分辨率下GPU 负荷大约增加了 18% 到 25%整体帧率从 60 帧掉到了 44 帧左右。这个幅度说实话有点肉痛并不是每一台手机都能接受。后来我做了两个优化第一个是把 ColorBurnBlendFilter 的混合权重降到 0.3让它在低端机上可以直接跳过只在高端机开启第二个是把背景图的分辨率限制在预览分辨率的一半因为背景图是静态的降到 540p 肉眼几乎看不出差别GPU 纹理采样压力却小了一截。优化之后中端机可以稳定在 52 帧左右算是达到了可上线标准。6. 第二十一天的踩坑记录与下一步计划6.1 纹理翻转和预览/成片不一致这一天的调试里最折腾的是纹理翻转。Android 相机出来的纹理坐标方向和 GLSurfaceView 的显示坐标偶尔不一致导致抠像区域对不上绿幕没被抠掉人物的脸倒是被抠成了透明。这个问题很多教程提过一嘴但没人说清楚什么时候会遇到。我后来定位到问题出在相机传感器方向、预览旋转角度和 GPUImage 内部纹理坐标共同作用的结果不同测试机的表现都不一样。解决办法其实有点笨在 setBackgroundBitmap 之后对背景图纹理坐标做一次方向校正。我写了一个开关默认关闭遇到某品牌机型再手动打开然后针对该机型的预览和成片分别记录方向偏移量。这个做法不优雅但胜在稳至少不需要为每台手机单独写一套坐标变换矩阵。6.2 内存与纹理回收另一个碰到的坑是 Bitmap 回收。背景图是不断切换的每切一次就 new 一张 Bitmap 喂给 GPUImagePicture如果不主动回收内存涨得飞快。我在测试中连续切换了 50 张背景图内存直接多了接近 300MB其中大部分是 GPUImagePicture 内部缓存的纹理没有释放。解决方案是每次 setBackgroundBitmap 之前先把旧的 GPUImagePicture 从滤镜链上 removeTarget再调用销毁接口释放纹理最后再 new 新的。基线测下来连续切换 50 张图之后内存只涨了不到 20MB这个数字才是正常的。6.3 下一步边缘羽化与肤色保护第二十一天做完背景替换这条线算是跑通了但离真正好用还差两件事。第一是边缘羽化不够精细目前 smoothstep 的参数是全局的遇到发丝这种细节多的区域边缘容易糊成一片下一步准备做局部自适应参数让边缘区域单独用更强的羽化。第二是肤色保护thresholdSensitivity 调低之后黄皮肤容易被误伤这需要把肤色区域先从抠像范围里排除出去或者引入一个人脸肤色的先验 mask。这两块做出来背景替换才算没有明显短板。进度上这个系列已经从滤镜堆叠走到画面合成再往后就是把这套滤镜链整理成可配置的模板方案让产品不用发版就能调参上线。等边缘羽化和肤色保护做完我会把完整的参数模型和测试机数据一起整理出来分享。