专栏首页落影的专栏Metal入门教程(四)灰度计算

Metal入门教程(四)灰度计算

前言

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的地址在这里

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Metal入门教程(六)边界检测

    前面的教程既介绍了Metal的图片绘制、三维变换、视频渲染,也引入MetalPerformanceShaders处理摄像头数据以及用计算管道实现灰度计算,这次尝...

    落影
  • Metal入门教程(六)边界检测

    Metal入门教程(一)图片绘制 Metal入门教程(二)三维变换 Metal入门教程(三)摄像头采集渲染 Metal入门教程(四)灰度计算 Metal入门教程...

    落影
  • Metal入门教程(五)视频渲染

    Metal入门教程(一)图片绘制 Metal入门教程(二)三维变换 Metal入门教程(三)摄像头采集渲染 Metal入门教程(四)灰度计算

    落影
  • Metal入门教程(七)天空盒全景

    Metal入门教程(一)图片绘制 Metal入门教程(二)三维变换 Metal入门教程(三)摄像头采集渲染 Metal入门教程(四)灰度计算 Metal入门教程...

    落影
  • Metal入门教程(八)Metal与OpenGL ES交互

    UIImage是我们常用的图像类,可以转成CVPixelBufferRef,表示存储在内存的图像数据; id<MTLTexture> 是Metal的纹理,表示...

    落影
  • 图片滤镜

    在Metal / OpenGL ES 框架,只有3种基本图元. 点,线,三角形. 所以在显示一个矩形图片时. 实际在显示本质是由2个三角形组成.

    CC老师
  • Metal_入门02_带你走流程

    Metal 系列教程 Metal_入门01_为什么要学习它 Metal_入门02_带你走流程

    酷走天涯
  • Metal视频处理——绿幕视频合成

    Metal入门教程总结 Metal图像处理——直方图均衡化 本文介绍如何用Metal把一个带绿幕的视频和一个普通视频进行合并。

    落影
  • Metal入门教程(三)摄像头采集渲染

    前面的教程介绍了如何绘制一张图片和如何把图片显示到3D物体上并进行三维变换,这次介绍如何用Metal渲染摄像头采集到的图像。

    落影

扫码关注云+社区

领取腾讯云代金券