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 中一个基础的顶点着色器：
|
1 2 3 4 5 6 7 8 9 10 |
attribute vec4 position; attribute vec4 inputTextureCoordinate； varying vec2 textureCoordinate; void main() { gl_position = position; textureCoordinate = inputTextureCoordinate.xy; } |
我们一句一句的来看:
|
1 |
attribute vec4 position; |
像所有的语言一样，着色器语言的设计者也为常用的类型创造了特殊的数据类型，例如 2D 和 3D 坐标。这些类型是向量，稍后我们会深入更多。回到我们的应用程序的代码，我们创建了一系列顶点，我们为每个顶点提供的参数里的其中一个是顶点在画布中的位置。然后我们必须告诉我们的顶点着色器它需要接收这个参数，我们稍后会将它用在某些事情上。因为这是一个 C 程序，我们需要记住要在每一行代码的结束使用一个分号，所以如果你正使用 Swift 的话，你需要把在末尾加分号的习惯捡回来。
|
1 |
attribute vec4 inputTextureCoordinate; |
现在你或许很奇怪，为什么我们需要一个纹理坐标。我们不是刚刚得到了我们的顶点位置了吗？难道它们不是同样的东西吗？
其实它们并非一定是同样的东西。纹理坐标是纹理映射的一部分。这意味着你想要对你的纹理进行某种滤镜操作的时候会用到它。左上角坐标是 (0,0)。右上角的坐标是 (1,0)。如果我们需要在图片内部而不是边缘选择一个纹理坐标，我们需要在我们的应用中设定的纹理坐标就会与此不同，像是 (.25, .25) 是在图片左上角向右向下各图片高宽 1/4 的位置。在我们当前的图像处理应用里，我们希望纹理坐标和顶点位置一致，因为我们想覆盖到图片的整个长度和宽度。有时候你或许会希望这些坐标是不同的，所以需要记住它们未必是相同的坐标。在这个例子中，顶点坐标空间从 -1.0 延展到 1.0，而纹理坐标是从 0.0 到 1.0。
|
1 |
varying vec2 textureCoordinate; |
因为顶点着色器负责和片段着色器交流，所以我们需要创建一个变量和它共享相关的信息。在图像处理中，片段着色器需要的唯一相关信息就是顶点着色器现在正在处理哪个像素。
|
1 |
gl_Position = position; |
gl_Position 是一个内建的变量。GLSL 有一些内建的变量，在片段着色器的例子中我们将看到其中的一个。这些特殊的变量是可编程管道的一部分，API 会去寻找它们，并且知道如何和它们关联上。在这个例子中，我们指定了顶点的位置，并且把它从我们的程序中反馈给渲染管线。
|
1 |
textureCoordinate = inputTextureCoordinate.xy; |
最后，我们取出这个顶点中纹理坐标的 X 和 Y 的位置。我们只关心 inputTextureCoordinate 中的前两个参数，X 和 Y。这个坐标最开始是通过 4 个属性存在顶点着色器里的，但我们只需要其中的两个。我们拿出需要的属性，然后赋值给一个将要和片段着色器通信的变量，而不是把更多的属性反馈给片段着色器。
在大多数图像处理程序中，顶点着色器都差不多，所以，这篇文章接下来的部分，我们将集中讨论片段着色器。
片段着色器
看过了我们简单的顶点着色器后，我们再来看一个可以实现的最简单的片段着色器：一个直通滤镜：
|
1 2 3 4 5 6 7 8 |
varying highp vec2 textureCoordinate; uniform sampler2D inputImageTexture; void main() { gl_FragColor = texture2D(inputImageTexture, textureCoordinate); } |
这个着色器实际上不会改变图像中的任何东西。它是一个直通着色器，意味着我们输入每一个像素，然后输出完全相同的像素。我们来一句句的看：
|
1 |
varying highp vec2 textureCoordinate; |
因为片段着色器作用在每一个像素上，我们需要一个方法来确定我们当前在分析哪一个像素/片段。它需要存储像素的 X 和 Y 坐标。我们接收到的是当前在顶点着色器被设置好的纹理坐标。
|
1 |
uniform sampler2D inputImageTexture; |
为了处理图像，我们从应用中接收一个图片的引用，我们把它当做一个 2D 的纹理。这个数据类型p度图，也可以复杂到是分析一个视频，并在人群中找到某个特定的人。尽管这些应用非常的不同，但这些例子遵从同样的流程，都是从创造到渲染。
在电脑或者手机上做图像处理有很多方式，但是目前为止最高效的方法是有效地使用图形处理单元，或者叫 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 中一个基础的顶点着色器：
|
1 2 3 4 5 6 7 8 9 10 |
attribute vec4 position; attribute vec4 inputTextureCoordinate； varying vec2 textureCoordinate; void main() { gl_position = position; textureCoordinate = inputTextureCoordinate.xy; } |
我们一句一句的来看:
|
1 |
attribute vec4 position; |
像所有的语言一样，着色器语言的设计者也为常用的类型创造了特殊的数据类型，例如 2D 和 3D 坐标。这些类型是向量，稍后我们会深入更多。回到我们的应用程序的代码，我们创建了一系列顶点，我们为每个顶点提供的参数里的其中一个是顶点在画布中的位置。然后我们必须告诉我们的顶点着色器它需要接收这个参数，我们稍后会将它用在某些事情上。因为这是一个 C 程序，我们需要记住要在每一行代码的结束使用一个分号，所以如果你正使用 Swift 的话，你需要把在末尾加分号的习惯捡回来。
|
1 |
attribute vec4 inputTextureCoordinate; |
现在你或许很奇怪，为什么我们需要一个纹理坐标。我们不是刚刚得到了我们的顶点位置了吗？难道它们不是同样的东西吗？
其实它们并非一定是同样的东西。纹理坐标是纹理映射的一部分。这意味着你想要对你的纹理进行某种滤镜操作的时候会用到它。左上角坐标是 (0,0)。右上角的坐标是 (1,0)。如果我们需要在图片内部而不是边缘选择一个纹理坐标，我们需要在我们的应用中设定的纹理坐标就会与此不同，像是 (.25, .25) 是在图片左上角向右向下各图片高宽 1/4 的位置。在我们当前的图像处理应用里，我们希望纹理坐标和顶点位置一致，因为我们想覆盖到图片的整个长度和宽度。有时候你或许会希望这些坐标是不同的，所以需要记住它们未必是相同的坐标。在这个例子中，顶点坐标空间从 -1.0 延展到 1.0，而纹理坐标是从 0.0 到 1.0。
|
1 |
varying vec2 textureCoordinate; |
因为顶点着色器负责和片段着色器交流，所以我们需要创建一个变量和它共享相关的信息。在图像处理中，片段着色器需要的唯一相关信息就是顶点着色器现在正在处理哪个像素。
|
1 |
gl_Position = position; |
gl_Position 是一个内建的变量。GLSL 有一些内建的变量，在片段着色器的例子中我们将看到其中的一个。这些特殊的变量是可编程管道的一部分，API 会去寻找它们，并且知道如何和它们关联上。在这个例子中，我们指定了顶点的位置，并且把它从我们的程序中反馈给渲染管线。
|
1 |
textureCoordinate = inputTextureCoordinate.xy; |
最后，我们取出这个顶点中纹理坐标的 X 和 Y 的位置。我们只关心 inputTextureCoordinate 中的前两个参数，X 和 Y。这个坐标最开始是通过 4 个属性存在顶点着色器里的，但我们只需要其中的两个。我们拿出需要的属性，然后赋值给一个将要和片段着色器通信的变量，而不是把更多的属性反馈给片段着色器。
在大多数图像处理程序中，顶点着色器都差不多，所以，这篇文章接下来的部分，我们将集中讨论片段着色器。
片段着色器
看过了我们简单的顶点着色器后，我们再来看一个可以实现的最简单的片段着色器：一个直通滤镜：
|
1 2 3 4 5 6 7 8 |
varying highp vec2 textureCoordinate; uniform sampler2D inputImageTexture; void main() { gl_FragColor = texture2D(inputImageTexture, textureCoordinate); } |
这个着色器实际上不会改变图像中的任何东西。它是一个直通着色器，意味着我们输入每一个像素，然后输出完全相同的像素。我们来一句句的看：
|
1 |
varying highp vec2 textureCoordinate; |
因为片段着色器作用在每一个像素上，我们需要一个方法来确定我们当前在分析哪一个像素/片段。它需要存储像素的 X 和 Y 坐标。我们接收到的是当前在顶点着色器被设置好的纹理坐标。
|
1 |
uniform sampler2D inputImageTexture; |
为了处理图像，我们从应用中接收一个图片的引用，我们把它当做一个 2D 的纹理。这个数据类型«叫做 sampler2D ，这是因为我们要从这个 2D 纹理中采样出一个点来进行处理。
|
1 |
gl_FragColor = texture2D(inputImageTexture, textureCoordinate); |
这是我们碰到的第一个 GLSL 特有的方法：texture2D，顾名思义，创建一个 2D 的纹理。它采用我们之前声明过的属性作为参数来决定被处理的像素的颜色。这个颜色然后被设置给另外一个内建变量，gl_FragColor。因为片段着色器的唯一目的就是确定一个像素的颜色，gl_FragColor 本质上就是我们片段着色器的返回语句。一旦这个片段的颜色被设置，接下来片段着色器就不需要再做其他任何事情了，所以你在这之后写任何的语句，都不会被执行。
