探索 GPUImage 音视频技术（9）：视觉特效滤镜

这个系列文章我们来介绍一位海外工程师如何探索 GPUImage 音视频技术，对于想要开始学习音视频技术的朋友，这些文章是份不错的入门资料，本篇介绍 GPUImage 视觉特效滤镜。

——来自公众号“关键帧Keyframe”的分享

GPUImage 的视觉特效滤镜让你能以 GPU 实时渲染的方式，对图片或视频施加从“轻微修饰”到“戏剧性艺术化”的丰富效果。它们不仅适用于照片编辑 App，也能在相机或视频处理系统中大显身手。

与仅调节色彩通道的“颜色滤镜”或把多张图像合成的“混合滤镜”不同，视觉特效滤镜的核心在于对图像空间特征进行形变、风格化、模糊或生成新图案。

1、视觉特效分类速览

2、常用形变特效

2.1、玻璃球滤镜（Glass Sphere）

效果：像在画面上放了一颗玻璃珠，透过珠子能看到放大并折射的景物。

GPUImageGlassSphereFilter *glassSphereFilter = [[GPUImageGlassSphereFilter alloc] init];
glassSphereFilter.center = CGPointMake(0.5, 0.5); // 球心在画面中心
glassSphereFilter.radius = 0.25;                  // 球半径（0~1）
glassSphereFilter.refractiveIndex = 0.71;         // 折射率，越大越扭曲

UIImage *filteredImage = [glassSphereFilter imageByFilteringImage:inputImage];

内部原理

1. 计算球面法线
2. 根据折射率偏移采样坐标
3. 叠加环境光与高光，形成玻璃质感

调大 radius 让球更大；调高 refractiveIndex 让折射更夸张。

2.2、缩放模糊滤镜（Zoom Blur）

效果：以某一点为中心，沿径向产生放射状动感模糊，模拟“镜头推拉”。

GPUImageZoomBlurFilter *zoomBlurFilter = [[GPUImageZoomBlurFilter alloc] init];
zoomBlurFilter.blurCenter = CGPointMake(0.5, 0.5); // 中心点
zoomBlurFilter.blurSize = 2.0;                      // 模糊强度

UIImage *filteredImage = [zoomBlurFilter imageByFilteringImage:inputImage];

把 blurCenter 移到人脸位置，瞬间做出“灵魂出窍”大片效果。

3、风格化特效

3.1、波点滤镜（Polka Dot）

效果：把图像用彩色圆点「印刷」出来，类似漫画网点但更圆润。

GPUImagePolkaDotFilter *polkaDotFilter = [[GPUImagePolkaDotFilter alloc] init];
polkaDotFilter.fractionalWidthOfAPixel = 0.05; // 单点直径
polkaDotFilter.dotScaling = 0.90;              // 点间距（0~1）

UIImage *filteredImage = [polkaDotFilter imageByFilteringImage:inputImage];

调小 fractionalWidthOfAPixel 可获得更细腻的波点；dotScaling 越小，点与点之间留白越多。

4、在 App 中快速上手

4.1、对静态图应用特效

// 1. 创建滤镜
GPUImageGlassSphereFilter *sphere = [[GPUImageGlassSphereFilter alloc] init];
sphere.radius = 0.3;

// 2. 处理并显示
UIImage *output = [sphere imageByFilteringImage:[UIImage imageNamed:@"sample.jpg"]];
self.imageView.image = output;

4.2、实时相机特效

// 1. 启动相机
GPUImageVideoCamera *camera = [[GPUImageVideoCamera alloc] 
    initWithSessionPreset:AVCaptureSessionPreset640x480
           cameraPosition:AVCaptureDevicePositionBack];
camera.outputImageOrientation = UIInterfaceOrientationPortrait;

// 2. 创建滤镜
GPUImageZoomBlurFilter *zoom = [[GPUImageZoomBlurFilter alloc] init];
zoom.blurSize = 2.0;

// 3. 创建预览视图
GPUImageView *preview = [[GPUImageView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:preview];

// 4. 连接管线
[camera addTarget:zoom];
[zoom addTarget:preview];

// 5. 开拍
[camera startCameraCapture];

5、滤镜链：组合出独一无二的效果

GPUImageGlassSphereFilter *sphere = [[GPUImageGlassSphereFilter alloc] init];
GPUImageVignetteFilter *vignette = [[GPUImageVignetteFilter alloc] init];

sphere.radius = 0.3;
vignette.vignetteEnd = 0.75;

[sphere addTarget:vignette];               // sphere → vignette
[stillCamera addTarget:sphere];            // 相机 → sphere
[vignette addTarget:filterView];           // vignette → 屏幕

6、性能小贴士

7、典型场景 & 推荐组合

8、结语

GPUImage 的视觉特效滤镜覆盖了形变、风格化、模糊、纹理生成四大方向，全部基于 GPU 实时运算。掌握它们的核心参数与组合技巧，你就能在 iOS/macOS 应用中轻松做出让人过目不忘的视觉体验。

学习和提升音视频开发技术，推荐你加入我们的知识星球：【关键帧的音视频开发圈】