如何使用Metal优化UIImage中贝塞尔路径区域的像素Alpha调整？

核心思路 #

通过Metal将原图和贝塞尔路径生成的遮罩纹理传入GPU，利用自定义片元着色器对像素进行处理：遮罩区域（贝塞尔路径内）将图像透明度设为1.0，其余区域保持0.5，全程GPU运算，避免CPU像素遍历的性能问题。

实现步骤 #

1. 准备Metal环境 #

先初始化Metal核心对象，创建渲染管线状态：

import Metal
import MetalKit

// 全局Metal核心对象
let device = MTLCreateSystemDefaultDevice()!
let commandQueue = device.makeCommandQueue()!
var pipelineState: MTLRenderPipelineState!

// 初始化渲染管线
func setupMetalPipeline() {
    let defaultLibrary = device.makeDefaultLibrary()!
    let fragmentShader = defaultLibrary.makeFunction(name: "highlightMaskedArea")!
    let vertexShader = defaultLibrary.makeFunction(name: "basicVertex")!
    
    let pipelineDescriptor = MTLRenderPipelineDescriptor()
    pipelineDescriptor.vertexFunction = vertexShader
    pipelineDescriptor.fragmentFunction = fragmentShader
    pipelineDescriptor.colorAttachments[0].pixelFormat = .rgba8Unorm
    
    do {
        pipelineState = try device.makeRenderPipelineState(descriptor: pipelineDescriptor)
    } catch {
        fatalError("渲染管线创建失败: \(error)")
    }
}

2. 将UIImage和贝塞尔路径转为Metal纹理 #

2.1 UIImage转MTLTexture

func texture(from image: UIImage) -> MTLTexture? {
    guard let cgImage = image.cgImage else { return nil }
    let textureLoader = MTKTextureLoader(device: device)
    let options = [
        MTKTextureLoader.Option.SRGB: false,
        MTKTextureLoader.Option.origin: MTKTextureLoader.Origin.bottomLeft
    ] as [MTKTextureLoader.Option : Any]
    
    return try? textureLoader.newTexture(cgImage: cgImage, options: options)
}

2.2 贝塞尔路径转遮罩纹理

生成单通道纹理，贝塞尔路径填充区域像素值为1.0，其余为0.0：

func maskTexture(from path: UIBezierPath, size: CGSize) -> MTLTexture? {
    let width = Int(size.width)
    let height = Int(size.height)
    let bytesPerPixel = 1
    let bytesPerRow = width * bytesPerPixel
    let totalBytes = bytesPerRow * height
    
    // 初始化全0像素缓冲区
    var pixelBuffer = [UInt8](repeating: 0, count: totalBytes)
    
    // 用Core Graphics绘制贝塞尔路径
    UIGraphicsBeginImageContextWithOptions(size, false, 1.0)
    path.fill()
    guard let maskImage = UIGraphicsGetImageFromCurrentImageContext()?.cgImage else {
        UIGraphicsEndImageContext()
        return nil
    }
    UIGraphicsEndImageContext()
    
    // 读取填充区域像素，设为255（对应Metal中的1.0）
    let context = CGContext(data: &pixelBuffer,
                            width: width,
                            height: height,
                            bitsPerComponent: 8,
                            bytesPerRow: bytesPerRow,
                            space: CGColorSpaceCreateDeviceGray(),
                            bitmapInfo: CGImageAlphaInfo.none.rawValue)!
    context.draw(maskImage, in: CGRect(origin: .zero, size: size))
    
    // 创建Metal纹理
    let textureDescriptor = MTLTextureDescriptor.texture2DDescriptor(pixelFormat: .r8Unorm,
                                                                    width: width,
                                                                    height: height,
                                                                    mipmapped: false)
    textureDescriptor.usage = .shaderRead
    guard let texture = device.makeTexture(descriptor: textureDescriptor) else { return nil }
    
    // 将像素数据拷贝到纹理
    let region = MTLRegionMake2D(0, 0, width, height)
    texture.replace(region: region, mipmapLevel: 0, withBytes: pixelBuffer, bytesPerRow: bytesPerRow)
    
    return texture
}

3. 编写Metal着色器 #

在项目中添加.metal文件，写入顶点和片元着色器：

#include <metal_stdlib>
using namespace metal;

// 顶点结构体：传递位置和纹理坐标
struct Vertex {
    float4 position [[position]];
    float2 texCoord;
};

// 顶点着色器：输出全屏四边形的顶点和纹理坐标
vertex Vertex basicVertex(uint vertexID [[vertex_id]]) {
    const float4 positions[4] = {
        float4(1.0, 1.0, 0.0, 1.0),
        float4(-1.0, 1.0, 0.0, 1.0),
        float4(1.0, -1.0, 0.0, 1.0),
        float4(-1.0, -1.0, 0.0, 1.0)
    };
    const float2 texCoords[4] = {
        float2(1.0, 1.0),
        float2(0.0, 1.0),
        float2(1.0, 0.0),
        float2(0.0, 0.0)
    };
    Vertex outVertex;
    outVertex.position = positions[vertexID];
    outVertex.texCoord = texCoords[vertexID];
    return outVertex;
}

