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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容

  • <转>我也忘了转自哪里,抱歉,感谢原作者 什么是Shader Shader(着色器)是一段能够针对3D对象进行操作...
    星易乾川阅读 5,586评论 1 16
  • 转载注明出处:点击打开链接 Shader(着色器)是一段能够针对3D对象进行操作、并被GPU所执行的程序。Shad...
    游戏开发小Y阅读 3,334评论 0 4
  • 本文首发于个人博客:Lam's Blog - 【OpenGL ES】入门及绘制一个三角形,文章由MarkDown语...
    格子林ll阅读 7,255评论 2 18
  • 我可以惯着你,也可以换了你!
    w小黄鸭w阅读 198评论 0 0
  • 出门在外有老乡 天涯海角不孤单 前世今生未可知 此时此刻会心笑 千家万户明月夜 灯火通明炊烟起 三言两语说不尽 难...
    照亮Br阅读 318评论 2 1