如何使用 AVFoundation 播放带有 alpha 通道的视频？

Question

我有一个使用 SceneKit 的 AR 应用程序，并使用 AVPlayer 将视频导入场景，从而将其添加为 SKVideo 节点的子节点。

视频应该是可见的，但视频的透明度没有实现。

代码如下：

let spriteKitScene = SKScene(size: CGSize(width: self.sceneView.frame.width, height: self.sceneView.frame.height))
spriteKitScene.scaleMode = .aspectFit

guard let fileURL = Bundle.main.url(forResource: "Triple_Tap_1", withExtension: "mp4") else {
    return
}

let videoPlayer = AVPlayer(url: fileURL)
videoPlayer.actionAtItemEnd = .none

let videoSpriteKitNode = SKVideoNode(avPlayer: videoPlayer)
videoSpriteKitNode.position = CGPoint(x: spriteKitScene.size.width / 2.0, y: spriteKitScene.size.height / 2.0)
videoSpriteKitNode.size = spriteKitScene.size
videoSpriteKitNode.yScale = -1.0
videoSpriteKitNode.play()
spriteKitScene.backgroundColor = .clear          
spriteKitScene.addChild(videoSpriteKitNode)

let background = SCNPlane(width: CGFloat(2), height: CGFloat(2))
background.firstMaterial?.diffuse.contents = spriteKitScene

let backgroundNode = SCNNode(geometry: background)
backgroundNode.position = position
backgroundNode.constraints = [SCNBillboardConstraint()]
backgroundNode.rotation.z = 0
self.sceneView.scene.rootNode.addChildNode(backgroundNode)

// Create a transform with a translation of 0.2 meters in front of the camera.
var translation = matrix_identity_float4x4
translation.columns.3.z = -0.2
let transform = simd_mul((self.session.currentFrame?.camera.transform)!, translation)

// Add a new anchor to the session.
let anchor = ARAnchor(transform: transform)
self.sceneView.session.add(anchor: anchor)

在这种情况下，实现Triple_Tap_1 视频透明度的最佳方式是什么？ 我已经解决了一些关于这个主题的堆栈溢出问题，并发现唯一的解决方案是在 2013 年使用 Objective C 创建的 KittyBoom 存储库。

我希望社区可以为这个问题找到更好的解决方案。 GPUImage library 不是我可以去工作的。

Answer 1

我想出了两种方法来实现这一点。两者都使用表面着色器修改器。有关着色器修改器的详细信息可以在Apple Developer Documentation 中找到。

这是我创建的example project。

---

1。掩蔽

1. 您需要创建另一个表示透明蒙版的视频。在该视频中，黑色 = 完全不透明，白色 = 完全透明（或任何其他您想要表示透明度的方式，您只需要修改表面着色器）。

2. 使用此视频创建一个SKScene，就像您在提供的代码中一样，并将其放入material.transparent.contents（与您放入漫射视频内容的材料相同）

   let spriteKitOpaqueScene = SKScene(...)
   let spriteKitMaskScene = SKScene(...)
   ... // creating SKVideoNodes and AVPlayers for each video etc
   
   let material = SCNMaterial()
   material.diffuse.contents = spriteKitOpaqueScene
   material.transparent.contents = spriteKitMaskScene
   
   let background = SCNPlane(...)
   background.materials = [material]
   

3. 为材质添加表面着色器修改器。它会将遮罩视频中的黑色（实际上是红色，因为我们只需要一个颜色分量）“转换”为 alpha。

   let surfaceShader = "_surface.transparent.a = 1 - _surface.transparent.r;"
   material.shaderModifiers = [ .surface: surfaceShader ]
   

就是这样！现在，掩蔽视频上的白色在平面上将是透明的。

但是您必须特别注意同步这两个视频，因为AVPlayers 可能会不同步。遗憾的是，我没有时间在我的示例项目中解决这个问题（但是，当我有时间时，我会回到它）。查看this question 寻找可能的解决方案。

优点：

• 无工件（如果已同步）
• 精确

缺点：

• 需要两个视频而不是一个
• 需要同步AVPlayers

---

2. 色度键控

1. 您需要一个以鲜艳颜色作为背景的视频，以表示应该透明的部分。通常使用绿色或洋红色。

2. 像往常一样为此视频创建一个SKScene，并将其放入material.diffuse.contents。

3. 添加色度键表面着色器修改器，该修改器将剪切您选择的颜色并使这些区域透明。我借给了这个shader from GPUImage，但我真的不知道它是如何工作的。但似乎在this answer 中有解释。

    let surfaceShader =
   """
   uniform vec3 c_colorToReplace = vec3(0, 1, 0);
   uniform float c_thresholdSensitivity = 0.05;
   uniform float c_smoothing = 0.0;
   
   #pragma transparent
   #pragma body
   
   vec3 textureColor = _surface.diffuse.rgb;
   
   float maskY = 0.2989 * c_colorToReplace.r + 0.5866 * c_colorToReplace.g + 0.1145 * c_colorToReplace.b;
   float maskCr = 0.7132 * (c_colorToReplace.r - maskY);
   float maskCb = 0.5647 * (c_colorToReplace.b - maskY);
   
   float Y = 0.2989 * textureColor.r + 0.5866 * textureColor.g + 0.1145 * textureColor.b;
   float Cr = 0.7132 * (textureColor.r - Y);
   float Cb = 0.5647 * (textureColor.b - Y);
   
   float blendValue = smoothstep(c_thresholdSensitivity, c_thresholdSensitivity + c_smoothing, distance(vec2(Cr, Cb), vec2(maskCr, maskCb)));
   
   float a = blendValue;
   _surface.transparent.a = a;
   """
   
   shaderModifiers = [ .surface: surfaceShader ]
   

   要设置制服，请使用setValue(:forKey:) 方法。

   let vector = SCNVector3(x: 0, y: 1, z: 0) // represents float RGB components
   setValue(vector, forKey: "c_colorToReplace")
   setValue(0.3 as Float, forKey: "c_smoothing")
   setValue(0.1 as Float, forKey: "c_thresholdSensitivity")
   

   as Float 部分很重要，否则 Swift 会将值转换为 Double 并且着色器将无法使用它。

   但要从中获得精确的掩蔽，您必须真正修改 c_smoothing 和 c_thresholdSensitivity 制服。在我的示例项目中，我最终在形状周围有一个小绿边，但也许我没有使用正确的值。

优点：

• 只需要一个视频
• 简单的设置

缺点：

• 可能的伪影（边界周围的绿色边缘）