我的目标是使用以下方法在真实环境中呈现 2D 动画角色ARKit。动画角色是视频的一部分，如下视频快照所示：
使用以下代码可以毫无问题地显示视频本身：
func view(_ view: ARSKView, nodeFor anchor: ARAnchor) -> SKNode? {
guard let urlString = Bundle.main.path(forResource: "resourceName", ofType: "mp4") else { return nil }
let url = URL(fileURLWithPath: urlString)
let asset = AVAsset(url: url)
let item = AVPlayerItem(asset: asset)
let player = AVPlayer(playerItem: item)
let videoNode = SKVideoNode(avPlayer: player)
videoNode.size = CGSize(width: 200.0, height: 150.0)
videoNode.anchorPoint = CGPoint(x: 0.5, y: 0.0)
return videoNode
}
此代码的结果如预期显示在下面应用程序的屏幕截图中：
但正如你所看到的，角色的背景不是很好，所以我需要让它消失，以创造角色实际上站在水平面上的错觉。 我试图通过对视频进行色度键效果来实现这一目标。
我实现色度键效果的方法是创建一个基于"CIColorCube" CIFilter，然后使用过滤器应用到视频AVVideoComposition.
首先是创建过滤器的代码：
func RGBtoHSV(r : Float, g : Float, b : Float) -> (h : Float, s : Float, v : Float) {
var h : CGFloat = 0
var s : CGFloat = 0
var v : CGFloat = 0
let col = UIColor(red: CGFloat(r), green: CGFloat(g), blue: CGFloat(b), alpha: 1.0)
col.getHue(&h, saturation: &s, brightness: &v, alpha: nil)
return (Float(h), Float(s), Float(v))
}
func colorCubeFilterForChromaKey(hueAngle: Float) -> CIFilter {
let hueRange: Float = 20 // degrees size pie shape that we want to replace
let minHueAngle: Float = (hueAngle - hueRange/2.0) / 360
let maxHueAngle: Float = (hueAngle + hueRange/2.0) / 360
let size = 64
var cubeData = [Float](repeating: 0, count: size * size * size * 4)
var rgb: [Float] = [0, 0, 0]
var hsv: (h : Float, s : Float, v : Float)
var offset = 0
for z in 0 ..< size {
rgb[2] = Float(z) / Float(size) // blue value
for y in 0 ..< size {
rgb[1] = Float(y) / Float(size) // green value
for x in 0 ..< size {
rgb[0] = Float(x) / Float(size) // red value
hsv = RGBtoHSV(r: rgb[0], g: rgb[1], b: rgb[2])
// TODO: Check if hsv.s > 0.5 is really nesseccary
let alpha: Float = (hsv.h > minHueAngle && hsv.h < maxHueAngle && hsv.s > 0.5) ? 0 : 1.0
cubeData[offset] = rgb[0] * alpha
cubeData[offset + 1] = rgb[1] * alpha
cubeData[offset + 2] = rgb[2] * alpha
cubeData[offset + 3] = alpha
offset += 4
}
}
}
let b = cubeData.withUnsafeBufferPointer { Data(buffer: $0) }
let data = b as NSData
let colorCube = CIFilter(name: "CIColorCube", withInputParameters: [
"inputCubeDimension": size,
"inputCubeData": data
])
return colorCube!
}
然后是通过修改函数将滤镜应用到视频的代码func view(_ view: ARSKView, nodeFor anchor: ARAnchor) -> SKNode?我之前写过：
func view(_ view: ARSKView, nodeFor anchor: ARAnchor) -> SKNode? {
guard let urlString = Bundle.main.path(forResource: "resourceName", ofType: "mp4") else { return nil }
let url = URL(fileURLWithPath: urlString)
let asset = AVAsset(url: url)
let filter = colorCubeFilterForChromaKey(hueAngle: 38)
let composition = AVVideoComposition(asset: asset, applyingCIFiltersWithHandler: { request in
let source = request.sourceImage
filter.setValue(source, forKey: kCIInputImageKey)
let output = filter.outputImage
request.finish(with: output!, context: nil)
})
let item = AVPlayerItem(asset: asset)
item.videoComposition = composition
let player = AVPlayer(playerItem: item)
let videoNode = SKVideoNode(avPlayer: player)
videoNode.size = CGSize(width: 200.0, height: 150.0)
videoNode.anchorPoint = CGPoint(x: 0.5, y: 0.0)
return videoNode
}
该代码应该将视频每帧的所有像素替换为alpha = 0.0像素颜色是否与背景的色调范围匹配。
但我没有得到透明像素，而是将这些像素变成黑色，如下图所示：
现在，尽管这不是想要的效果，但我并不感到惊讶，因为我知道这是 iOS 显示带有 alpha 通道的视频的方式。
但这是真正的问题 - 当在AVPlayer，有一个选项可以添加AVPlayerLayer到视图并设置pixelBufferAttributes为了让播放器层知道我们使用透明像素缓冲区，如下所示：
let playerLayer = AVPlayerLayer(player: player)
playerLayer.bounds = view.bounds
playerLayer.position = view.center
playerLayer.pixelBufferAttributes = [(kCVPixelBufferPixelFormatTypeKey as String): kCVPixelFormatType_32BGRA]
view.layer.addSublayer(playerLayer)
此代码为我们提供了一个具有透明背景的视频（GOOD!）但是固定的大小和位置（不好...），正如您在此屏幕截图中看到的：
我想达到同样的效果，但是SKVideoNode，而不是在AVPlayerLayer。但是我找不到任何方法来设置pixelBufferAttributes to SKVideoNode，并且设置播放器层并没有达到想要的效果ARKit因为它固定在位置上。
有没有办法解决我的问题，或者是否有其他技术可以达到相同的预期效果？
解决方案非常简单！
需要做的就是将视频添加为视频的子视频SKEffectNode并将过滤器应用到SKEffectNode而不是视频本身（AVVideoComposition没有必要）。
这是我使用的代码：
func view(_ view: ARSKView, nodeFor anchor: ARAnchor) -> SKNode? {
// Create and configure a node for the anchor added to the view's session.
let bialikVideoNode = videoNodeWith(resourceName: "Tsina_05", ofType: "mp4")
bialikVideoNode.size = CGSize(width: kDizengofVideoWidth, height: kDizengofVideoHeight)
bialikVideoNode.anchorPoint = CGPoint(x: 0.5, y: 0.0)
// Make the video background transparent using an SKEffectNode, since chroma-key doesn't work on video
let effectNode = SKEffectNode()
effectNode.addChild(bialikVideoNode)
effectNode.filter = colorCubeFilterForChromaKey(hueAngle: 120)
return effectNode
}
And here is the result as needed:
