前言
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。