21、美颜滤镜实现：双边滤波、磨皮算法、大眼瘦脸、GPUImage集成

美颜滤镜，说白了就是让画面里的人更好看。我刚开始做音视频开发时，觉得美颜不就是加个模糊吗？后来踩了坑才发现，这里面的门道深着呢。

今天咱们就把美颜滤镜的几大核心模块拆开揉碎了讲。双边滤波、磨皮算法、大眼瘦脸，还有GPUImage的集成方式，一个都不落下。

双边滤波：保边去噪的核心

普通的模糊滤镜，比如高斯模糊，会把整张图都糊掉。你想想看，人脸边缘也糊了，那效果就很假。双边滤波（Bilateral Filter）厉害的地方在于——它能保留边缘信息。

为什么能做到？因为它同时考虑了空间距离和像素值差异。简单说：离得近的像素权重高，颜色相近的像素权重也高。边缘处颜色差异大，所以边缘不会被模糊掉。

我在项目中遇到过一个问题：双边滤波在低端手机上跑不动。每帧处理要30多毫秒，直接掉帧。后来我用了降采样+小半径滤波的方案，才把时间压到8ms以内。

// 双边滤波的GLSL片段着色器核心代码
uniform sampler2D inputTexture;
uniform vec2 texelOffset;
uniform float blurRadius;
uniform float sigmaColor;

void main() {
    vec2 uv = gl_FragCoord.xy / resolution.xy;
    vec3 centerColor = texture2D(inputTexture, uv).rgb;
    
    vec3 sum = vec3(0.0);
    float totalWeight = 0.0;
    
    for (int x = -RADIUS; x <= RADIUS; x++) {
        for (int y = -RADIUS; y <= RADIUS; y++) {
            vec2 offset = vec2(float(x), float(y)) * texelOffset;
            vec3 sampleColor = texture2D(inputTexture, uv + offset).rgb;
            
            float spaceWeight = exp(-float(x*x + y*y) / (2.0 * blurRadius * blurRadius));
            float colorWeight = exp(-distance(sampleColor, centerColor) / (2.0 * sigmaColor * sigmaColor));
            
            float weight = spaceWeight * colorWeight;
            sum += sampleColor * weight;
            totalWeight += weight;
        }
    }
    
    gl_FragColor = vec4(sum / totalWeight, 1.0);
}

磨皮算法：让皮肤更细腻

磨皮的本质是低频滤波。把皮肤上的痘印、毛孔这些高频细节抹掉，保留五官轮廓这些低频信息。

常用的磨皮方案有几种：

• 高斯模糊+蒙版：先模糊整张图，再用边缘蒙版把五官区域还原回来。优点是简单，缺点是容易有光晕。
• 表面模糊：类似双边滤波，但阈值控制更灵活。我比较喜欢用这个，效果自然。
• 频率分离：把图像分成低频层和高频层，只处理高频层。专业修图软件常用，但实时渲染开销大。

嗯，这里要注意：磨皮不是越狠越好。我见过有些App磨皮开满，人脸像塑料一样。建议给用户提供0-100的滑条，默认值设在30左右比较安全。

// 表面模糊的简化实现
vec3 surfaceBlur(vec2 uv, float threshold, float radius) {
    vec3 center = texture2D(inputTexture, uv).rgb;
    vec3 sum = vec3(0.0);
    float count = 0.0;
    
    for (int i = -RADIUS; i <= RADIUS; i++) {
        for (int j = -RADIUS; j <= RADIUS; j++) {
            vec2 offset = vec2(float(i), float(j)) * texelOffset;
            vec3 sample = texture2D(inputTexture, uv + offset).rgb;
            float diff = length(sample - center);
            
            if (diff < threshold) {
                sum += sample;
                count += 1.0;
            }
        }
    }
    
    return count > 0.0 ? sum / count : center;
}

大眼瘦脸：基于人脸关键点的形变

大眼和瘦脸，本质上都是图像扭曲（Image Warping）。你需要先检测到人脸关键点，然后根据关键点位置做局部形变。

大眼的原理：以眼睛中心为圆心，把圆内的像素向外拉伸。拉伸的强度从中心到边缘逐渐减弱。

瘦脸的原理：以脸颊两侧的关键点为控制点，把下巴到颧骨区域的像素向内收缩。

// 大眼效果的顶点形变算法（简化版）
vec2 bigEye(vec2 uv, vec2 eyeCenter, float radius, float strength) {
    vec2 delta = uv - eyeCenter;
    float distance = length(delta);
    
    if (distance >= radius) return uv;
    
    float scale = 1.0 - strength * (1.0 - distance / radius);
    scale = max(scale, 0.1); // 防止过度拉伸
    
    return eyeCenter + delta * scale;
}

我记得第一次实现大眼效果时，直接把整只眼睛都拉伸了，结果眼珠子变形，看着像外星人。后来才意识到：瞳孔区域不能拉伸，只拉伸眼白和眼角部分。这个细节很关键。

GPUImage集成：开箱即用的滤镜框架

GPUImage是iOS上很成熟的图像处理框架，后来也有Android移植版。它把OpenGL ES的操作封装成了链式调用的滤镜管道。

为什么要集成GPUImage？说白了，它帮你省了写GLSL和管纹理传递的脏活。你只需要定义好滤镜链，剩下的交给框架。

集成步骤大致如下：

1. 添加GPUImage依赖（gradle引入或源码导入）
2. 创建GPUImage实例，绑定到GLSurfaceView或TextureView
3. 构建滤镜链：Camera → 美颜滤镜 → 大眼滤镜 → 瘦脸滤镜 → 显示
4. 设置滤镜参数，实时调整

// GPUImage滤镜链的构建示例
GPUImage mGPUImage = new GPUImage(context);

// 创建自定义美颜滤镜
GPUImageBilateralFilter bilateralFilter = new GPUImageBilateralFilter();
bilateralFilter.setBlurRadius(4.0f);
bilateralFilter.setSigmaColor(0.1f);

// 创建大眼瘦脸滤镜（需要自己实现）
GPUImageWarpFilter warpFilter = new GPUImageWarpFilter();
warpFilter.setEyeScale(1.3f);
warpFilter.setFaceScale(0.85f);

// 构建滤镜链
mGPUImage.setFilter(bilateralFilter);
bilateralFilter.addTarget(warpFilter);

// 设置相机源
mGPUImage.setUpCamera(camera);
mGPUImage.startCamera();

知识体系总览

下面这张图把本章的核心逻辑串起来了。你可以看到从输入到输出的完整链路，以及每个环节的关键技术点。

从流程图可以看到，整个美颜管线分为两条并行路径：磨皮和形变。它们都依赖人脸关键点检测的结果。最后通过GPUImage的滤镜链机制整合到一起，输出到编码器进行推流。

我个人习惯把磨皮和形变做成两个独立的滤镜类，方便单独调试。调试时先关掉形变，只调磨皮参数；磨皮满意了再开形变。这样定位问题快很多。

好了，美颜滤镜的核心实现就讲到这里。双边滤波的保边特性、磨皮的亮度通道处理、大眼瘦脸的局部形变逻辑，还有GPUImage的集成方式，都是实战中必须掌握的内容。下一章咱们会聊编码参数优化和推流稳定性，到时候见。

---

公众号:蓝海资料掘金营，微信deep3321