GPUImage差值混合滤镜实战：从Shader原理到美颜相机创意玩法

美颜相机写到了第二十三四天，最常用那套磨皮、美白、瘦脸、大眼的流程已经稳定住了。原本的计划是继续调参数，但翻了翻项目里挂着的 GPUImage 库，突然想把滤镜列表里少见的混合模式都用一遍。GPUImageDifferenceBlendFilter 这个名字一看就冷门，中文圈子里能查到的资料也少，但差值混合在图像处理里其实是特别有张力的一种思路。这篇文章就记录一下这两天把差值混合滤镜接进项目的全部过程：原理、代码、试验结果和最后落在美颜相机里的封装方式。

差值混合滤镜最反直觉的一点是：它做的是“减法”，不是叠加。它能把两张图的差异变成可视的亮部，相同的区域变成黑色。这个特性如果只用来做普通滤镜会觉得很难受，可一旦把它放进美颜相机的贴纸、边缘强调和创意风格链路里，能玩出来的东西就很多了。整个过程并不复杂，关键是要理解 GPUImage 内部那套纹理输入逻辑，以及处理过程中容易踩的几个真机问题。

1. 为什么现阶段要把“差异”做进美颜相机

1.1 美颜开发进行到这个阶段，想要补的是什么

项目推进到二十多天，核心美颜能力已经形成了一个完整的渲染队列：输入 Camera 帧，做完人脸点位跟踪，再按顺序跑磨皮、脸部形变、美白、基础滤镜。到这一步你会发现，用户对“美”的需求其实是有边界的，磨皮再重就会糊，瘦脸再大就变形，反而是那些风格化效果经常能带来新鲜感。

第二十三天上午我在翻 GPUImage 滤镜列表，其实是为了找一些适合做“重滤镜”的素材。重滤镜不是指强度，而是指画面风格有明确的视觉特征，比如线稿、霓虹描边、纹理错位这一类。GPUImageDifferenceBlendFilter 原始功能是计算两个纹理之间的差值，但把差值结果经过反相、对比度增强之后，就能得到一种类似线稿边沿的效果，正好适合补充美颜相机里的“创意滤镜”区。

那一天我给自己定的目标是：搞清楚这个滤镜在 GPUImage 里的数据流，构造出至少一组可用的组合滤镜。

1.2 用生活化的方式理解差值混合

如果你不是天天写 shader 的人，第一次看“差值混合”可能会懵。我先用最简单的例子解释：把两张照片叠在一起，逐像素做减法，结果取绝对值。如果两层完全一样，结果是纯黑；如果两层差得越多，结果就越亮。

想象一下把一张纸盖在另一张纸上，用铅笔在纸上涂，所有凹凸差异都会通过石墨显现出来。差值混合的逻辑与此非常相似。数学表达是 output = abs(imageA - imageB)，其中 R、G、B 三个通道独立运算。因为它不关心谁大谁小，只看差异，所以图像处理里经常用它做差异检测、边缘提取、对齐判断。

放到美颜相机场景里，这个特性可以直接用在一个很有趣的方向：把原图和磨皮后的图做差值，画面中亮起来的区域就是磨皮改动的所有地方。用户看到这个效果可以非常直观地知道自己被处理了多少，也比切换前后对比更硬核一些。

1.3 差值结果不是“坏的画面”，而是信息层

很多人在第一次跑出差值混合结果时会被画面吓到，觉得色调怪异到没法用。但混合滤镜的输出不应该直接作为最终画面理解，它更像一个中间信息层。

正是这个中间信息层，让差值混合和别的滤镜有本质区别。普通滤镜改变的是像素的颜色走向，差值混合直接给你一张“差异热度图”。有了差异图，后续可以接很多处理：反相变成负片描边，灰度化去掉颜色干扰，再配一个阈值着色器就能得到位图风格的轮廓效果。我把这些思路在后面几节里展开了，先回到滤镜本身的代码结构。

