前言
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)，其访问方式可以是vec0、vec1，也可以是vec.x、vec.y，也可以是vec.r、vec.g。（.xyzw和.rgba，前者对应三维坐标，后者对应RGB颜色空间）
同时只取部分、乱序取均可，比如说我们常用到的float4 color=texture.bgra；
Metal关键函数用到的指针参数要用地址空间修饰符，如下面的buffer参数
代码语言：javascript复制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的向量和，再写回纹理中。
代码语言：javascript复制constant int sobelStep = 1;
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。
