Core Image框架詳細解析（十九） —— 使用Metal Shading Language創建你自己的Core Image濾波器進行像素級圖像處理（二） 版本記錄 前言 源碼 後記

版本記錄

版本號	時間
V1.0	2021.10.08 星期五

前言

Core Image是IOS5中新加入的一個框架，裏面提供了強大高效的圖像處理功能，用來對基於像素的圖像進行操作與分析。還提供了很多強大的濾鏡，可以實現你想要的效果，下面我們就一起解析一下這個框架。感興趣的可以參考上面幾篇。
1. Core Image框架詳細解析（一） —— 基本概覽
2. Core Image框架詳細解析（二） —— Core Image濾波器參考
3. Core Image框架詳細解析（三） —— 關於Core Image
4. Core Image框架詳細解析（四） —— Processing Images處理圖像（一）
5. Core Image框架詳細解析（五） —— Processing Images處理圖像（二）
6. Core Image框架詳細解析（六） —— 圖像中的面部識別Detecting Faces in an Image（一）
7. Core Image框架詳細解析（七） —— 自動增強圖像 Auto Enhancing Images
8. Core Image框架詳細解析（八） —— 查詢系統中的過濾器 Querying the System for Filters
9. Core Image框架詳細解析（九） —— 子類化CIFilter：自定義效果的配方 Subclassing CIFilter: Recipes for Custom Effects（一）
10. Core Image框架詳細解析（十） —— 子類化CIFilter：自定義效果的配方 Subclassing CIFilter: Recipes for Custom Effects（二）
11. Core Image框架詳細解析（十一） —— 獲得最佳性能 Getting the Best Performance
12. Core Image框架詳細解析（十二） —— 使用反饋處理圖像 Using Feedback to Process Images
13. Core Image框架詳細解析（十三） —— 在寫一個自定義濾波器之前你需要知道什麼？
14. Core Image框架詳細解析（十四） —— 創建自定義濾波器 Creating Custom Filters（一）
15. Core Image框架詳細解析（十五） —— 創建自定義濾波器 Creating Custom Filters（二）
16. Core Image框架詳細解析（十六） —— 包裝和加載圖像單元 Packaging and Loading Image Units
17. Core Image框架詳細解析（十七） —— 一個簡單說明和示例（一）
18. Core Image框架詳細解析（十八） —— 使用Metal Shading Language創建你自己的Core Image濾波器進行像素級圖像處理（一）

源碼

1. Swift

首先看下工程組織結構

下面就是源碼了

1. ImageProcessor.swift

import UIKit
import CoreImage

enum ProcessEffect {
  case builtIn
  case colorKernel
  case warpKernel
  case blendKernel
}

class ImageProcessor {
  static let shared = ImageProcessor()
  let context = CIContext()
  @Published var output = UIImage()

  func process(painting: Painting, effect: ProcessEffect) {
    guard
      let paintImage = UIImage(named: painting.image),
      let input = CIImage(image: paintImage)
    else {
      print("Invalid input image")
      return
    }
    switch effect {
    case .builtIn:
      applyBuiltInEffect(input: input)
    case .colorKernel:
      applyColorKernel(input: input)
    case .warpKernel:
      applyWarpKernel(input: input)
    case .blendKernel:
      applyBlendKernel(input: input)
    }
  }

  private func applyBuiltInEffect(input: CIImage) {
    let noir = CIFilter(
      name: "CIPhotoEffectNoir",
      parameters: ["inputImage": input]
    )?.outputImage
    let sunGenerate = CIFilter(
      name: "CISunbeamsGenerator",
      parameters: [
        "inputStriationStrength": 1,
        "inputSunRadius": 300,
        "inputCenter": CIVector(
          x: input.extent.width - input.extent.width / 5,
          y: input.extent.height - input.extent.height / 10)
      ])?
      .outputImage
    let compositeImage = input.applyingFilter(
      "CIBlendWithMask",
      parameters: [
        kCIInputBackgroundImageKey: noir as Any,
        kCIInputMaskImageKey: sunGenerate as Any
      ])
    if let outputImage = renderAsUIImage(compositeImage) {
      output = outputImage
    }
  }

  private func applyColorKernel(input: CIImage) {
    let filter = ColorFilter() // PassthroughFilter()
    filter.inputImage = input
    if let outputImage = filter.outputImage,
      let renderImage = renderAsUIImage(outputImage) {
      output = renderImage
    }
  }