2. GPUImageDifferenceBlendFilter 的像素级实现与 shader 里没有说的事

2.1 滤镜继承关系和第二路纹理的接入方式

在 GPUImage for Android 中，绝大多数单输入滤镜继承自 GPUImageFilter，而差值混合这种需要两张输入图的滤镜，实际继承自 GPUImageTwoInputFilter。

这类滤镜在初始化时并不只创建一个纹理单元，而是为两路输入分别准备了纹理坐标和采样句柄。GPUImage 框架在使用 GPUImageDifferenceBlendFilter 时，主图仍然是正常的 input 纹理，第二张图则需要通过 setBitmap() 传入，框架内部会把 Bitmap 上传到第二个纹理绑定位置。所以日常用法比想象中简单：

java复制GPUImageDifferenceBlendFilter differenceFilter = new GPUImageDifferenceBlendFilter();
differenceFilter.setBitmap(overlayBitmap);

GPUImage gpuImage = new GPUImage(context);
gpuImage.setFilter(differenceFilter);
gpuImage.setImage(baseBitmap);
Bitmap result = gpuImage.getBitmapWithFilterApplied(baseBitmap);

这段代码核心是 setBitmap(overlayBitmap)。没有这一步，滤镜只是一层空壳，因为第二个纹理单元没有内容可用，shader 采样得到的是未定义数据，真机上表现往往是黑屏或者乱码。

2.2 一个值得手抄一遍的片段着色器

GPUImage 源码里的 GPUImageDifferenceBlendFilter 使用了一个非常精简的 fragment shader。逻辑核心几乎就是减法：

glsl复制varying highp vec2 textureCoordinate;
varying highp vec2 textureCoordinate2;

uniform sampler2D inputImageTexture;
uniform sampler2D inputImageTexture2;

void main()
{
    mediump vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
    mediump vec4 textureColor2 = texture2D(inputImageTexture2, textureCoordinate2);

    gl_FragColor = vec4(abs(textureColor.rgb - textureColor2.rgb), textureColor.a);
}

代码量虽然少，但里面有三个细节值得注意。

第一，abs() 作用于 vec3 时是对每个颜色通道分别取绝对值，因此 base 比 overlay 亮和 overlay 比 base 亮，结果完全一致。这个特性让差值混合不像“减去一个固定值”那样单调，而是天然具备对称性。

第二，混合过程没有考虑透明度混合，两个纹理直接参与减法。这意味着 overlay 图中透明区域的内容如果仍然有 RGB 值，也会对结果产生影响。给第二张图做位图构图时，要预先处理好边界和透明区域，不然边缘会出现不希望看到的颜色残留。

第三，alpha 通道取值来自第一路输入 textureColor.a，而不是两图 alpha 的和或平均值。对大多数位图来说无所谓，但如果在做贴纸渲染，第二张贴纸本身有圆角、半透明边界，就不能指望这个滤镜帮你保留贴纸的透明形状。alpha 的合成需要额外的 mask 流程来处理。

2.3 混合模式家族里，差值为什么“画风”不同

把差异混合单独拿出来讲，不如把它放回混合模式谱系里看。美颜项目里常见的几类混合有正片叠底、滤色、叠加和差值，它们对应完全不同的视觉方向：

差值混合与前面三个最大的不同是：它没有一个明确的“变亮”或“变暗”方向，结果取决于两路像素的碰撞强度。这个不可控感，在普通调色流程里是缺点，但放到“艺术滤镜”这条产品线里，反而成了可以反复玩味的核心视觉切入点。

3. 第二十三天的实测：同一张图和不同素材的差异表现

3.1 第一组测试：原图与自身做差值，输出纯黑

把同一个 Bitmap 同时作为 base 和 overlay 传入滤镜时，每一个像素都完全相同，减法结果是 0，三个通道都是 0，所以最终输出就是一张全黑图。

这个测试看起来没有产出，其实是最重要的验证手段。如果你哪一天写完自定义滤镜后发现输出全黑，但确认逻辑没问题，那很可能是两路输入确实一致而不是算错了。我在把这个滤镜接进项目的当天就做了一次同样的实验，用来排除 overlay 是否成功上传的问题。如果 overlay 上传失败，画面通常会出现紫色噪点或全绿异常，而不是干净的全黑。

3.2 第二组测试：原图与轻微偏移的原图，得到边缘轮廓

直接做自身差值没有意义，但把第二张图在水平方向平移几个像素，就立刻能看到有趣的边缘响应。

我用来测试的是一张室内人像，第二张图在代码里将同一张 Bitmap 向右偏移了 6 个像素。运行结果里，人物的脸颊轮廓、头发边缘、背景物体的边界都出现了清晰的白亮描边，大片平坦区域则保持在接近黑色状态。原因是平坦区域相邻像素颜色差异小，平移后差值依然接近 0；而轮廓两侧的颜色会出现跃迁，平移几个像素后就能产生大差值。

这个现象本质上是图像处理里的“差分边缘检测”。如果你想让边缘更窄更精细，可以减少平移距离，比如 1 到 2 个像素。如果想要粗犷的笔触感，可以加大到 10 像素以上。这个“第二张图平移量”就成了一个隐藏的可调参数。

3.3 第三组测试：磨皮前后差值，高亮所有被处理过的细节

这是针对美颜项目的定制实验。我从人脸库里取了一张原图，又跑了一遍现在的磨皮链路得到处理图，然后把两张图送入差值混合。

实际输出非常直观：整个脸部的皮肤纹理、毛孔、痘印、法令纹区域全部亮了起来，这些正是磨皮算法强力修改的地方。额头和下巴在磨皮中变化更明显，亮度也更高。眼睛、发丝等没怎么参与磨皮的区域则保持较暗。这张“差值图”如果再经过二值化处理，可以变成一张磨皮程度的区域热度图。

这个能力真的可以做成产品功能。很多用户在磨皮时会担心“哪里被磨掉了、磨了多少”，差值和原图叠加的半透明样式，可以直接用来展示算法处理的过程。

3.4 第四组测试：叠加重复纹理，获得抽象风格

最后我把第二张图替换成了一张有重复几何纹理的图案，让图案与原图人像混合差值。输出效果不是“图案覆盖在人像上”，而是变成了一种抽象视觉：原图中与纹理颜色相近的区域大量变暗，差异大的区域则保留纹理冲突的亮色，画面出现了很多锯齿状和反射性的结构。

这种结果很难预先脑补出来，所以说差值混合在“创意相机”方向非常值得投入时间。它不像传统的颜色查找表那样可控，更依赖两张图的视觉碰撞。

4. 用灰度、反相和对比度搭一组轮廓滤镜链路

4.1 单用差值混合还不够，需要后续节点做风格收敛

差值混合的直接输出只有在特定素材组合下才算好看，大多数情况下需要后续滤镜来收敛画面。以第二十三天实验里效果最稳定的“平移动画像线稿”为例，直接输出是白色描边加彩色残影，颜色信息会让边缘显得很杂乱。

解决办法就是给差值混合接一个灰度滤镜，再叠加反相。灰度化把所有颜色差异压成亮度信号，反相把白描边变成黑描边，得到的画面立刻有了“铅笔线稿”的味道。

如果你也想做类似效果，滤镜链的 target 连接顺序是比较关键的：

java复制GPUImageGrayscaleFilter grayFilter = new GPUImageGrayscaleFilter();
GPUImageDifferenceBlendFilter diffFilter = new GPUImageDifferenceBlendFilter();
GPUImageColorInvertFilter invertFilter = new GPUImageColorInvertFilter();
GPUImageContrastFilter contrastFilter = new GPUImageContrastFilter();

grayFilter.addTarget(diffFilter);
diffFilter.setBitmap(offsetBitmap);
diffFilter.addTarget(invertFilter);
invertFilter.addTarget(contrastFilter);

