SwiftUI中CIFilter.shadedMaterial()图像变单色问题排查

问题描述 #

尝试在SwiftUI中使用CIFilter.shadedMaterial()为图像文字添加阴影，流程为：

1. 获取带文字的输入图像
2. 通过CIFilter.heightFieldFromMask()生成边缘图
3. 应用阴影纹理图像

但遇到两个异常：

• 输出结果偶尔呈现单一纯色，未正确应用阴影纹理
• 整张图像偶尔变为统一色调，丢失原始细节

原始代码 #

import SwiftUI
import CoreImage
import CoreImage.CIFilterBuiltins

struct ShadedMaterialDemo: View {
    let context = CIContext(options: nil) // ✅ Reuse CIContext
    @State var outputImage: UIImage?
    
    var body: some View {
        VStack {
            if let outputImage = outputImage {
                Image(uiImage: outputImage)
                    .resizable()
                    .scaledToFit()
            } else {
                Text("Processing Image...")
            }
        }
        .onAppear {
            Task {
                outputImage = await applyEdgeWorkFilter(intensity: 10)
            }
        }
    }
    
    func applyEdgeWorkFilter2(radius: Float) async -> CIImage? {
        guard let inputImage = UIImage(named: "imgBGText") else { return nil }
        guard let ciImage = CIImage(image: inputImage) else { return nil }
        
        let filter = CIFilter.heightFieldFromMask()
        filter.inputImage = ciImage
        filter.radius = radius
        
        return filter.outputImage
    }
    
    func applyEdgeWorkFilter(intensity: Float) async -> UIImage? {
        guard let edgeImage = await applyEdgeWorkFilter2(radius: 10) else { return nil }
        guard let shadeImage = UIImage(named: "imgShade"), let shadeCIImage = CIImage(image: shadeImage) else { return nil }
        
        let filter = CIFilter.shadedMaterial()
        filter.inputImage = edgeImage
        filter.shadingImage = shadeCIImage
        filter.scale = intensity
        
        guard let resultImage = filter.outputImage else { return nil }
        
        // ✅ Reduce memory usage by downscaling the output
        let finalExtent = resultImage.extent.intersection(CGRect(x: 0, y: 0, width: 1024, height: 1024)) // Example size
        
        if let cgImage = context.createCGImage(resultImage, from: finalExtent) {
            return UIImage(cgImage: cgImage)
        }
        
        return nil
    }
}

struct ShadedMaterialDemo_Previews: PreviewProvider {
    static var previews: some View {
        ShadedMaterialDemo()
    }
}

预期效果 #

• 阴影纹理仅应用于文字边缘，而非整张图像
• 输出保留原始图像的所有细节，不会变为单一颜色

问题原因 #

1. 高度场生成无效：heightFieldFromMask()依赖输入图像的灰度梯度，若原图像对比度不足，生成的高度场无明显边缘差异，导致shadedMaterial()无法计算出阴影，输出纯色
2. 参数与纹理不匹配：scale参数过大（如原代码的10）会过度拉伸阴影纹理；阴影图像尺寸与输入图像不匹配时，纹理会被异常缩放，覆盖原始细节
3. 图像范围处理错误：原代码中手动裁剪图像范围，可能丢失部分有效像素，导致色调异常

修复方案 #

1. 增强输入图像对比度，生成有效高度场 #

在生成高度场前，先提升输入图像的对比度，确保文字边缘的灰度差异足够明显：

func applyEdgeWorkFilter2(radius: Float) async -> CIImage? {
    guard let inputImage = UIImage(named: "imgBGText") else { return nil }
    guard let ciImage = CIImage(image: inputImage) else { return nil }
    
    // 增强对比度，强化文字边缘的灰度梯度
    let contrastFilter = CIFilter.colorControls()
    contrastFilter.inputImage = ciImage
    contrastFilter.contrast = 2.0
    
    let filter = CIFilter.heightFieldFromMask()
    filter.inputImage = contrastFilter.outputImage
    filter.radius = radius
    
    return filter.outputImage
}

2. 适配阴影纹理与参数 #

• 限制scale参数范围（建议1~5），避免过度拉伸纹理
• 将阴影纹理缩放至与输入图像尺寸一致，保证纹理正常平铺：

func applyEdgeWorkFilter(intensity: Float) async -> UIImage? {
    guard let originalImage = UIImage(named: "imgBGText"), let originalCI = CIImage(image: originalImage) else { return nil }
    guard let edgeImage = await applyEdgeWorkFilter2(radius: 10) else { return nil }
    guard let shadeImage = UIImage(named: "imgShade"), let shadeCIImage = CIImage(image: shadeImage) else { return nil }
    
    // 缩放阴影纹理，匹配输入图像尺寸
    let scaleX = edgeImage.extent.width / shadeCIImage.extent.width
    let scaleY = edgeImage.extent.height / shadeCIImage.extent.height
    let tiledShade = shadeCIImage.transformed(by: CGAffineTransform(scaleX: scaleX, y: scaleY))
    
    let filter = CIFilter.shadedMaterial()
    filter.inputImage = edgeImage
    filter.shadingImage = tiledShade
    filter.scale = min(intensity, 5.0) // 限制scale最大值，避免过度拉伸
    
    guard let shadedResult = filter.outputImage else { return nil }
    
    // 将阴影结果与原始图像混合，保留原始细节
    let blendFilter = CIFilter.sourceOverCompositing()
    blendFilter.inputImage = shadedResult
    blendFilter.backgroundImage = originalCI
    
    guard let finalImage = blendFilter.outputImage else { return nil }
    
    // 使用原始图像范围，避免裁剪丢失细节
    if let cgImage = context.createCGImage(finalImage, from: finalImage.extent) {
        return UIImage(cgImage: cgImage)
    }
    
    return nil
}

3. 优化CIContext配置 #

复用CIContext时启用GPU加速，提升处理性能：

let context = CIContext(options: [
    .useSoftwareRenderer: false,
    .allowLowPower: true
])

验证效果 #

修复后：

• 阴影纹理仅在文字边缘生成，不会覆盖整张图像
• 原始图像的文字与背景细节完整保留
• 不会出现单一纯色或统一色调的异常

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