Video overlay on a video using MTIBlendMode.screen

[GustasCodes]

Hello. I'm trying to blend two videos together using MTIBlendMode.screen.
I've read similar question here: #302 and here #MetalPetal/VideoIO#26.

My code generates blended video but always in wrong dimensions. Let's say I blend two videos with different resolutions (they both are vertical). And in the blended video I can see that the main video became horizontal while overlay video is still vertical but scaled. Why that happens? How I should provide frame sizes? I also tried to set originalAsset naturalSize width and height for MultilayerCompositingFilter but no luck.

I expect my final video to be blended with overlay in the same resolution as originalAsset. (both originalAsset and overlayAsset always will be vertical).

Code:

    let overlayAsset = AVURLAsset(url: Bundle.main.url(forResource: "blendoverlay", withExtension: "mp4")!)
    
    // 1 - Create AVMutableComposition object. This object will hold your AVMutableCompositionTrack instances.
    let mixComposition = AVMutableComposition()

    // 2 - Create two video tracks
    guard let firstTrack = mixComposition.addMutableTrack(withMediaType: .video,
                                                          preferredTrackID: Int32(kCMPersistentTrackID_Invalid)) else { return }
    do {
        try firstTrack.insertTimeRange(CMTimeRangeMake(start: CMTime.zero, duration: originalAsset.duration),
                                       of: originalAsset.tracks(withMediaType: .video)[0],
                                       at: CMTime.zero)
    } catch {
        print("Failed to load first track")
        return
    }

    guard let secondTrack = mixComposition.addMutableTrack(withMediaType: .video,
                                                           preferredTrackID: Int32(kCMPersistentTrackID_Invalid)) else { return }
    do {
        try secondTrack.insertTimeRange(CMTimeRangeMake(start: CMTime.zero, duration: overlayAsset.duration),
                                        of: overlayAsset.tracks(withMediaType: .video)[0],
                                        at: CMTime.zero)
    } catch {
        print("Failed to load second track")
        return
    }
    
    // 3 - Blend videos
    
    let renderContext = try! MTIContext(device: MTLCreateSystemDefaultDevice()!)

    videoComposition = MTIVideoComposition(asset: mixComposition, context: renderContext, queue: DispatchQueue.main, filter: { request in
      let sourceImages = request.sourceImages
      guard let originalImage = sourceImages[originalAsset.tracks(withMediaType: .video)[0].trackID] else {
        return MTIImage.black
      }
      guard var overlayImage = sourceImages[overlayAsset.tracks(withMediaType: .video)[0].trackID] else {
        return MTIImage.black
      }
      
      let filter = MultilayerCompositingFilter()
      filter.layers = [ MultilayerCompositingFilter.Layer(content: overlayImage).frame(CGRect(x: 0, y: 0, width: 1, height: 1), layoutUnit: .fractionOfBackgroundSize)
        .blendMode(.screen)]
      filter.inputBackgroundImage = originalImage
      return filter.outputImage!
    })
    
    let playerItem = AVPlayerItem(asset: mixComposition)
    playerItem.videoComposition = videoComposition!.makeAVVideoComposition()
    self.videoComposition = videoComposition
    player.replaceCurrentItem(with: playerItem)
    player.play()
    completion(player)`

Checklist

• I've read the README
• I've searched for existing GitHub issues