基于Metal Camera開發(fā)1：讀取渲染結(jié)果生成UIImage及GPUImage的LookupFilter濾鏡，本文檔通過Metal compute shader對攝像頭當前捕獲的畫面進行一左一右疊加兩個濾鏡，并根據(jù)手勢修改濾鏡的作用區(qū)域。
文檔結(jié)構(gòu)：
- 移植GPUImageLookupFilter Shader至Metal Computer Shader
- 手勢改變?yōu)V鏡作用區(qū)域
- 討論：Metal Compute Shader紋理坐標及MTKTextureLoader默認生成sRGB紋理
1. 移植GPUImageLookupFilter Shader至Metal Computer Shader
值得注意的是，對于OpenGL (ES)，紋理采樣使用歸一化的坐標值，而Metal Computer Shader使用原始坐標值。移植過程中我在這一問題上花了一些時間才定位到，也怪自己沒看Metal相關(guān)文檔。參考代碼如下。
float4 lookup(texture2d<float, access::read> lookupTexture, float4 textureColor) {
const float blueColor = textureColor.b * 63.0;
float2 quad1;
quad1.y = floor(floor(blueColor) / 8.0);
quad1.x = floor(blueColor) - (quad1.y * 8.0);
float2 quad2;
quad2.y = floor(ceil(blueColor) / 8.0);
quad2.x = ceil(blueColor) - (quad2.y * 8.0);
float2 texPos1;
texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
float2 texPos2;
texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
float2 originCoord = float2(lookupTexture.get_width(), lookupTexture.get_height());
texPos1 = clamp(texPos1, 0.0, 1.0);
texPos2 = clamp(texPos2, 0.0, 1.0);
uint2 mapTexPos1 = uint2(texPos1 * originCoord);
uint2 mapTexPos2 = uint2(texPos2 * originCoord);
const float4 newColor1 = lookupTexture.read(mapTexPos1);
const float4 newColor2 = lookupTexture.read(mapTexPos2);
const float4 outColor = mix(newColor1, newColor2, fract(blueColor));
return outColor;
}
2. 手勢改變?yōu)V鏡作用區(qū)域
讀取當前觸摸點在視圖的坐標并提供給Metal即可。讀取坐標的過程中，因不熟悉Swift語法，花了些時間還是編譯失敗。在此感謝@江夏沐幫忙實現(xiàn)了CGFloat到Float的轉(zhuǎn)換。
獲取屏幕觸摸點坐標的參考代碼如下。
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
let location = touches.first?.location(in: self)
filterPosition = Float(location?.x ?? 0) * Float(self.contentScaleFactor)
print(filterPosition ?? "-1.0")
}
Meta Compute Shader根據(jù)手勢改變?yōu)V鏡作用區(qū)域的參考代碼如下。
float4 inColor = inTexture.read(gid);
float4 textureColor = clamp(inColor, 0.0, 1.0);
float4 outColor = float4(0.0);
unsigned int pos = (unsigned int)(*filterPosition);
if (gid.x < pos) {
outColor = lookup(leftLookupTexture, textureColor);
} else {
outColor = lookup(rightLookupTexture, textureColor);
}
outTexture.write(outColor, gid);
3. 討論：Metal Compute Shader紋理坐標及MTKTextureLoader默認生成sRGB紋理
3.1. Metal Compute Shader紋理坐標
第1節(jié)移植GPUImageLookupFilter Shader至Metal Computer Shader已說明計算著色器默認情況下給的是整數(shù)坐標，說明它是原始像素坐標，區(qū)別于OpenGL ES。移植GLSL時應(yīng)該格外注意。
3.2. MTKTextureLoader默認生成sRGB紋理
使用MTKTextureLoader加載顏色查找表（Lookup Table）圖像時，默認情況下它生成sRGB顏色范圍的紋理，即使圖像元數(shù)據(jù)中并不聲明sRGB。如果這影響了濾鏡的表現(xiàn)，將MTKTextureLoaderOptionSRGB設(shè)置為false讓MTKTextureLoader按圖像原始色彩空間加載即可，參考代碼如下。
do {
try rightLookupTexture = textureLoader?.newTexture(withContentsOf: Bundle.main.url(forResource: "lookup.png", withExtension: nil)!, options: [
MTKTextureLoaderOptionSRGB : false as NSObject])
} catch {
print("load right lookup png failed.")
}
