前言

Metal入門教程（一）圖片繪制
Metal入門教程（二）三維變換
Metal入門教程（三）攝像頭采集渲染

前面的教程介紹了Metal如何顯示圖片疯趟、自定義shader實現(xiàn)三維變換以及用MetalPerformanceShaders處理攝像頭數(shù)據(jù)，這次嘗試創(chuàng)建計算管道疤苹，實現(xiàn)Metal的compute shader。

Metal系列教程的代碼地址敛腌；
OpenGL ES系列教程在這里卧土；

你的star和fork是我的源動力，你的意見能讓我走得更遠(yuǎn)像樊。

正文

kernel function（內(nèi)核函數(shù)）可直接讀取資源颤霎，計算處理后輸出到對應(yīng)位置。

核心思路

創(chuàng)建計算管道和渲染管道涂滴，加載一張圖片到Metal得到sourceTexture友酱，用計算管道對sourceTexture進(jìn)行處理，然后結(jié)果輸出到destTexture柔纵，最后用渲染管道把destTexture顯示到屏幕上缔杉。

效果展示

具體步驟

1、設(shè)置渲染管道和計算管道

// 設(shè)置渲染管道和計算管道
-(void)setupPipeline {
    id<MTLLibrary> defaultLibrary = [self.mtkView.device newDefaultLibrary]; // .metal
    id<MTLFunction> vertexFunction = [defaultLibrary newFunctionWithName:@"vertexShader"]; // 頂點shader搁料，vertexShader是函數(shù)名
    id<MTLFunction> fragmentFunction = [defaultLibrary newFunctionWithName:@"samplingShader"]; // 片元shader或详，samplingShader是函數(shù)名
    id<MTLFunction> kernelFunction = [defaultLibrary newFunctionWithName:@"sobelKernel"];
    
    MTLRenderPipelineDescriptor *pipelineStateDescriptor = [[MTLRenderPipelineDescriptor alloc] init];
    pipelineStateDescriptor.vertexFunction = vertexFunction;
    pipelineStateDescriptor.fragmentFunction = fragmentFunction;
    pipelineStateDescriptor.colorAttachments[0].pixelFormat = self.mtkView.colorPixelFormat;
    // 創(chuàng)建圖形渲染管道系羞，耗性能操作不宜頻繁調(diào)用
    self.renderPipelineState = [self.mtkView.device newRenderPipelineStateWithDescriptor:pipelineStateDescriptor
                                                                                   error:NULL];
    // 創(chuàng)建計算管道，耗性能操作不宜頻繁調(diào)用
    self.computePipelineState = [self.mtkView.device newComputePipelineStateWithFunction:kernelFunction
                                                                                   error:NULL];
    // CommandQueue是渲染指令隊列霸琴，保證渲染指令有序地提交到GPU
    self.commandQueue = [self.mtkView.device newCommandQueue];
}

渲染管道的創(chuàng)建與之前相同椒振；
-newComputePipelineStateWithFunction:可以創(chuàng)建計算管道，方法僅需要一個參數(shù)沈贝，就是內(nèi)核函數(shù)杠人。

2勋乾、設(shè)置頂點

