Metal每日分享，靈魂出竅濾鏡效果

本案例的目的是理解如何用Metal實現靈魂出竅濾鏡，靈魂出竅效果實現原理是通過兩個紋理疊加，根據時間上層紋理做縮放並且不斷變化其不透明度來逐漸顯現。之前在緩動函數介紹中已經知道如何實現縮放效果，靈魂出竅效果就是在其基礎之上再多個紋理對象疊加就能夠實現；

效果圖

實操代碼

// 靈魂出竅濾鏡
let filter = C7SoulOut.init(soul: 0.7)

// 方案1:
let dest = BoxxIO.init(element: originImage, filter: filter)
ImageView.image = try? dest.output()

dest.filters.forEach {
    NSLog("%@", "\($0.parameterDescription)")
}

// 方案2:
ImageView.image = try? originImage.make(filter: filter)

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

實現原理

• 過濾器

這款濾鏡採用並行計算編碼器設計.compute(kernel: "C7SoulOut")，參數因子[soul, maxScale, maxAlpha]

對外開放參數：

• soul: 調整後的靈魂，從0.0到1.0，默認值爲0.5
• maxScale: 最大靈魂比例
• maxAlpha: 靈魂最大透明度

/// 靈魂出竅效果
public struct C7SoulOut: C7FilterProtocol {

    public static let soulRange: ParameterRange<Float, Self> = .init(min: 0.0, max: 1.0, value: 0.5)
    
    /// The adjusted soul, from 0.0 to 1.0, with a default of 0.5
    public var soul: Float = soulRange.value
    public var maxScale: Float = 1.5
    public var maxAlpha: Float = 0.5

    public var modifier: Modifier {
        return .compute(kernel: "C7SoulOut")
    }
    
    public var factors: [Float] {
        return [soul, maxScale, maxAlpha]
    }

    public init(soul: Float = soulRange.value, maxScale: Float = 1.5, maxAlpha: Float = 0.5) {
        self.soul = soul
        self.maxScale = maxScale
        self.maxAlpha = maxAlpha
    }
}

• 着色器

對座標點歸一化處理，然後採用最終色 = 基色 * (1 - a) + 混合色 * a，最後取對應點(soulX, soulY)像素與原像素疊加產生；

kernel void C7SoulOut(texture2d<half, access::write> outputTexture [[texture(0)]],
                      texture2d<half, access::sample> inputTexture [[texture(1)]],
                      constant float *soulPointer [[buffer(0)]],
                      constant float *maxScalePointer [[buffer(1)]],
                      constant float *maxAlphaPointer [[buffer(2)]],
                      uint2 grid [[thread_position_in_grid]]) {
    constexpr sampler quadSampler(mag_filter::linear, min_filter::linear);
    const half4 inColor = inputTexture.read(grid);
    const float x = float(grid.x) / outputTexture.get_width();
    const float y = float(grid.y) / outputTexture.get_height();

    const half soul = half(*soulPointer);
    const half maxScale = half(*maxScalePointer);
    const half maxAlpha = half(*maxAlphaPointer);

    const half alpha = maxAlpha * (1.0h - soul);
    const half scale = 1.0h + (maxScale - 1.0h) * soul;

    const half soulX = 0.5h + (x - 0.5h) / scale;
    const half soulY = 0.5h + (y - 0.5h) / scale;

    // 最終色 = 基色 * (1 - a) + 混合色 * a
    const half4 soulMask = inputTexture.sample(quadSampler, float2(soulX, soulY));
    const half4 outColor = inColor * (1.0h - alpha) + soulMask * alpha;

    outputTexture.write(outColor, grid);
}

動態效果

<p align="left">
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f2b0a70ab16426fb36054b32c9bc2a9~tplv-k3u1fbpfcp-watermark.image?" width="250" hspace="1px">
</p>

Harbeth功能清單

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

最後

• 關於靈魂出竅濾鏡介紹與設計到此爲止吧。
• 慢慢再補充其他相關濾鏡，喜歡就給我點個星🌟吧。
• 濾鏡Demo地址，目前包含100+種濾鏡，同時也支持CoreImage混合使用。
• 再附上一個開發加速庫KJCategoriesDemo地址
• 再附上一個網絡基礎庫RxNetworksDemo地址
• 喜歡的老闆們可以點個星🌟，謝謝各位老闆！！！

✌️.