前言
Metal入門教程（一）圖片繪製
Metal入門教程（二）三維變換
Metal入門教程（三）攝像頭採集渲染
前面的教程介紹了Metal如何顯示圖片、自定義shader實現三維變換以及用MetalPerformanceShaders處理攝像頭資料，這次嘗試建立計算管道，實現Metal的compute shader。
Metal系列教程的程式碼地址；
OpenGL ES系列教程在這裡；
你的star和fork是我的源動力，你的意見能讓我走得更遠。
正文
Metal的計算管道只有一個步驟，就是kernel function（核心函式）。相對於渲染管道，其需要經過多個步驟處理：
kernel function（核心函式）可直接讀取資源，計算處理後輸出到對應位置。
核心思路
建立計算管道和渲染管道，載入一張圖片到Metal得到sourceTexture，用計算管道對sourceTexture進行處理，然後結果輸出到destTexture，最後用渲染管道把destTexture顯示到螢幕上。
效果展示
具體步驟
1、設定渲染管道和計算管道
// 設定渲染管道和計算管道
-(void)setupPipeline {
id<MTLLibrary> defaultLibrary = [self.mtkView.device newDefaultLibrary]; // .metal
id<MTLFunction> vertexFunction = [defaultLibrary newFunctionWithName:@"vertexShader"]; // 頂點shader，vertexShader是函式名
id<MTLFunction> fragmentFunction = [defaultLibrary newFunctionWithName:@"samplingShader"]; // 片元shader，samplingShader是函式名
id<MTLFunction> kernelFunction = [defaultLibrary newFunctionWithName:@"sobelKernel"];
MTLRenderPipelineDescriptor *pipelineStateDescriptor = [[MTLRenderPipelineDescriptor alloc] init];
pipelineStateDescriptor.vertexFunction = vertexFunction;
pipelineStateDescriptor.fragmentFunction = fragmentFunction;
pipelineStateDescriptor.colorAttachments[0].pixelFormat = self.mtkView.colorPixelFormat;
// 建立圖形渲染管道，耗效能操作不宜頻繁呼叫
self.renderPipelineState = [self.mtkView.device newRenderPipelineStateWithDescriptor:pipelineStateDescriptor
error:NULL];
// 建立計算管道，耗效能操作不宜頻繁呼叫
self.computePipelineState = [self.mtkView.device newComputePipelineStateWithFunction:kernelFunction
error:NULL];
// CommandQueue是渲染指令佇列，保證渲染指令有序地提交到GPU
self.commandQueue = [self.mtkView.device newCommandQueue];
}
複製程式碼渲染管道的建立與之前相同；-newComputePipelineStateWithFunction:可以建立計算管道，方法僅需要一個引數，就是核心函式。
2、設定頂點
- (void)setupVertex {
const LYVertex quadVertices[] =
{ // 頂點座標，分別是x、y、z、w； 紋理座標，x、y；
{ { 0.5, -0.5 / self.viewportSize.height * self.viewportSize.width, 0.0, 1.0 }, { 1.f, 1.f } },
{ { -0.5, -0.5 / self.viewportSize.height * self.viewportSize.width, 0.0, 1.0 }, { 0.f, 1.f } },
{ { -0.5, 0.5 / self.viewportSize.height * self.viewportSize.width, 0.0, 1.0 }, { 0.f, 0.f } },
{ { 0.5, -0.5 / self.viewportSize.height * self.viewportSize.width, 0.0, 1.0 }, { 1.f, 1.f } },
{ { -0.5, 0.5 / self.viewportSize.height * self.viewportSize.width, 0.0, 1.0 }, { 0.f, 0.f } },
{ { 0.5, 0.5 / self.viewportSize.height * self.viewportSize.width, 0.0, 1.0 }, { 1.f, 0.f } },
};
self.vertices = [self.mtkView.device newBufferWithBytes:quadVertices
length:sizeof(quadVertices)
options:MTLResourceStorageModeShared]; // 建立頂點快取
self.numVertices = sizeof(quadVertices) / sizeof(LYVertex); // 頂點個數
}
複製程式碼為使得影象顯示不拉伸，對頂點做一個簡單處理。
3、設定紋理
- (void)setupTexture {
UIImage *image = [UIImage imageNamed:@"abc"];
// 紋理描述符
MTLTextureDescriptor *textureDescriptor = [[MTLTextureDescriptor alloc] init];
textureDescriptor.pixelFormat = MTLPixelFormatRGBA8Unorm; // 圖片的格式要和資料一致
textureDescriptor.width = image.size.width;
textureDescriptor.height = image.size.height;
textureDescriptor.usage = MTLTextureUsageShaderRead; // 原圖片只需要讀取
self.sourceTexture = [self.mtkView.device newTextureWithDescriptor:textureDescriptor]; // 建立紋理
MTLRegion region = {{ 0, 0, 0 }, {image.size.width, image.size.height, 1}}; // 紋理上傳的範圍
Byte *imageBytes = [self loadImage:image];
if (imageBytes) { // UIImage的資料需要轉成二進位制才能上傳，且不用jpg、png的NSData
[self.sourceTexture replaceRegion:region
mipmapLevel:0
withBytes:imageBytes
bytesPerRow:4 * image.size.width];
free(imageBytes); // 需要釋放資源
imageBytes = NULL;
}
textureDescriptor.usage = MTLTextureUsageShaderWrite | MTLTextureUsageShaderRead; // 目標紋理在compute管道需要寫，在render管道需要讀
self.destTexture = [self.mtkView.device newTextureWithDescriptor:textureDescriptor];
}
複製程式碼共需要建立兩個紋理，先建立輸入的紋理sourceTexture，再用相同的描述符加上MTLTextureUsageShaderWrite屬性建立輸出的紋理destTexture。
4、設定計算區域
- (void)setupThreadGroup {
self.groupSize = MTLSizeMake(16, 16, 1); // 太大某些GPU不支援，太小效率低；
//保證每個畫素都有處理到
_groupCount.width = (self.sourceTexture.width + self.groupSize.width - 1) / self.groupSize.width;
_groupCount.height = (self.sourceTexture.height + self.groupSize.height - 1) / self.groupSize.height;
_groupCount.depth = 1; // 我們是2D紋理，深度設為1
}
複製程式碼這裡設定的是計算管道中每次處理的大小groupSize，size不能太大會導致某些GPU不支援，而太小則效率會低；groupCount是計算的次數，需要保證足夠大，以便每個畫素都能處理。
5、渲染處理
// 每次渲染都要單獨建立一個CommandBuffer
id<MTLCommandBuffer> commandBuffer = [self.commandQueue commandBuffer];
{
// 建立計算指令的編碼器
id<MTLComputeCommandEncoder> computeEncoder = [commandBuffer computeCommandEncoder];
// 設定計算管道，以呼叫shaders.metal中的核心計算函式
[computeEncoder setComputePipelineState:self.computePipelineState];
// 輸入紋理
[computeEncoder setTexture:self.sourceTexture
atIndex:LYFragmentTextureIndexTextureSource];
// 輸出紋理
[computeEncoder setTexture:self.destTexture
atIndex:LYFragmentTextureIndexTextureDest];
// 計算區域
[computeEncoder dispatchThreadgroups:self.groupCount
threadsPerThreadgroup:self.groupSize];
// 呼叫endEncoding釋放編碼器，下個encoder才能建立
[computeEncoder endEncoding];
}
複製程式碼MTLComputeCommandEncoder是計算指令的編碼器，用於編碼接下來的指令；首先設定計算管道computePipelineState，再設定相關的引數，最後用dispatchThreadgroups:self啟動計算。（記得最後要加endEncoding）
6、Shader邏輯
constant half3 kRec709Luma = half3(0.2126, 0.7152, 0.0722); // 把rgba轉成亮度值
kernel void
grayKernel(texture2d<half, access::read> sourceTexture [[texture(LYFragmentTextureIndexTextureSource)]],
texture2d<half, access::write> destTexture [[texture(LYFragmentTextureIndexTextureDest)]],
uint2 grid [[thread_position_in_grid]])
{
// 邊界保護
if(grid.x <= destTexture.get_width() && grid.y <= destTexture.get_height())
{
half4 color = sourceTexture.read(grid); // 初始顏色
half gray = dot(color.rgb, kRec709Luma); // 轉換成亮度
destTexture.write(half4(gray, gray, gray, 1.0), grid); // 寫回對應紋理
}
}
複製程式碼灰度計算的shader如上，kRec709Luma是rgb轉亮度值用到的常量；
grayKernel的引數有三個，分別是輸入的紋理、輸出的紋理、索引下標。
grid有兩個值，分別是x和y，表明當前計算shader處理的畫素點位置。每次核心函式執行，都會有一個唯一的grid值。
通過sourceTexture.read(grid)可以讀取輸入紋理的顏色，處理後再通過destTexture.write的方法寫入輸出紋理。
總結
核心函式的執行次數需要事先指定，這個次數由格子大小決定。
threadgroup 指的是設定的處理單元，demo裡是16*16；這個值要根據具體的裝置進行區別，但16*16是足夠小的，能讓所有的GPU執行；
threadgroupCount 是需要處理的次數，一般來說threadgroupCount*threadgroup=需要處理的大小。
MTLComputePipelineState 代表一個計算處理管道，只需要一個核心函式就可以建立，相比之下，渲染管道需要頂點和片元兩個處理函式。
Demo的地址在這裡。