- (void)setupVertex {
    const LYVertex quadVertices[] =
    {   // 頂點坐標(biāo)宋下，分別是x、y辑莫、z学歧、w；    紋理坐標(biāo)各吨，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]; // 創(chuàng)建頂點緩存
    self.numVertices = sizeof(quadVertices) / sizeof(LYVertex); // 頂點個數(shù)
}

為使得圖像顯示不拉伸揭蜒，對頂點做一個簡單處理横浑。

3、設(shè)置紋理

- (void)setupTexture {
    UIImage *image = [UIImage imageNamed:@"abc"];
    // 紋理描述符
    MTLTextureDescriptor *textureDescriptor = [[MTLTextureDescriptor alloc] init];
    textureDescriptor.pixelFormat = MTLPixelFormatRGBA8Unorm; // 圖片的格式要和數(shù)據(jù)一致
    textureDescriptor.width = image.size.width;
    textureDescriptor.height = image.size.height;
    textureDescriptor.usage = MTLTextureUsageShaderRead; // 原圖片只需要讀取
    self.sourceTexture = [self.mtkView.device newTextureWithDescriptor:textureDescriptor]; // 創(chuàng)建紋理
    
    MTLRegion region = {{ 0, 0, 0 }, {image.size.width, image.size.height, 1}}; // 紋理上傳的范圍
    Byte *imageBytes = [self loadImage:image];
    if (imageBytes) { // UIImage的數(shù)據(jù)需要轉(zhuǎn)成二進(jìn)制才能上傳屉更，且不用jpg徙融、png的NSData
        [self.sourceTexture replaceRegion:region
                        mipmapLevel:0
                          withBytes:imageBytes
                        bytesPerRow:4 * image.size.width];
        free(imageBytes); // 需要釋放資源
        imageBytes = NULL;
    }
    
    textureDescriptor.usage = MTLTextureUsageShaderWrite | MTLTextureUsageShaderRead; // 目標(biāo)紋理在compute管道需要寫，在render管道需要讀
    self.destTexture = [self.mtkView.device newTextureWithDescriptor:textureDescriptor];
}

共需要創(chuàng)建兩個紋理瑰谜，先創(chuàng)建輸入的紋理sourceTexture欺冀，再用相同的描述符加上MTLTextureUsageShaderWrite屬性創(chuàng)建輸出的紋理destTexture。

4萨脑、設(shè)置計算區(qū)域

- (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紋理渤早，深度設(shè)為1
}

這里設(shè)置的是計算管道中每次處理的大小groupSize职车，size不能太大會導(dǎo)致某些GPU不支持，而太小則效率會低鹊杖；groupCount是計算的次數(shù)悴灵，需要保證足夠大，以便每個像素都能處理仅淑。

5称勋、渲染處理

    // 每次渲染都要單獨創(chuàng)建一個CommandBuffer
    id<MTLCommandBuffer> commandBuffer = [self.commandQueue commandBuffer];
    {
        // 創(chuàng)建計算指令的編碼器
        id<MTLComputeCommandEncoder> computeEncoder = [commandBuffer computeCommandEncoder];
        // 設(shè)置計算管道，以調(diào)用shaders.metal中的內(nèi)核計算函數(shù)
        [computeEncoder setComputePipelineState:self.computePipelineState];
        // 輸入紋理
        [computeEncoder setTexture:self.sourceTexture
                           atIndex:LYFragmentTextureIndexTextureSource];
        // 輸出紋理
        [computeEncoder setTexture:self.destTexture
                           atIndex:LYFragmentTextureIndexTextureDest];
        // 計算區(qū)域
        [computeEncoder dispatchThreadgroups:self.groupCount
                       threadsPerThreadgroup:self.groupSize];
        // 調(diào)用endEncoding釋放編碼器涯竟，下個encoder才能創(chuàng)建
        [computeEncoder endEncoding];
    }
    

MTLComputeCommandEncoder是計算指令的編碼器赡鲜，用于編碼接下來的指令空厌；首先設(shè)置計算管道computePipelineState，再設(shè)置相關(guān)的參數(shù)银酬，最后用dispatchThreadgroups:self啟動計算嘲更。（記得最后要加endEncoding）

6、Shader邏輯

constant half3 kRec709Luma = half3(0.2126, 0.7152, 0.0722); // 把rgba轉(zhuǎn)成亮度值

kernel void
grayKernel(texture2d<half, access::read>  sourceTexture  [[texture(LYFragmentTextureIndexTextureSource)]],
                texture2d<half, access::write> destTexture [[texture(LYFragmentTextureIndexTextureDest)]],
                uint2                          grid         [[thread_position_in_grid]])
{
    // 邊界保護(hù)
    if(grid.x <= destTexture.get_width() && grid.y <= destTexture.get_height())
    {
        half4 color  = sourceTexture.read(grid); // 初始顏色
        half  gray     = dot(color.rgb, kRec709Luma); // 轉(zhuǎn)換成亮度
        destTexture.write(half4(gray, gray, gray, 1.0), grid); // 寫回對應(yīng)紋理
    }
}

灰度計算的shader如上揩瞪，kRec709Luma是rgb轉(zhuǎn)亮度值用到的常量赋朦；
grayKernel的參數(shù)有三個，分別是輸入的紋理李破、輸出的紋理宠哄、索引下標(biāo)。
grid有兩個值嗤攻，分別是x和y毛嫉，表明當(dāng)前計算shader處理的像素點位置。每次內(nèi)核函數(shù)執(zhí)行妇菱，都會有一個唯一的grid值承粤。
通過sourceTexture.read(grid)可以讀取輸入紋理的顏色，處理后再通過destTexture.write的方法寫入輸出紋理闯团。

總結(jié)

內(nèi)核函數(shù)的執(zhí)行次數(shù)需要事先指定辛臊，這個次數(shù)由格子大小決定。
threadgroup 指的是設(shè)定的處理單元房交，demo里是16*16彻舰；這個值要根據(jù)具體的設(shè)備進(jìn)行區(qū)別，但16*16是足夠小的涌萤，能讓所有的GPU執(zhí)行淹遵；
threadgroupCount 是需要處理的次數(shù)，一般來說threadgroupCount*threadgroup=需要處理的大小负溪。
MTLComputePipelineState 代表一個計算處理管道透揣，只需要一個內(nèi)核函數(shù)就可以創(chuàng)建，相比之下川抡，渲染管道需要頂點和片元兩個處理函數(shù)辐真。

Demo的地址在這里。