objc.io#21#GPU加速下的图像处理分析.docVIP

Instagram，Snapchat，Photoshop。 所有这些应用都是用来做图像处理的。图像处理可以简单到把一张照片转换为灰度图，也可以复杂到是分析一个视频，并在人群中找到某个特定的人。尽管这些应用非常的不同，但这些例子遵从同样的流程，都是从创造到渲染。 在电脑或者手机上做图像处理有很多方式，但是目前为止最高效的方法是有效地使用图形处理单元，或者叫 GPU。你的手机包含两个不同的处理单元，CPU 和 GPU。CPU 是个多面手，并且不得不处理所有的事情，而 GPU 则可以集中来处理好一件事情，就是并行地做浮点运算。事实上，图像处理和渲染就是在将要渲染到窗口上的像素上做许许多多的浮点运算。 通过有效的利用 GPU，可以成百倍甚至上千倍地提高手机上的图像渲染能力。如果不是基于 GPU 的处理，手机上实时高清视频滤镜是不现实，甚至不可能的。 着色器 (shader) 是我们利用这种能力的工具。着色器是用着色语言写的小的，基于 C 语言的程序。现在有很许多种着色语言，但你如果做 OS X 或者 iOS 开发的话，你应该专注于 OpenGL 着色语言，或者叫 GLSL。你可以将 GLSL 的理念应用到其他的更专用的语言 (比如 Metal) 上去。这里我们即将介绍的概念与和 Core Image 中的自定义核矩阵有着很好的对应，尽管它们在语法上有一些不同。 这个过程可能会很让人恐惧，尤其是对新手。这篇文章的目的是让你接触一些写图像处理着色器的必要的基础信息，并将你带上书写你自己的图像处理着色器的道路。 什么是着色器 我们将乘坐时光机回顾一下过去，来了解什么是着色器，以及它是怎样被集成到我们的工作流当中的。 如果你在 iOS 5 或者之前就开始做 iOS 开发，你或许会知道在 iPhone 上 OpenGL 编程有一个转变，从 OpenGL ES 1.1 变成了 OpenGL ES 2.0。 OpenGL ES 1.1 没有使用着色器。作为替代，OpenGL ES 1.1 使用被称为固定功能管线 (fixed-function pipeline) 的方式。有一系列固定的函数用来在屏幕上渲染对象，而不是创建一个单独的程序来指导 GPU 的行为。这样有很大的局限性，你不能做出任何特殊的效果。如果你想知道着色器在工程中可以造成怎样的不同，看看这篇 Brad Larson 写的他用着色器替代固定函数重构 Molecules 应用的博客 OpenGL ES 2.0 引入了可编程管线。可编程管线允许你创建自己的着色器，给了你更强大的能力和灵活性。 在 OpenGL ES 中你必须创建两种着色器：顶点着色器 (vertex shaders) 和片段着色器 (fragment shaders)。这两种着色器是一个完整程序的两半，你不能仅仅创建其中任何一个；想创建一个完整的着色程序，两个都是必须存在。 顶点着色器定义了在 2D 或者 3D 场景中几何图形是如何处理的。一个顶点指的是 2D 或者 3D 空间中的一个点。在图像处理中，有 4 个顶点：每一个顶点代表图像的一个角。顶点着色器设置顶点的位置，并且把位置和纹理坐标这样的参数发送到片段着色器。 然后 GPU 使用片段着色器在对象或者图片的每一个像素上进行计算，最终计算出每个像素的最终颜色。图片，归根结底，实际上仅仅是数据的集合。图片的文档包含每一个像素的各个颜色分量和像素透明度的值。因为对每一个像素，算式是相同的，GPU 可以流水线作业这个过程，从而更加有效的进行处理。使用正确优化过的着色器，在 GPU 上进行处理，将使你获得百倍于在 CPU 上用同样的过程进行图像处理的效率。 把东西渲染到屏幕上从一开始就是一个困扰 OpenGL 开发者的问题。仅仅让屏幕呈现出非黑色就要写很多样板代码和设置。开发者必须跳过很多坑 ，而这些坑所带来的沮丧感以及着色器测试方法的匮乏，让很多人放弃了哪怕是尝试着写着色器。 幸运的是，过去几年，一些工具和框架减少了开发者在尝试着色器方面的焦虑。 GPUImage ShaderToy Shaderific Quartz Composer 下面我将要写的每一个着色器的例子都是从开源框架 GPUImage 中来的。如果你对 OpenGL/OpenGL ES 场景如何配置，从而使其可以使用着色器渲染感到好奇的话，可以 clone 这个仓储。我们不会深入到怎样设置 OpenGL/OpenGL ES 来使用着色器渲染，这超出了这篇文章的范围。 我们的第一个着色器的例子 顶点着色器 好吧，关于着色器我们说的足够多了。我们来看一个实践中真实的着色器程序。这里是一个 GPUImage 中一个基础的顶点着色器： attributevec4position;attributevec4input