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

时间:2017-09-14 18:16:01

标签: ios scenekit swift4 arkit

我有一个使用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视频透明度的最佳方式是什么? 我已经讨论了关于这个主题的一些堆栈溢出问题,并找到了使用Objective C在2013年创建的KittyBoom存储库的唯一解决方案。

我希望社区能够为这个问题找到更好的解决方案。 GPUImage库不是我可以工作的东西。

1 个答案:

答案 0 :(得分:7)

我想出了两种使这成为可能的方法。两者都使用表面着色器修饰符。有关着色器修改器的详细信息,请参见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 ]
    
  4. 那就是它!现在,屏蔽视频上的白色将在平面上透明。

    然而您必须特别注意同步这两个视频,因为AVPlayer可能会不同步。可悲的是,我没有时间在我的示例项目中解决这个问题(但是,当我有时间时,我会回到它)。查看this question以获得可能的解决方案。

    <强>优点:

    • 没有工件(如果同步)
    • 精确

    <强>缺点:

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

    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_smoothingc_thresholdSensitivity制服。在我的示例项目中,我最终在形状周围有一个小绿边,但也许我没有使用正确的值。

    4. <强>优点:

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

      <强>缺点:

      • 可能的文物(边界周围的绿色边框)