GPUImage gpuImage = new GPUImage(context);
gpuImage.setFilter(grayFilter);
gpuImage.setImage(baseBitmap);
Bitmap result = gpuImage.getBitmapWithFilterApplied(baseBitmap);

需要注意 overlayBitmap 传入的位置。这里用的是 diffFilter.setBitmap(offsetBitmap)，而不是手动向灰度滤镜传第二张图。grayFilter 把处理后的纹理输出到 diffFilter 的第一个纹理输入，第二纹理输入则来自 setBitmap 上传的那张偏移图。整个链路上第三个滤镜 invertFilter 接收的是差值结果，所以反相作用在差值图上而不是原图上。

4.2 更强的线性艺术感：两次差值叠加

如果你想让画面更像“高精度线稿”，还可以在第一节测试的基础上做一次更高阶的组合：先做一次低偏移量的边缘提取，再做一次交叉方向的差值叠加。

方法并不难。原来的偏移图是把原图整体向右平移 6 像素，再进行灰度加反相后，边缘还很粗。如果想获得更丰富的头发丝级细节，就准备一张向右平移 1 像素的 overlay，和一张向上平移 1 像素的 overlay，分别跑出两张差值图，再把它们用普通加色模式叠加。

手写叠加链路比较繁琐，在工程里我直接写了一个小的 EdgeStyleFilterGroup，内部维护两个 GPUImageDifferenceBlendFilter 实例，对它们的输出做了一次加法合并。从最终效果来看，头发丝、睫毛、衣服褶皱这些细节都比单次平移版清晰。代价是两张 overlay 占用的纹理内存翻倍，当输入图是大尺寸照片时需要评估机型内存。

4.3 anti-aliased 边缘问题和简单的收敛办法

差值边缘经常会有明显的锯齿，因为算法输出的是硬边亮度差，没有做任何平滑。想要观感更好，可以在链尾接一个轻微的高斯模糊或降噪滤镜。GPUImage 自带的 GPUImageGaussianBlurFilter 可以直接接在 GPUImageColorInvertFilter 之后，把模糊半径控制在 0.5 到 1.0 之间。模糊参数不要太高，否则好不容易提取出来的线条会被糊成一团。

为了不让模糊把整个画面的对比度拉低，我在链尾再接了一个对比度增强滤镜。整体效果从原始差值图的噪乱变成了类似钢笔淡彩的轮廓线，基本达到可以放进贴纸模块的可用状态。

5. 当滤镜在真机上“没生效”：排查输入纹理与线程的标准路径

5.1 “输出全黑”先别怀疑算法，检查第二张图有没有成功上传

第二天把组合滤镜移植到真机时，最容易遇到的现象是画面全黑或者画面只有第一路输入效果。很多人在这种时候会反复检查 shader 里的减法代码，但真正的问题往往出在第二张图的纹理上传环节。

GPUImage 的 GPUImageTwoInputFilter 内部有非常严格的输入状态机。第二路纹理不是一开始就绑定的，而是在 newFrameReady 时按 filterIndex 上传。如果代码里先调用了 gpuImage.setImage(baseBitmap)，随后又调用了 filter.setBitmap(overlayBitmap)，某些版本的 GPUImage 会因纹理时间戳和帧序号不一致而把 overlay 丢弃。

我自己的排查顺序是：先打印 differenceFilter 内部第二个纹理是否被成功设置，再把 overlay 换成纯白图。如果纯白 overlay 与原图差值后，原图区域变暗、原色互补色调变亮，说明第二路输入链路没问题。否则就需要调整调用顺序，确保 setBitmap 在渲染触发前完成。

5.2 GL 线程问题：Bitmap 不能在任意的 Worker 线程直接送进去

