原来用GPUImage实现，采用的这篇博客介绍的方法，但是有两个比较严重的问题：
- App启动后第一次使用播放器时会造成主线程卡住1~5秒，越老的机型越长，第二次和以后就完全不卡，直到下次启动。这应该是GPUImage某处初始化造成的，我没有找到具体位置。
- 播放某些视频时，画面中亮白色的位置会出现“过曝”导致看不清细节，原视频是正常的，我看了下着色器里面并没有调整颜色或者亮度，所以这应该是GPUImageMovie视频解码造成的。
我只好搜了一下国外的做法，找到了medium上的这篇文章，它使用iOS自带的CoreImage处理每一帧图像，通过AVVideoComposition合成视频，滤镜用metal实现，性能和显示效果都很好。我将这篇文章翻译一下。
1 首先，我们需要一个视频
通用的视频格式，至少AVPlayer能解码的视频格式不带Alpha透明通道，我们需要普通的视频能带Alpha透明信息。有两种方法：最常见的是“绿幕”，如果不限制颜色就用另一种不常见的方法，如下图：
一些软件如 Autodesk 3ds Max 或 Adobe After Effects 能输出带Alpha透明通道的视频，用 Adobe Premiere 创建这种视频也很简单，不需要太多知识。
2 播放视频
熟悉AVFoundation的可以跳过这部分。
在一个单页面的工程ViewController中，添加一个视频播放器。
import AVFoundation
// ...
override func viewDidLoad() {
// ...
let videoUrl = Bundle.main.url(forResource: "playdoh-bat", withExtension: "mp4")!
let playerItem = AVPlayerItem(url: videoUrl)
let player = AVPlayer(playerItem: playerItem)
let playerLayer = AVPlayerLayer(player: player)
playerLayer.bounds = view.bounds
playerLayer.position = view.center
view.layer.addSublayer(playerLayer)
player.play()
}
3 用CoreImage给视频添加filter
CoreImage最酷的一点是它能处理多种格式的图像：CoreGraphics里的CGImage、UIKit里的UIImage，甚至CoreVideo里的CVImageBuffer和CVPixelBuffers。
AVFoundation真的很方便。如果你跟我一样听过AVVideoComposition但从未实际使用，这部分就很有趣。
注意：听起来难以置信AVVideoComposition并不是AVComposition的子类。后者用于合并多个文件中的媒体数据。AVVideoComposition用来合并帧。
苹果官方提供了一系列CIFilters。如何在我们的视频中应用CIFilter如下：
override func viewDidLoad() {
// ...
playerItem.videoComposition = createVideoComposition(for: playerItem)
player.play()
}
func createVideoComposition(for playerItem: AVPlayerItem) -> AVVideoComposition {
let composition = AVVideoComposition(asset: playerItem.asset, applyingCIFiltersWithHandler: { request in
// Here we can use any CIFilter
guard let filter = CIFilter(name: "CIColorPosterize") else {
return request.finish(with: NSError())
}
filter.setValue(request.sourceImage, forKey: kCIInputImageKey)
return request.finish(with: filter.outputImage!, context: nil)
})
return composition
}
然而我们的视频并不需要“色调分离”效果……所以让我们看下一步。
4 创建自己的CoreImage filter
下面的代码很清楚地描述了怎么实现一个CIFilter。
import CoreImage
class AlphaFrameFilter: CIFilter {
static var kernel: CIColorKernel? = {
return CIColorKernel(source: """
kernel vec4 alphaFrame(__sample s, __sample m) {
return vec4( s.rgb, m.r );
}
""")
}()
var inputImage: CIImage?
var maskImage: CIImage?
override var outputImage: CIImage? {
let kernel = AlphaFrameFilter.kernel!
guard let inputImage = inputImage, let maskImage = maskImage else {
return nil
}
let args = [inputImage as AnyObject, maskImage as AnyObject]
return kernel.apply(extent: inputImage.extent, arguments: args)
}
}
CoreImage里面的kernel是一个着色器（Shader）类型的代码片段，里面至少有一个方法返回vec4格式的值。着色器看起来比较复杂，因为它是一种低级语言。它可以用很少的代码实现很炫酷的效果。简单说明一下：着色器在GPU处理像素时并行工作——因此速度超级快。
在Swift里实现时，我们只需要简单地用一个static var创建CIKernel实例。kernel的代码很简单：
- 方法参数接收两个samples（两个像素），每个来自不同的图像或者纹理，但是坐标相同。
- 每个sample的值表示像素颜色rgba（红绿蓝和透明），我们可以直接取想要的值。比如：sample.ra 返回一个长度2的向量，表示红色值和透明度。
- 我们要做的就是返回一个长度4的向量。从图像中取出颜色rgb，从mask图像中取出a透明度，由于mask图像是灰阶图，它的rgb是相同的（且介于0~1之间），我们任选一个就行，这里选r。
5 运行起来
接下来的部分对某些人来说很新颖，也很有意思。我们还不知道怎么把两张图像传给我们的filter。
我们用createVideoComposition(for:)方法实例化一个我们的filter。
注意我没有检查我们需要的CIFilter是否存在，创建我们的filter很简单。
我们需要将request里面的sourceImage分成两部分，上面部分是颜色信息，下面部分是透明度信息。我并没有深入了解CoreImage的坐标系以及cropped(to:)方法怎么实现的。我只知道当前视频的尺寸比实际需要播放的大。在苹果框架里试了后，得到了正确的AVVideoComposition来渲染我们的透明视频。
func createVideoComposition(for playerItem: AVPlayerItem) -> AVVideoComposition {
let videoSize = CGSize(width: 460, height: 572 / 2.0)
let composition = AVMutableVideoComposition(asset: playerItem.asset, applyingCIFiltersWithHandler: { request in
let sourceRect = CGRect(origin: .zero, size: videoSize)
let alphaRect = sourceRect.offsetBy(dx: 0, dy: sourceRect.height)
let transform = CGAffineTransform(translationX: 0, y: -sourceRect.height)
let filter = AlphaFrameFilter()
filter.inputImage = request.sourceImage.cropped(to: alphaRect).transformed(by: transform)
filter.maskImage = request.sourceImage.cropped(to: sourceRect)
return request.finish(with: filter.outputImage!, context: nil)
})
composition.renderSize = videoSize
return composition
}
完成了，我们的透明视频播放得很不错！
……还没那么快，视频在iOS模拟器上正常，但是真机有问题。因为AVPlayerLayer并不知道我们给它提供了透明的pixel buffer。我们用下面的一行代码修复一下。
override func viewDidLoad() {
// ...
playerLayer.pixelBufferAttributes = [(kCVPixelBufferPixelFormatTypeKey as String): kCVPixelFormatType_32BGRA]
// ...
}
Github上展示了完整的用自定义filter渲染透明视频的例子。代码上有一个改进是自定义了AVPlayerView类，就不需要硬编码视频尺寸了。
原文没有提到Xcode里的metal配置，不配置的话编译会报错。
Xcode配置
配置里搜索metal，在
Metal Compiler -> Other Metal Compiler Flags 添加 -fcikernel
Metal Linker -> Other Metal Linker Flags 添加 -cikernel
视频与遮罩左右排列
原文Demo的视频与遮罩是上下排列的，如果需要左右排列，稍微修改图像变换即可，我实现了一下，按下面方法修改。
import CoreImage
extension CIImage {
typealias VerticalSplit = (topImage: CIImage, bottomImage: CIImage)
func verticalSplit() -> VerticalSplit {
let outputExtent = self.extent.applying(CGAffineTransform(scaleX: 1.0, y: 0.5))
// Get the top region according to Core Image coordinate system, (0,0) being bottom left
let translate = CGAffineTransform(translationX: 0, y: outputExtent.height)
let topRegion = outputExtent.applying(translate)
var topImage = self.cropped(to: topRegion)
// Translate topImage back to origin
topImage = topImage.transformed(by: translate.inverted())
let bottomRegion = outputExtent
let bottomImage = self.cropped(to: bottomRegion)
return (topImage, bottomImage)
}
typealias HorizontalSplit = (leftImage: CIImage, rightImage: CIImage)
func horizontalSplit() -> VerticalSplit {
let outputExtent = self.extent.applying(CGAffineTransform(scaleX: 0.5, y: 1.0))
// Get the top region according to Core Image coordinate system, (0,0) being bottom left
let translate = CGAffineTransform(translationX: outputExtent.width, y: 0)
let rightRegion = outputExtent.applying(translate)
var rightImage = self.cropped(to: rightRegion)
// Translate topImage back to origin
rightImage = rightImage.transformed(by: translate.inverted())
let leftRegion = outputExtent
let leftImage = self.cropped(to: leftRegion)
return (leftImage, rightImage)
}
}
func createVideoComposition(for asset: AVAsset) -> AVVideoComposition {
let filter = AlphaFrameFilter(renderingMode: .builtInFilter)
let composition = AVMutableVideoComposition(asset: asset, applyingCIFiltersWithHandler: { request in
do {
// let (inputImage, maskImage) = request.sourceImage.verticalSplit()
let (inputImage, maskImage) = request.sourceImage.horizontalSplit()
let outputImage = try filter.process(inputImage, mask: maskImage)
return request.finish(with: outputImage, context: nil)
} catch {
// os_log("Video composition error: %s", String(describing: error))
return request.finish(with: error)
}
})
// composition.renderSize = asset.videoSize.applying(CGAffineTransform(scaleX: 1.0, y: 0.5))
composition.renderSize = asset.videoSize.applying(CGAffineTransform(scaleX: 0.5, y: 1.0))
return composition
}