  private func applyWarpKernel(input: CIImage) {
    let filter = WarpFilter() // PassthroughFilter()
    filter.inputImage = input
    if let outputImage = filter.outputImage,
      let renderImage = renderAsUIImage(outputImage) {
      output = renderImage
    }
  }

  private func applyBlendKernel(input: CIImage) {
    guard  let backgroundImage = UIImage(named: "multi_color") else {
      return
    }
    let filter = BlendFilter(backgroundImage: backgroundImage)
    filter.inputImage = input
    if let outputImage = filter.outputImage,
      let renderImage = renderAsUIImage(outputImage) {
      output = renderImage
    }
  }

  private func renderAsUIImage(_ image: CIImage) -> UIImage? {
    if let cgImage = context.createCGImage(image, from: image.extent) {
      return UIImage(cgImage: cgImage)
    }
    return nil
  }
}

2. FilterListView.swift

import SwiftUI
import CoreImage

struct FilterListView: View {
  let filterList = CIFilter.filterNames(inCategory: nil)

  var body: some View {
    NavigationView {
      List(filterList, id: \.self) { filter in
        NavigationLink(destination: FilterDetailView(filter: filter)) {
          Text(filter)
        }
      }
      .navigationTitle("Filter List")
    }
  }
}

struct FilterList_Previews: PreviewProvider {
  static var previews: some View {
    FilterListView()
  }
}

3. FilterDetailView.swift

import SwiftUI
import CoreImage

struct FilterDetailView: View {
  var filter: String

  var body: some View {
    if let ciFilter = CIFilter(name: filter) {
      ScrollView {
        Text(ciFilter.attributes.description)
      }
    } else {
      Text("Unknown filter!")
    }
  }
}

4. PaintingWall.swift

import SwiftUI

struct PaintingWall: View {
  @State private var selectedPainting: Painting?
  let paintings: [Painting]
  let columns = [GridItem()]

  var body: some View {
    ScrollView {
      LazyVGrid(columns: columns, alignment: .center, spacing: 10) {
        ForEach(0..<paintings.count) { index in
          ZStack {
            Button(
              action: {
                selectedPainting = paintings[index]
                var effect = ProcessEffect.builtIn
                if let painting = selectedPainting {
                  switch index {
                  case 0:
                    effect = .builtIn
                  case 1:
                    effect = .colorKernel
                  case 2:
                    effect = .warpKernel
                  case 3:
                    effect = .blendKernel
                  default:
                    effect = .builtIn
                  }
                  ImageProcessor.shared.process(painting: painting, effect: effect)
                }
              },
              label: {
                Image(paintings[index].image)
                  .resizable()
                  .scaledToFit()
                  .overlay(OverlayContent(title: paintings[index].name), alignment: .bottom)
              })
          }
        }
      }
    }
    .sheet(item: $selectedPainting) { item in
      DetailView(painting: item)
    }
  }
}

struct OverlayContent: View {
  let title: String

  var body: some View {
    Text(title)
      .font(.title)
      .fontWeight(.regular)
      .frame(maxWidth: .infinity)
      .foregroundColor(Color.black)
      .background(Color.white)
      .opacity(0.7)
  }
}

struct DetailView: View {
  var imageProcessor = ImageProcessor.shared
  let painting: Painting

  var body: some View {
    ScrollView {
      VStack {
        Image(painting.image)
          .resizable()
          .aspectRatio(contentMode: .fit)
          .overlay(OverlayContent(title: "Input"), alignment: .bottom)
        Image(uiImage: imageProcessor.output)
          .resizable()
          .aspectRatio(contentMode: .fit)
          .overlay(OverlayContent(title: "Output"), alignment: .bottom)
      }
    }
    .padding()
  }
}

struct PaintingWall_Previews: PreviewProvider {
  static var previews: some View {
    let paintings = Gallery().paintings
    PaintingWall(paintings: paintings)
  }
}

5. ContentView.swift

import SwiftUI

struct ContentView: View {
  @State var showFilterListUI = false
  let paintings = Gallery().paintings

