探索 GPUImage 音视频技术（8）：混合模式过滤器

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

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

GPUImage 提供了 30 余种混合（Blend）滤镜，用于将两张图片的像素按不同算法混合，产生 Photoshop 级的效果。
所有混合滤镜都继承自 GPUImageTwoInputFilter，因此它们都接受 基础图（source） 和 叠加图（overlay） 两个输入。

1、快速上手

Objective-C

GPUImagePicture *base   = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"bg.jpg"]];
GPUImagePicture *top    = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"mask.png"]];

GPUImageMultiplyBlendFilter *blend = [[GPUImageMultiplyBlendFilter alloc] init];
[base addTarget:blend];
[top  addTarget:blend];

[base processImage];
[top  processImage];
UIImage *result = [blend imageFromCurrentFramebuffer];

Swift

let base = GPUImagePicture(image: UIImage(named:"bg.jpg"))
let top  = GPUImagePicture(image: UIImage(named:"mask.png"))

let blend = GPUImageMultiplyBlendFilter()
base?.addTarget(blend)
top?.addTarget(blend)

base?.processImage()
top?.processImage()
let result = blend.imageFromCurrentFramebuffer()

2、 支持的混合模式总览

完整列表见：GPUImage/FilterCategories/Blend 目录。

3、各模式详解与示例

3.1、Multiple（正片叠底）

GPUImageMultiplyBlendFilter *filter = [[GPUImageMultiplyBlendFilter alloc] init];

效果：像两张幻灯片叠在一起，结果总是更暗。适合添加纹理或阴影。

3.2、Screen（滤色）

GPUImageScreenBlendFilter *filter = [[GPUImageScreenBlendFilter alloc] init];

效果：与 Multiply 相反，结果更亮；常用于光效叠加。

3.3、Overlay（叠加）

GPUImageOverlayBlendFilter *filter = [[GPUImageOverlayBlendFilter alloc] init];

效果：保留基础图的中灰，亮部更亮、暗部更暗，提高对比。

3.4、Color / Hue / Saturation / Luminosity

GPUImageColorBlendFilter *color = [[GPUImageColorBlendFilter alloc] init];
GPUImageHueBlendFilter *hue   = [[GPUImageHueBlendFilter alloc] init];

• Color：把叠加图的色相+饱和度应用到基础图的明度。
• Hue：仅替换色相。
• Saturation：仅替换饱和度。
• Luminosity：仅替换明度。

3.5、Add（线性加）

GPUImageAddBlendFilter *add = [[GPUImageAddBlendFilter alloc] init];

效果：直接相加，容易过曝，适合制造炫光、霓虹。

4、常见场景代码片段

4.1、实时相机叠加 Logo

GPUImageVideoCamera *camera = [[GPUImageVideoCamera alloc]
                               initWithSessionPreset:AVCaptureSessionPreset1280x720
                               cameraPosition:AVCaptureDevicePositionBack];
GPUImagePicture *logo = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"logo.png"]];

GPUImageAlphaBlendFilter *blend = [[GPUImageAlphaBlendFilter alloc] init];
blend.mix = 0.8;   // 0~1 透明度

[camera addTarget:blend];
[logo   addTarget:blend];

GPUImageView *preview = [[GPUImageView alloc] initWithFrame:self.view.bounds];
[blend addTarget:preview];
[self.view addSubview:preview];

[camera startCameraCapture];
[logo processImage];

4.2、多重混合链

GPUImagePicture *bg   = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"bg.jpg"]];
GPUImagePicture *tex1 = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"texture1.png"]];
GPUImagePicture *tex2 = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"texture2.png"]];

GPUImageMultiplyBlendFilter *m1 = [[GPUImageMultiplyBlendFilter alloc] init];
[bg   addTarget:m1];
[tex1 addTarget:m1];

GPUImageOverlayBlendFilter *m2 = [[GPUImageOverlayBlendFilter alloc] init];
[m1   addTarget:m2];
[tex2 addTarget:m2];

[bg   processImage];
[tex1 processImage];
[tex2 processImage];

5、高级用法与技巧

5.1、调节混合强度

使用 GPUImageOpacityFilter 控制叠加图强度：

GPUImageOpacityFilter *op = [[GPUImageOpacityFilter alloc] init];
[op setOpacity:0.6];
[overlayPicture addTarget:op];
[op addTarget:blendFilter];

5.2、动态混合值

部分滤镜（如 GPUImageAlphaBlendFilter、GPUImageDissolveBlendFilter）提供 mix 属性，可在 0~1 之间动画：

[blendFilter setMix:0.0];
[UIView animateWithDuration:1.0 animations:^{
    blendFilter.mix = 1.0;
}];

5.3、使用遮罩

把一张灰度图当作遮罩，实现局部混合：

GPUImagePicture *mask = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:@"mask.png"]];
GPUImageMaskFilter *maskFilter = [[GPUImageMaskFilter alloc] init];
[topImage addTarget:maskFilter];
[mask   addTarget:maskFilter];

// 再与底图混合
[maskFilter addTarget:blendFilter];

6、性能与注意事项

• 纹理尺寸：确保两张图尺寸一致或比例相同，否则会自动拉伸。
• 颜色空间：GPUImage 使用 RGBA，透明像素请使用 PNG。
• 链式滤镜：每增加一级混合，会新建一帧缓存，避免过长链。
• 实时场景：在 iPhone 6 及以上，1080p 30 fps 同时跑 3-4 个混合滤镜无压力。

7、参考资料

• GPUImage 源码：framework/Source/GPUImage*BlendFilter.m
• Photoshop Blend Mode 公式：https://www.w3.org/TR/compositing-1/#blendingscreen
• 官方示例项目：examples/iOS/FilterShowcase

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