原来用GPUImage实现，采用的这篇博客介绍的方法，但是有两个比较严重的问题：

• App启动后第一次使用播放器时会造成主线程卡住1~5秒，越老的机型越长，第二次和以后就完全不卡，直到下次启动。这应该是GPUImage某处初始化造成的，我没有找到具体位置。
• 播放某些视频时，画面中亮白色的位置会出现“过曝”导致看不清细节，原视频是正常的，我看了下着色器里面并没有调整颜色或者亮度，所以这应该是GPUImageMovie视频解码造成的。

我只好搜了一下国外的做法，找到了medium上的这篇文章，它使用iOS自带的CoreImage处理每一帧图像，通过AVVideoComposition合成视频，滤镜用metal实现，性能和显示效果都很好。我将这篇文章翻译一下。

---

1 首先，我们需要一个视频

通用的视频格式，至少AVPlayer能解码的视频格式不带Alpha透明通道，我们需要普通的视频能带Alpha透明信息。有两种方法：最常见的是“绿幕”，如果不限制颜色就用另一种不常见的方法，如下图：

image.png

一些软件如 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
}

完成了，我们的透明视频播放得很不错！

image.png

……还没那么快，视频在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

截屏2022-03-28 上午10.24.54.png

视频与遮罩左右排列

原文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
    }