第二十四天遇到的最棘手问题是：我写了一个后台线程，在其中用 BitmapFactory.decodeFile() 加载底图和 overlay，然后调用 gpuImage.getBitmapWithFilterApplied()。结果程序经常在部分机型上崩溃，错误日志指向 Bitmap 已被回收或 GL 上下文丢失。

原因是 GPUImage 的滤镜渲染依赖 GL 线程。如果应用没有给 GPUImage 绑定一个 GLSurfaceView，或者渲染环境不在当前线程初始化，那么 setBitmap 里上传纹理用的 GLES20.glGenTextures() 就会失败。getBitmapWithFilterApplied 并没有保证自动切换到合法的 GL 上下文。

比较稳的方案是维护一个只属于滤镜处理专用的 EGLThread，在它里面创建 EGLContext 和 EGLSurface。GPUImage 本身不直接帮你管理这套环境，所以很多项目只敢在 GLSurfaceView 回调里跑滤镜。如果不想写 EGL，可以直接用一个隐性 GLSurfaceView 并且只在 onSurfaceCreated 之后触发渲染。虽然听上去绕，却是最省事的方案。

5.3 尺寸不一致是细节坑

把两张尺寸不一致的 Bitmap 放入差值混合后，容易出现只显示一部分区域的情况。原因是 GPUImage 在内部会把第二输入按照滤镜坐标映射到同一绘制区域，如果两张图宽高比不同，overlay 会被拉伸或裁切，但很多开发者会以为自己写的变换矩阵没有生效。

我建议在 setBitmap 前统一做一次像素级缩放，保证 overlay 的宽高与 base 一致。对于美颜相机场景，这个 overlay 可以是模糊图、风格纹理或预处理后的效果图，通过 Bitmap.createScaledBitmap() 统一尺寸更可控。GPUImage 的优势是纹理处理在 GPU 上，缩放的性能开销相对小。

5.4 内存和纹理上限是决定取舍的边界

混合滤镜天然需要两张大图同时在内存中。如果 base 图是一张 4000x3000 的照片，overlay 也是一张同样尺寸的图，RGB 位图本身约 36MB，两张就是 72MB。然后它们各自还要上传一次 GL 纹理，GPU 显存里又占一份。很多测试机在这种状态下非常容易触发内存回收，甚至直接闪退。

这类问题不能只盯着滤镜本身优化。实际可行的做法是统一把输入尺寸限制在 2048 像素以内，对于美颜相机展示场景完全够用。如果想在相机实时预览时使用差值混合，还需要确保两张纹理都来自同一个 SurfaceTexture 作为数据源，并且是相同尺寸纹理。

6. 第二天接入相机链路：加一个可控强度的差值效果入口

6.1 为什么直接放上去会显得不合群

把差值混合滤镜直接挂到美颜滤镜列表里，会发现一个产品体验上的问题：效果过于生硬。它的结果天然是“全图差异高亮”，用来做风格化虽然个性强，但用户不一定每次都想看到这么重的画面。第二天我做的主要工作，就是给这个滤镜增加一个“强度混合”参数，让它可以由用户滑杆动态控制。

在 GPUImage 官方库中，GPUImageDifferenceBlendFilter 并没有内置 mix 强度参数。如果你想通过 UI 动态改变差值结果，有两种做法：第一种是在差值混合后串联一个 GPUImageOpacityFilter，但对混合模式形成的亮部并不友好，透明度会连带暗部一起变浅，导致整体发灰；第二种是直接继承或复制一个自定义着色器，通过额外的 uniform 来完成。

6.2 自定义弱化强度版 Shader

我给这个滤镜单独建了一个 GPUImageDifferenceBlendMixFilter，Shader 核心逻辑并没有大改，只是在原来差值基础上增加了一个 mixStrength 变量，用来控制“最终画面在原始输出和差值输出之间的位置”。

glsl复制precision highp float;
varying vec2 textureCoordinate;
varying vec2 textureCoordinate2;

uniform sampler2D inputImageTexture;
uniform sampler2D inputImageTexture2;
uniform float mixStrength;

