Metal每日分享,四維向量偏移濾鏡效果

語言: CN / TW / HK

theme: cyanosis

「這是我參與2022首次更文挑戰的第15天,活動詳情查看:2022首次更文挑戰

本文正在參加「金石計劃 . 瓜分6萬現金大獎」

本案例的目的是理解如何用Metal實現圖像4維向量顏色效果濾鏡,通過對像素點顏色進行4維向量疊加運算得到新的像素點;


Demo

實操代碼

``` // 暖色系 let filter = C7ColorVector4(vector: Vector4.Color.warm)

// 方案1: ImageView.image = try? BoxxIO(element: originImage, filters: [filter, filter2, filter3]).output()

// 方案2: ImageView.image = originImage.filtering(filter, filter2, filter3)

// 方案3: ImageView.image = originImage ->> filter ->> filter2 ->> filter3 ```

效果對比圖

|origin: 原始|warm: 暖色系|cool_tone: 冷色系| |:-:|:-:|:-:| |WX20221205-103059.png|WX20221205-103110.png|WX20221205-103121.png|

實現原理

  • 過濾器

這款濾鏡採用並行計算編碼器設計.compute(kernel: "C7ColorVector4")

對外開放參數 - vector: 4維向量;

``` /// 四維向量顏色 public struct C7ColorVector4: C7FilterProtocol {

public var vector: Vector4

public var modifier: Modifier {
    return .compute(kernel: "C7ColorVector4")
}

public func setupSpecialFactors(for encoder: MTLCommandEncoder, index: Int) {
    guard let computeEncoder = encoder as? MTLComputeCommandEncoder else { return }
    var factor = vector.to_factor()
    computeEncoder.setBytes(&factor, length: Vector4.size, index: index + 1)
}

public init(vector: Vector4) {
    self.vector = vector
}

} ```

  • 着色器

對像素點顏色進行4維向量疊加運算inColor + half4(*vector)

``` kernel void C7ColorVector4(texture2d outputTexture [[texture(0)]], texture2d inputTexture [[texture(1)]], constant float4 *vector [[buffer(0)]], uint2 grid [[thread_position_in_grid]]) { const half4 inColor = inputTexture.read(grid);

const half4 outColor = inColor + half4(*vector);

outputTexture.write(outColor, grid);

} ```

4維向量

  • 部分4維向量

``` extension Vector4 { public struct Color { } }

extension Vector4.Color {

/// 原始
public static let origin = Vector4(values: [0.0, 0.0, 0.0, 0.0])

/// 暖色,將rgb通道的顏色添加相應的紅/綠色值
/// Warm color, add the color of the rgb channel to the corresponding red/green value.
public static let warm = Vector4(values: [0.3, 0.3, 0.0, 0.0])

/// 冷色,將rgb通道的顏色添加相應的藍色值
/// Cold color, add the color of the rgb channel to the corresponding blue value.
public static let cool_tone = Vector4(values: [0.0, 0.0, 0.3, 0.0])

} ```

Harbeth功能清單

  • 支持ios系統和macOS系統
  • 支持運算符函數式操作
  • 支持多種模式數據源 UIImage, CIImage, CGImage, CMSampleBuffer, CVPixelBuffer.
  • 支持快速設計濾鏡
  • 支持合併多種濾鏡效果
  • 支持輸出源的快速擴展
  • 支持相機採集特效
  • 支持視頻添加濾鏡特效
  • 支持矩陣卷積
  • 支持使用系統 MetalPerformanceShaders.
  • 支持兼容 CoreImage.
  • 濾鏡部分大致分為以下幾個模塊:
  • [x] Blend:圖像融合技術
  • [x] Blur:模糊效果
  • [x] Pixel:圖像的基本像素顏色處理
  • [x] Effect:效果處理
  • [x] Lookup:查找表過濾器
  • [x] Matrix: 矩陣卷積濾波器
  • [x] Shape:圖像形狀大小相關
  • [x] Visual: 視覺動態特效
  • [x] MPS: 系統 MetalPerformanceShaders.

最後

  • 慢慢再補充其他相關濾鏡,喜歡就給我點個星🌟吧。
  • 濾鏡Demo地址,目前包含100+種濾鏡,同時也支持CoreImage混合使用。
  • 再附上一個開發加速庫KJCategoriesDemo地址
  • 再附上一個網絡基礎庫RxNetworksDemo地址
  • 喜歡的老闆們可以點個星🌟,謝謝各位老闆!!!

✌️.