  var body: some View {
    VStack {
      HStack {
        Spacer()
        Button(
          action: {
            self.showFilterListUI.toggle()
          }, label: {
            Text("Filter List")
          })
          .padding(.trailing)
          .sheet(isPresented: $showFilterListUI) {
            FilterListView()
          }
      }
      PaintingWall(paintings: paintings)
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

6. BlendFilter.swift

import CoreImage
import UIKit

class BlendFilter: CIFilter {
  let background: CIImage?

  init(backgroundImage: UIImage) {
    background = CIImage(image: backgroundImage)
    super.init()
  }

  required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  var inputImage: CIImage?

  override var outputImage: CIImage? {
    guard let inputImage = inputImage else { return .none }
    guard let background = background else { return .none }

    return CIBlendKernel.multiply.apply(
      foreground: inputImage,
      background: background)
  }
}

7. WarpFilter.swift

import Foundation
import CoreImage

// 1
class WarpFilter: CIFilter {
  var inputImage: CIImage?
  // 2
  static var kernel: CIWarpKernel = { () -> CIWarpKernel in
    guard let url = Bundle.main.url(
      forResource: "WarpFilterKernel.ci",
      withExtension: "metallib"),
    let data = try? Data(contentsOf: url) else {
      fatalError("Unable to load metallib")
    }

    guard let kernel = try? CIWarpKernel(
      functionName: "warpFilter",
      fromMetalLibraryData: data) else {
      fatalError("Unable to create warp kernel")
    }

    return kernel
  }()

  // 3
  override var outputImage: CIImage? {
    guard let inputImage = inputImage else { return .none }

    return WarpFilter.kernel.apply(
      extent: inputImage.extent,
      roiCallback: { _, rect in
        return rect
      },
      image: inputImage,
      arguments: [])
  }
}

8. WarpFilterKernel.ci.metal

#include <metal_stdlib>
using namespace metal;

#include <CoreImage/CoreImage.h>

extern "C" {
  namespace coreimage {
    float2 warpFilter(destination dest) {
      float y = dest.coord().y + tan(dest.coord().y / 10) * 20;
      float x = dest.coord().x + tan(dest.coord().x/ 10) * 20;
      return float2(x,y);
    }
  }
}

9. ColorFilter.swift

import Foundation
// 1
import CoreImage

class ColorFilter: CIFilter {
  // 2
  var inputImage: CIImage?

  // 3
  static var kernel: CIKernel = { () -> CIColorKernel in
    guard let url = Bundle.main.url(
      forResource: "ColorFilterKernel.ci",
      withExtension: "metallib"),
      let data = try? Data(contentsOf: url) else {
      fatalError("Unable to load metallib")
    }

    guard let kernel = try? CIColorKernel(
      functionName: "colorFilterKernel",
      fromMetalLibraryData: data) else {
      fatalError("Unable to create color kernel")
    }

    return kernel
  }()

  // 4
  override var outputImage: CIImage? {
    guard let inputImage = inputImage else { return nil }
    return ColorFilter.kernel.apply(
      extent: inputImage.extent,
      roiCallback: { _, rect in
        return rect
      },
      arguments: [inputImage])
  }
}

10. ColorFilterKernel.ci.metal

#include <metal_stdlib>
using namespace metal;

#include <CoreImage/CoreImage.h>

extern "C" {
  namespace coreimage {
    float4 colorFilterKernel(sample_t s) {
      float4 swappedColor;
      swappedColor.r = s.g;
      swappedColor.g = s.b;
      swappedColor.b = s.r;
      swappedColor.a = s.a;
      return swappedColor;
    }
  }
}

11. Gallery.swift

import Foundation

struct Gallery {
  let paintings: [Painting] = {
    guard let paintingsJson = Bundle.main.url(
      forResource: "paintings",
      withExtension: "json") else {
      fatalError("Unable to load paintings")
    }
    do {
      let jsonData = try Data(contentsOf: paintingsJson)
      return try JSONDecoder().decode([Painting].self, from: jsonData)
    } catch {
      fatalError("Unable to parse the paintings json")
    }
  }()
}

12. Painting.swift

import Foundation

struct Painting: Decodable, Identifiable {
  let name: String
  let image: String
  var id = UUID()

  enum CodingKeys: CodingKey {
    case name
    case image
  }
}

13. AppMain.swift

import SwiftUI

@main
struct AppMain: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

後記

本篇主要講述了使用Metal Shading Language創建你自己的Core Image濾波器進行像素級圖像處理，感興趣的給個贊或者關注~~~~