Metal入门教程（六）边界检测

前言

Metal入门教程（一）图片绘制
Metal入门教程（二）三维变换
Metal入门教程（三）摄像头采集渲染
Metal入门教程（四）灰度计算
Metal入门教程（五）视频渲染

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

Metal系列教程的代码地址；
OpenGL ES系列教程在这里；

你的star和fork是我的源动力，你的意见能让我走得更远。

正文

Metal shading language

这次的学习重点是Metal的shader语言Metal shading language，主要有两个用途图形渲染和通用计算。
Metal着色语言支持部分C++特性，比如说重载（除了声明为图形渲染和通用计算入口的函数）；Metal着色语言不支持递归函数调用、new和delete操作符、虚函数、异常处理、函数指针等特性。同样，Metal有自己的标准库，不能用C++ 11的标准库。
Metal中常用的数据结构有向量、矩阵、原子数据类型、缓存、纹理、采样器、数组、用户自定义结构体等，C++的数据结构double, long, unsigned long, long long,unsigned long long, long double均不支持。
常用的基础数据类型：

• half 是16bit是浮点数，表达方式0.5h
• float 是32bit的浮点数，表达方式0.5f
• size_t 是64bit的无符号整数，通常用于sizeof的返回值
• ptrdiff_t 是64bit的有符号整数，通常用于指针的差值

常用的向量数据类型：

• 一维向量：half2、half3、half4、float2、float3、float4等。
• 二维向量：half4x4、half3x3、float4x4、float3x3等；

对于向量的访问，比如说vec=float4(1.0f, 1.0f, 1.0f, 1.0f)，其访问方式可以是vec[0]、vec[1]，也可以是vec.x、vec.y，也可以是vec.r、vec.g。（.xyzw和.rgba，前者对应三维坐标，后者对应RGB颜色空间）
同时只取部分、乱序取均可，比如说我们常用到的float4 color=texture.bgra；

Metal关键函数用到的指针参数要用地址空间修饰符，如下面的buffer参数

vertex RasterizerData // 返回给片元着色器的结构体
vertexShader(uint vertexID [[ vertex_id ]], // vertex_id是顶点shader每次处理的index，用于定位当前的顶点
             constant LYVertex *vertexArray [[ buffer(0) ]]) { // buffer表明是缓存数据，0是索引

Metal内存访问模式主要有两种：Device和Constant。

• Device模式，通用的访问模式，使用限制比较少；
• Constant模式，快速访问只读模式，参数对应buffer大小不能改变；

需要注意的是，有些GPU支持**前置深度测试（early depth testing），其允许在fragment shader之前进行深度测试。如果某个像素点没有被显示，那么可以放弃渲染，以减少运算。
Metal同样支持前置深度测试，实现方式是在fragment关键字前面加上[[early_fragment_tests]]，且前置深度测试要求不能对像素的深度值进行写操作。

深度测试讲解

demo思路

基于Sobel算子，对图像进行边界检测。自定义计算shader，接受图像的输入并输出检测后的结果，效果如下：

Sobel算子的实现需要访问像素周边的8个像素的值，在compute shader中，我们可以通过修改grid的xy坐标进行操作。在拿到位置的坐标后，通过sourceTexture.read读取像素值，分别算出横向和竖向的差别h和v，统一转亮度值。最后求h和v的向量和，再写回纹理中。

constant int sobelStep = 2;
constant half3 kRec709Luma = half3(0.2126, 0.7152, 0.0722); // 把rgba转成亮度值

kernel void
sobelKernel(texture2d<half, access::read>  sourceTexture  [[texture(LYFragmentTextureIndexTextureSource)]],
                texture2d<half, access::write> destTexture [[texture(LYFragmentTextureIndexTextureDest)]],
                uint2                          grid         [[thread_position_in_grid]])
{
    /*
     
     行数     9个像素          位置
     上     | * * * |      | 左 中 右 |
     中     | * * * |      | 左 中 右 |
     下     | * * * |      | 左 中 右 |
     
     */
    half4 topLeft = sourceTexture.read(uint2(grid.x - sobelStep, grid.y - sobelStep)); // 左上
    half4 top = sourceTexture.read(uint2(grid.x, grid.y - sobelStep)); // 上
    half4 topRight = sourceTexture.read(uint2(grid.x + sobelStep, grid.y - sobelStep)); // 右上
    half4 centerLeft = sourceTexture.read(uint2(grid.x - sobelStep, grid.y)); // 中左
    half4 centerRight = sourceTexture.read(uint2(grid.x + sobelStep, grid.y)); // 中右
    half4 bottomLeft = sourceTexture.read(uint2(grid.x - sobelStep, grid.y + sobelStep)); // 下左
    half4 bottom = sourceTexture.read(uint2(grid.x, grid.y + sobelStep)); // 下中
    half4 bottomRight = sourceTexture.read(uint2(grid.x + sobelStep, grid.y + sobelStep)); // 下右
    
    half4 h = -topLeft - 2.0 * top - topRight + bottomLeft + 2.0 * bottom + bottomRight; // 横方向差别
    half4 v = -bottom - 2.0 * centerLeft - topLeft + bottomRight + 2.0 * centerRight + topRight; // 竖方向差别
    
    half  grayH  = dot(h.rgb, kRec709Luma); // 转换成亮度
    half  grayV  = dot(v.rgb, kRec709Luma); // 转换成亮度
    
    // sqrt(h^2 + v^2)，相当于求点到(h, v)的距离，所以可以用length
    half color = length(half2(grayH, grayV));
    
    destTexture.write(half4(color, color, color, 1.0), grid); // 写回对应纹理
}

demo中以Camera为图像输入源，实时对每一帧的图像进行处理

总结

Metal shading language的重要性不言而喻，Metal入门教程（四）灰度计算重在如何搭建计算shader的通道，而sobel的实现相对灰度计算略为复杂，更有益于实践练习，后续还会补上直方图均衡的demo。