CAMetalLayer渲染CAShapeLayers生成空白图像的问题排查

背景 #

需要快速将数百条静态路径绘制到图像，目前采用CAShapeLayer+CoreGraphics的方案中，绘制线条仅需约0.001秒，但生成图像的耗时占比最高。尝试改用CAMetalLayer+Metal替代CoreGraphics生成图像时，虽然线条已成功绘制到图层（可通过添加到视图验证），但通过mtlTexture获取的图像始终为空白。

现有CoreGraphics可行方案 #

let layer = CALayer()

let f = CGRect(x: 0.0, y: 0.0, width: 1024.0, height: 1024.0)
let cgColor = UIColor.orange.cgColor

var lines: [CGPath] // 已填充数百条路径，部分包含数百个点

let start = CFAbsoluteTimeGetCurrent()
    
for path in lines {
    let pathLayer = CAShapeLayer()
    pathLayer.path = path
    pathLayer.strokeColor = cgColor
    pathLayer.fillColor = nil
    pathLayer.lineWidth = 1.0
    pathLayer.drawsAsynchronously = drawsAsynchronously
    layer.addSublayer(pathLayer)
}

UIGraphicsBeginImageContext(f.size)
let ctx = UIGraphicsGetCurrentContext()
layer.render(in: ctx!)
let newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext()

// 耗时: 0.05170309543609619
print("time: \(CFAbsoluteTimeGetCurrent() - start)")

尝试Metal方案遇到的空白问题 #

直接使用CAMetalLayer的代码 #

let layer = CAMetalLayer()
let f = CGRect(x: 0.0, y: 0.0, width: 1024.0, height: 1024.0)
layer.device = MTLCreateSystemDefaultDevice()!
layer.bounds = f
layer.frame = f
layer.pixelFormat = .bgra8Unorm
layer.framebufferOnly = false

for path in lines {
    let pathLayer = CAShapeLayer()
    pathLayer.path = path
    pathLayer.strokeColor = cgColor
    pathLayer.fillColor = nil
    pathLayer.lineWidth = 1.0
    pathLayer.drawsAsynchronously = drawsAsynchronously
    layer.addSublayer(pathLayer)
}

let outputImage = CIImage(mtlTexture: layer.nextDrawable()!.texture)

尝试MTLRenderPassDescriptor后的代码 #

public func render(caLayer: CAMetalLayer) -> UIImage? {
    
    let passDescriptor = MTLRenderPassDescriptor()
    let tex = caLayer.nextDrawable()?.texture
    
    passDescriptor.colorAttachments[0].texture = tex
    passDescriptor.colorAttachments[0].clearColor = MTLClearColorMake(0, 0.5, 1, 0.05);
    passDescriptor.colorAttachments[0].loadAction = .clear;
    passDescriptor.colorAttachments[0].storeAction = .store;

    guard let device = MTLCreateSystemDefaultDevice(),
          let commandQueue = device.makeCommandQueue(),
          let commandBuffer = commandQueue.makeCommandBuffer() else { return nil }
            
    let renderCommandEncoder = commandBuffer.makeRenderCommandEncoder(descriptor: passDescriptor)
    renderCommandEncoder?.endEncoding()
    commandBuffer.commit()
    
    commandBuffer.waitUntilCompleted()

    let ciImage: CIImage = CIImage(mtlTexture: tex!)!
    let img = UIImage(ciImage: ciImage)
    
    return img
    
}

解决方案 #

问题核心在于：直接使用CAMetalLayer作为CAShapeLayer容器时，Core Animation并未将图层内容渲染到Metal纹理中，nextDrawable()获取的只是空白纹理。正确做法是使用CARenderer将CALayer树主动渲染到Metal纹理：

import UIKit
import Metal
import CoreAnimation

func renderLayersToMetalImage(layer: CALayer, size: CGSize) -> UIImage? {
    guard let device = MTLCreateSystemDefaultDevice() else { return nil }
    
    // 创建Metal纹理作为渲染目标
    let textureDescriptor = MTLTextureDescriptor.texture2DDescriptor(
        pixelFormat: .bgra8Unorm,
        width: Int(size.width),
        height: Int(size.height),
        mipmapped: false
    )
    textureDescriptor.usage = [.renderTarget, .shaderRead]
    guard let targetTexture = device.makeTexture(descriptor: textureDescriptor) else { return nil }
    
    // 配置CARenderer
    let renderer = CARenderer(device: device)
    renderer.renderTarget = targetTexture
    renderer.bounds = CGRect(origin: .zero, size: size)
    
    // 触发渲染
    let startTime = CACurrentMediaTime()
    renderer.render(atTime: startTime)
    
    // 从Metal纹理生成UIImage
    let ciImage = CIImage(mtlTexture: targetTexture, options: [.colorSpace: CGColorSpaceCreateDeviceRGB()])!
    let context = CIContext(options: [.useSoftwareRenderer: false])
    guard let cgImage = context.createCGImage(ciImage, from: ciImage.extent) else { return nil }
    
    return UIImage(cgImage: cgImage)
}

// 使用示例
let rootLayer = CALayer()
let f = CGRect(x: 0.0, y: 0.0, width: 1024.0, height: 1024.0)
rootLayer.bounds = f
rootLayer.frame = f
let cgColor = UIColor.orange.cgColor

var lines: [CGPath] // 已填充路径数据

for path in lines {
    let pathLayer = CAShapeLayer()
    pathLayer.path = path
    pathLayer.strokeColor = cgColor
    pathLayer.fillColor = nil
    pathLayer.lineWidth = 1.0
    pathLayer.drawsAsynchronously = true
    rootLayer.addSublayer(pathLayer)
}

let start = CFAbsoluteTimeGetCurrent()
if let metalImage = renderLayersToMetalImage(layer: rootLayer, size: f.size) {
    print("Metal渲染耗时: \(CFAbsoluteTimeGetCurrent() - start)")
    // 使用生成的图像
}

关键说明 #

• CARenderer：专门用于将Core Animation图层树渲染到Metal设备，主动触发渲染流程，确保图层内容绘制到目标纹理。
• 纹理配置：必须设置纹理的usage包含.renderTarget和.shaderRead，确保可作为渲染目标并后续读取生成图像。
• CIContext：使用Metal加速的CIContext将CIImage转换为CGImage/UIImage，避免软件渲染的性能损耗。

内容的提问来源于stack exchange，提问作者Jeshua Lacock