13、视频美颜滤镜：OpenGL ES基础、GLSurfaceView使用、美颜滤镜原理（高斯模糊、双边滤波）、GPUImage集成
各位同学，欢迎来到第13章。今天我们要聊一个让直播画面「脱胎换骨」的话题——美颜滤镜。
说实话，我早年刚接触音视频时，觉得美颜不就是「磨皮+美白」嘛，有啥难的？直到自己动手实现，才发现这里面水挺深的。OpenGL ES、着色器、纹理渲染……任何一个环节出问题，画面要么崩掉，要么卡成PPT。
这一章，我会带你从零搭建美颜滤镜的知识体系。咱们不搞虚的，直接上实战。
13.1 OpenGL ES基础：你只需要知道这些
OpenGL ES，说白了就是一套在移动设备上画图的API。它不负责「美颜」，它只负责「把像素数据扔到GPU里算，再把结果拿回来」。美颜算法，其实是靠着色器（Shader）来完成的。
我个人习惯把OpenGL ES的工作流程总结成三步：
- 准备数据：把摄像头采集的YUV或RGBA数据，上传到GPU纹理。
- 执行着色器：GPU对每个像素执行你写的算法（比如高斯模糊）。
- 读取结果：把处理后的纹理渲染到屏幕，或者编码成视频帧。
这里有个关键概念——纹理。你可以把纹理想象成GPU里的一块「画布」，像素数据就贴在这块画布上。着色器就是「画笔」，它决定每个像素最终的颜色。
核心要点：OpenGL ES不直接处理「美颜」，它只提供「并行计算像素」的能力。美颜效果的好坏，99%取决于着色器代码的质量。
13.2 GLSurfaceView：Android上的OpenGL容器
在Android里，我们通常用GLSurfaceView来承载OpenGL渲染。它帮我们管理了EGL上下文、渲染线程、生命周期等脏活累活。
我记得第一次用GLSurfaceView时，踩过一个坑：必须在GL线程里调用OpenGL API。如果你在UI线程里操作纹理，轻则闪退，重则手机发烫。
使用GLSurfaceView的标准姿势是这样的：
public class MyGLSurfaceView extends GLSurfaceView {
private MyRenderer renderer;
public MyGLSurfaceView(Context context) {
super(context);
setEGLContextClientVersion(2); // 使用OpenGL ES 2.0
renderer = new MyRenderer();
setRenderer(renderer);
setRenderMode(RENDERMODE_CONTINUOUSLY); // 持续渲染
}
}Renderer接口有三个方法，你必须要实现：
onSurfaceCreated：初始化纹理、着色器程序。onSurfaceChanged：设置视口大小。onDrawFrame：每帧调用，执行渲染逻辑。
小技巧：如果你做美颜滤镜，建议把setRenderMode设为RENDERMODE_WHEN_DIRTY，只在有新帧时渲染，省电又省CPU。
13.3 美颜滤镜原理：从高斯模糊到双边滤波
美颜的核心，其实就是「磨皮」+「美白」。美白好办，调一下颜色矩阵就行。磨皮才是重头戏。
磨皮的本质是平滑图像，去掉皮肤上的小瑕疵。最简单的平滑算法就是——高斯模糊。
13.3.1 高斯模糊：最基础的平滑
高斯模糊的原理，说白了就是「每个像素取周围像素的加权平均」。权重由高斯函数决定，离中心越近权重越大。
但直接做高斯模糊有个问题：边缘也会被模糊掉。你想想看，如果眼睛和皮肤的边界被模糊了，画面就会像「塑料人」一样假。
我在项目中遇到过这种情况：用高斯模糊磨皮，结果主播的眉毛和头发边缘全糊了，观众弹幕直接刷「这是开了美颜还是开了马赛克？」
13.3.2 双边滤波：保留边缘的平滑
为了解决边缘模糊的问题，双边滤波登场了。它在高斯模糊的基础上，加了一个像素值差异权重。
什么意思呢？就是如果两个像素的颜色差异很大（比如皮肤和眉毛），就认为它们属于不同物体，不参与平滑。这样既能磨皮，又能保留边缘。
双边滤波的公式长这样：
// 伪代码，理解即可
for each pixel (i, j):
sum_weight = 0
sum_color = 0
for each neighbor (k, l):
spatial_weight = gaussian_distance(i-k, j-l) // 空间距离权重
color_weight = gaussian_color_diff(pixel[i][j], pixel[k][l]) // 颜色差异权重
weight = spatial_weight * color_weight
sum_weight += weight
sum_color += pixel[k][l] * weight
output[i][j] = sum_color / sum_weight注意：双边滤波的计算量比高斯模糊大得多。在移动端，如果直接对全分辨率做双边滤波，帧率会掉到个位数。我建议先降采样，再做滤波，最后上采样回来。
13.4 GPUImage集成：站在巨人的肩膀上
自己手写着色器固然很酷，但效率嘛……你懂的。好在开源社区有现成的轮子——GPUImage。
GPUImage是一个基于OpenGL ES的滤镜框架，封装了各种滤镜效果。你只需要把摄像头数据喂给它，它就能输出美颜后的画面。
集成GPUImage的步骤很简单：
- 在
build.gradle里添加依赖：implementation 'jp.co.cyberagent.android:gpuimage:2.1.0' - 创建
GPUImageView，替代原来的GLSurfaceView。 - 创建滤镜对象，比如
GPUImageBilateralFilter（双边滤波磨皮）。 - 把滤镜设置到
GPUImageView上。
代码示例：
GPUImageView gpuImageView = findViewById(R.id.gpu_image_view);
GPUImage gpuImage = new GPUImage(this);
gpuImage.setGLSurfaceView(gpuImageView);
// 创建美颜滤镜组合
GPUImageFilterGroup filterGroup = new GPUImageFilterGroup();
filterGroup.addFilter(new GPUImageBrightnessFilter(0.1f)); // 美白
filterGroup.addFilter(new GPUImageBilateralFilter(2.0f)); // 磨皮
gpuImage.setFilter(filterGroup);
// 设置摄像头预览
gpuImage.setUpCamera(camera);
gpuImage.startCameraPreview();你看，几行代码就实现了美颜。但我要提醒你：GPUImage的默认双边滤波效率一般。我曾经在低端机上测试，开启磨皮后帧率从30掉到18。后来我改用了降采样+高斯模糊+边缘保留的组合方案，才稳住25帧。
我的建议：如果项目对性能要求高，不要直接用GPUImage的BilateralFilter。自己写一个「降采样→高斯模糊→混合原图」的着色器，效果接近，性能翻倍。
13.5 知识体系总览
下面这张图，帮你把本章的知识点串起来：
从图中你可以看到，美颜滤镜的底层是OpenGL ES，中间层是GLSurfaceView提供的渲染框架，上层才是具体的算法实现。而GPUImage，则是把这一切打包好的「成品工具箱」。
13.6 本章小结
嗯，这一章的内容确实不少。我们来捋一捋重点：
- OpenGL ES：移动端GPU编程的基础，核心是纹理和着色器。
- GLSurfaceView：Android上管理OpenGL渲染的容器，注意线程安全。
- 高斯模糊：最简单的平滑算法，但会丢失边缘细节。
- 双边滤波：保留边缘的平滑算法，但计算量大，需要降采样优化。
- GPUImage：开箱即用的滤镜框架，适合快速集成，但性能调优还得自己来。
最后说一句：美颜滤镜这东西，效果和性能永远在博弈。不要迷信某个算法，多在实际设备上测试，找到最适合你场景的平衡点。
公众号:蓝海资料掘金营，微信deep3321