如何让CIKernel仅处理图像特定区域以提升实时渲染性能？

我有一个简单的CIKernel，用于给像素染上红色：

extern "C" float4 BasicFilter (coreimage::sampler input, coreimage::destination dest) {
    float4 inputPixel = input.sample(input.transform(dest.coord()));
    
    float4 color = float4(1.0, 0.0, 0.0, 0.5);
    
    float r = (inputPixel.r * (1 - color.a)) + (color.r * color.a);
    float g = (inputPixel.g * (1 - color.a)) + (color.g * color.a);
    float b = (inputPixel.b * (1 - color.a)) + (color.b * color.a);
    float a = 1.0;
    
    return float4(r,g,b,a);
}

默认情况下，这个内核会处理每一个像素，返回带红色色调的图像。我需要它能实时逐帧运行，所以希望限制它只处理图像的特定区域，该怎么实现？

示例场景 #

• 输入图像：8192 x 8192
• 需要染成红色的区域：CGRect(x: 20, y: 20, width: 10, height: 10)

我试过在内核里写if-then语句，只对CGRect内的像素染色，但其他像素还是会经过内核处理。也就是说，不管CGRect多小，上述内核都会处理8192x8192图像的全部67108864个像素，而不是目标区域的100个像素。

注意：我不需要裁剪后的图像，仍希望输出为8192x8192像素的图像，仅在x:20,y:20位置有一个10x10的红色色调方块。

我曾以为ROI回调函数是解决方案，但实际效果仍是整个图像被染成红色，而非仅指定区域。我用的ROI回调如下：

let roiCallback: CIKernelROICallback = { index, rect -> CGRect in
                return CGRect(x: 20, y: 20, width: 10, height: 10)
}

我还尝试过以下步骤：

1. 裁剪输入图像至所需区域并处理；
2. 将步骤1的输出合成到原始输入图像上。
   但这并没有提升FPS，因为步骤2中CISourceOverCompositing仍需处理全部67108864个像素，没有性能提升。

我正在MTKView中渲染最终输出，有没有更高效的解决方案？

编辑01 #

我尝试了Frank Rupprecht的建议，输出结果显示整个图像还是被染红了。

我的渲染流程如下：

1. 将输出渲染至CVPixelBuffer；
2. 将CVPixelBuffer转换为CIImage，并保存该CIImage用于下一帧的内核处理；
3. 缩放并平移步骤2中的CIImage，以在MTKView drawable中显示。

步骤2进行中间渲染的原因是保留原始分辨率的图像，避免渲染至drawable时的缩放和平移操作改变图像。

1. 修复ROI回调逻辑（核心优化） #

你之前的ROI回调逻辑错误，ROI回调的作用是告诉Core Image：输出图像的某块区域，需要依赖输入图像的哪块区域，而非直接限制内核处理的输出区域。

正确的ROI回调应该根据当前要渲染的输出区域（参数里的rect），判断它是否和目标染色区域重叠，只返回重叠部分对应的输入ROI，无重叠则返回空：

let targetRect = CGRect(x: 20, y: 20, width: 10, height: 10)
let roiCallback: CIKernelROICallback = { index, outputRect in
    // 仅处理与目标区域重叠的输出部分
    let overlap = outputRect.intersection(targetRect)
    if overlap.isEmpty {
        // 无重叠，无需读取输入像素
        return .null
    }
    // 重叠区域需要输入图像的对应区域
    return overlap
}

同时修改CIKernel逻辑，仅在目标区域内应用红色色调，其他区域直接返回原像素：

extern "C" float4 BasicFilter (coreimage::sampler input, coreimage::destination dest, rect targetRect) {
    float2 coord = dest.coord();
    // 判断当前像素是否在目标区域内
    bool isInTarget = (coord.x >= targetRect.x && coord.x < targetRect.x + targetRect.width &&
                       coord.y >= targetRect.y && coord.y < targetRect.y + targetRect.height);
    
    float4 inputPixel = input.sample(input.transform(coord));
    
    if (!isInTarget) {
        // 直接返回原像素，跳过染色计算
        return inputPixel;
    }
    
    float4 color = float4(1.0, 0.0, 0.0, 0.5);
    
    float r = (inputPixel.r * (1 - color.a)) + (color.r * color.a);
    float g = (inputPixel.g * (1 - color.a)) + (color.g * color.a);
    float b = (inputPixel.b * (1 - color.a)) + (color.b * color.a);
    float a = 1.0;
    
    return float4(r,g,b,a);
}

这里把目标区域作为参数传入内核，避免硬编码，灵活性更高。

2. 结合Metal进行局部渲染优化 #

因为你在MTKView中渲染，可以直接利用Metal的渲染命令队列，仅对目标区域进行绘制：

• 创建覆盖目标区域的MTLRenderPassDescriptor，仅渲染该区域到CVPixelBuffer；
• 将小区域的渲染结果混合到原始图像的对应位置，而非全图合成，这样仅需处理100个像素的合成操作。

具体步骤：

1. 裁剪输入图像到目标区域，应用红色滤镜；
2. 创建MTLCommandBuffer，先渲染原始图像到CVPixelBuffer；
3. 在同一个CVPixelBuffer上，仅绘制目标区域的滤镜结果。

3. 优化中间渲染流程 #

如果下一帧处理仅需要原始图像+目标区域修改，可省去全图中间渲染：

• 保存原始输入图像的CIImage；
• 每次仅生成目标区域的滤镜图像；
• 在MTKView渲染时，先绘制原始图像，再叠加目标区域的滤镜图像，GPU只会绘制必要像素，无需全图合成。

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