void main()
{
    vec4 baseColor = texture2D(inputImageTexture, textureCoordinate);
    vec4 overlayColor = texture2D(inputImageTexture2, textureCoordinate2);
    vec4 diffColor = vec4(abs(baseColor.rgb - overlayColor.rgb), baseColor.a);

    vec3 mixedColor = mix(baseColor.rgb, overlayColor.rgb, 0.0); // 这里其实是原图
    mixedColor = mix(baseColor.rgb, diffColor.rgb, mixStrength);

    gl_FragColor = vec4(mixedColor, baseColor.a);
}

当 mixStrength = 0.0 时，画面完全等同于原图；当 mixStrength = 1.0 时，画面是全量的差值混合结果。因为这里的混合是在差值滤镜的片元阶段完成的，所以不会引起额外一次纹理拷贝，效率上比串联一个透明度滤镜更好。

6.3 在美颜相机界面加上滑杆入口

项目里的滤镜选择组件已经封装成一个从底部弹出的列表，我在这份列表的最后一项加入了“差异轮廓”预览图。点击之后并不会立即应用，而是先让用户看到基于当前帧生成的默认效果图，再通过右侧滑杆调整从 0 到 1 的 mixStrength 参数。每次拖动，渲染器会重新设置 uniform 并请求重新绘制。

由于实时预览默认需要 30fps，直接让整体 GLSurfaceView 重绘并跑完整条磨皮链路，在中端机型上会显得不够流畅。我给这个滤镜单独开了预览模式：在切换到这个效果时，GPUImage 渲染队列里的磨皮节点先保留，但不再实时做人脸关键点跟踪，少了一部分计算后帧率能回到 25fps 左右。实际测试下来这个体验还能接受。

6.4 在接入时要注意实时渲染状态机

实时渲染和离屏 Bitmap 处理完全不同，尤其当你把美颜相机和 GPUImage 的 SurfaceTexture 放在一起时，过滤节点的增减必须在渲染线程完成。第二天第一次接入预览时报过一次错，因为我在 UI 线程调用 filter.addTarget() 和 setBitmap()，而渲染线程正在执行 draw()。两个线程同时操作纹理队列，轻则闪烁，重则导致 EGL 上下文丢失。

正确做法是使用 GLSurfaceView.queueEvent(Runnable) 把滤镜链变化抛到 GL 线程执行。所有触碰纹理绑定的操作，都应当遵守这个约束。如果项目里自己管理 EGLContext，也需要对应的同步锁或任务队列。

6.5 最后留一个小而有效的组合思路

做完可控强度后，我发现这东西最合适的使用场景其实不是单独做轮廓线，而是作为“氛围滤镜”的辅助层。比如把磨皮后的图与原图相减得到一张区域差异热力图，然后带着这张热力图与某种颜色叠加以实现类似“皮肤呼吸感”的视觉效果，整体画面观感会柔和得多。

如果你也在做美颜类 App，强烈建议别只把差值混合当成特效库里的一个孤立成员，去试试让它与磨皮链互相配合。第二张 overlay 不一定要是外部图片，它可以是滤镜链中某个中间节点的结果纹理。在 GPUImage 的 target 机制里，只要保证第二路输入能够绑定到处理链的某个输出，差值混合就能变成整个渲染链路中的一个差异化反馈节点，这种能力在常规滤镜里并不多见。

这两天的开发日志到这里差不多可以收住了。就我个人经验来说，GPUImageDifferenceBlendFilter 真正让人头疼的不是 shader 本身，而是 GPUImage 对第二路纹理的生命周期管理。如果你刚入门，先把第二十三天的四组实测各跑一遍，理解它是“差异的度量”而不是“颜色的变化”，后面再玩组合就会顺很多。等跑通了，再把强度滑杆和控制入口接上，这个滤镜就不仅是一段贴代码，而是真正长在美颜项目里的一个新功能了。