// 片元着色器：根据遮罩调整图像透明度
fragment float4 highlightMaskedArea(Vertex inVertex [[stage_in]],
                                   texture2d<float> inputTexture [[texture(0)]],
                                   texture2d<float> maskTexture [[texture(1)]]) {
    constexpr sampler textureSampler(mag_filter::linear, min_filter::linear);
    
    float4 imageColor = inputTexture.sample(textureSampler, inVertex.texCoord);
    float maskValue = maskTexture.sample(textureSampler, inVertex.texCoord).r;
    
    // 遮罩区域透明度设为1.0，其余保持0.5
    imageColor.a = maskValue > 0.5 ? 1.0 : 0.5;
    
    return imageColor;
}

4. 执行Metal渲染，生成处理后的UIImage #

func processImage(_ image: UIImage, with maskPath: UIBezierPath) -> UIImage? {
    guard let inputTexture = texture(from: image),
          let maskTexture = maskTexture(from: maskPath, size: image.size) else {
        return nil
    }
    
    let width = inputTexture.width
    let height = inputTexture.height
    
    // 创建输出纹理
    let outputTextureDescriptor = MTLTextureDescriptor.texture2DDescriptor(pixelFormat: .rgba8Unorm,
                                                                          width: width,
                                                                          height: height,
                                                                          mipmapped: false)
    outputTextureDescriptor.usage = .renderTarget
    guard let outputTexture = device.makeTexture(descriptor: outputTextureDescriptor) else { return nil }
    
    // 创建命令缓冲区
    guard let commandBuffer = commandQueue.makeCommandBuffer() else { return nil }
    
    // 配置渲染传递描述符
    let renderPassDescriptor = MTLRenderPassDescriptor()
    renderPassDescriptor.colorAttachments[0].texture = outputTexture
    renderPassDescriptor.colorAttachments[0].loadAction = .clear
    renderPassDescriptor.colorAttachments[0].clearColor = MTLClearColorMake(0, 0, 0, 0)
    renderPassDescriptor.colorAttachments[0].storeAction = .store
    
    // 创建渲染命令编码器
    guard let renderEncoder = commandBuffer.makeRenderCommandEncoder(descriptor: renderPassDescriptor) else { return nil }
    renderEncoder.setRenderPipelineState(pipelineState)
    renderEncoder.setFragmentTexture(inputTexture, index: 0)
    renderEncoder.setFragmentTexture(maskTexture, index: 1)
    
    // 绘制全屏四边形
    renderEncoder.drawPrimitives(type: .triangleStrip, vertexStart: 0, vertexCount: 4)
    renderEncoder.endEncoding()
    
    // 提交命令并等待完成
    commandBuffer.commit()
    commandBuffer.waitUntilCompleted()
    
    // 将输出纹理转为UIImage
    let bytesPerRow = width * 4
    var pixelBuffer = [UInt8](repeating: 0, count: width * height * 4)
    let region = MTLRegionMake2D(0, 0, width, height)
    outputTexture.getBytes(&pixelBuffer, bytesPerRow: bytesPerRow, from: region, mipmapLevel: 0)
    
    guard let cgImage = CGImage(dataProvider: CGDataProvider(data: Data(pixelBuffer) as CFData)!,
                                width: width,
                                height: height,
                                bitsPerComponent: 8,
                                bitsPerPixel: 32,
                                bytesPerRow: bytesPerRow,
                                space: CGColorSpaceCreateDeviceRGB(),
                                bitmapInfo: CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedLast.rawValue)) else {
        return nil
    }
    
    return UIImage(cgImage: cgImage, scale: image.scale, orientation: image.imageOrientation)
}

5. 使用示例 #

// 初始化Metal管线
setupMetalPipeline()

// 原始半透明图像
let originalImage = UIImage(named: "yourImage")!.withAlphaComponent(0.5)
// 高亮区域的贝塞尔路径
let highlightPath = UIBezierPath(rect: CGRect(x: 100, y: 100, width: 200, height: 200))

// 处理图像并展示
if let processedImage = processImage(originalImage, with: highlightPath) {
    imageView.image = processedImage
}

性能说明 #

• 全程GPU运算，CPU占用极低，彻底避免像素遍历的性能瓶颈
• 760*1280分辨率的rgba8Unorm格式纹理仅占用约3.8MB，内存占用远低于CPU处理方案

内容的提问来源于stack exchange，提问作者Akram Ahmad