如何使用 AVFoundation 播放带有 alpha 通道的视频?
How do you play a video with alpha channel using AVFoundation?
我有一个使用 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 年某处创建的 KittyBoom 存储库,使用 Objective C.
我希望社区能够针对这个问题给出更好的解决方案。 GPUImage
图书馆不是我可以去工作的地方。
我想出了两种方法来实现这一点。两者都使用表面着色器修改器。有关着色器修改器的详细信息,请参阅 Apple Developer Documentation。
这是我创建的 example project。
1。屏蔽
您需要创建另一个表示透明蒙版的视频。在该视频中,黑色 = 完全不透明,白色 = 完全透明(或您想要表示透明度的任何其他方式,您只需要修改表面着色器)。
用这个视频创建一个 SKScene
就像你在你提供的代码中所做的那样并将它放入 material.transparent.contents
(与你放入 diffuse 的相同 material视频内容成)
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]
向 material 添加表面着色器修改器。它将 "convert" 遮罩视频中的黑色(好吧,实际上是红色,因为我们只需要一个颜色分量)进入 alpha。
let surfaceShader = "_surface.transparent.a = 1 - _surface.transparent.r;"
material.shaderModifiers = [ .surface: surfaceShader ]
就是这样!现在遮罩视频上的白色在平面上将是透明的。
但是您必须特别注意同步这两个视频,因为 AVPlayer
s 可能会不同步。遗憾的是,我没有时间在我的示例项目中解决这个问题(但是,我会在有时间的时候回来讨论它)。查看 寻找可能的解决方案。
优点:
- 无瑕疵(如果已同步)
- 精确
缺点:
- 需要两个视频而不是一个
- 需要同步
AVPlayer
s
2. 色度键控
您需要一个具有鲜艳色彩的视频作为背景,以代表应该透明的部分。通常使用绿色或洋红色。
像往常一样为此视频创建一个 SKScene
并将其放入 material.diffuse.contents
。
添加一个色度键表面着色器修改器,它将裁剪出您选择的颜色并使这些区域透明。这个我借了shader from GPUImage and I don't really know how it actually works. But it seems to be explained in 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
制服。在我的示例项目中,我最终在形状周围有一个小的绿色边缘,但也许我没有使用正确的值。
优点:
- 只需要一个视频
- 简单设置
缺点:
- 可能存在伪像(边框周围有绿色边缘)
我有一个使用 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 年某处创建的 KittyBoom 存储库,使用 Objective C.
我希望社区能够针对这个问题给出更好的解决方案。 GPUImage
图书馆不是我可以去工作的地方。
我想出了两种方法来实现这一点。两者都使用表面着色器修改器。有关着色器修改器的详细信息,请参阅 Apple Developer Documentation。
这是我创建的 example project。
1。屏蔽
您需要创建另一个表示透明蒙版的视频。在该视频中,黑色 = 完全不透明,白色 = 完全透明(或您想要表示透明度的任何其他方式,您只需要修改表面着色器)。
用这个视频创建一个
SKScene
就像你在你提供的代码中所做的那样并将它放入material.transparent.contents
(与你放入 diffuse 的相同 material视频内容成)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]
向 material 添加表面着色器修改器。它将 "convert" 遮罩视频中的黑色(好吧,实际上是红色,因为我们只需要一个颜色分量)进入 alpha。
let surfaceShader = "_surface.transparent.a = 1 - _surface.transparent.r;" material.shaderModifiers = [ .surface: surfaceShader ]
就是这样!现在遮罩视频上的白色在平面上将是透明的。
但是您必须特别注意同步这两个视频,因为 AVPlayer
s 可能会不同步。遗憾的是,我没有时间在我的示例项目中解决这个问题(但是,我会在有时间的时候回来讨论它)。查看
优点:
- 无瑕疵(如果已同步)
- 精确
缺点:
- 需要两个视频而不是一个
- 需要同步
AVPlayer
s
2. 色度键控
您需要一个具有鲜艳色彩的视频作为背景,以代表应该透明的部分。通常使用绿色或洋红色。
像往常一样为此视频创建一个
SKScene
并将其放入material.diffuse.contents
。添加一个色度键表面着色器修改器,它将裁剪出您选择的颜色并使这些区域透明。这个我借了shader from GPUImage and I don't really know how it actually works. But it seems to be explained in 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
制服。在我的示例项目中,我最终在形状周围有一个小的绿色边缘,但也许我没有使用正确的值。
优点:
- 只需要一个视频
- 简单设置
缺点:
- 可能存在伪像(边框周围有绿色边缘)