一. 开始主题之前我们开始熟悉几个概念：

1. CPU

       中央处理器（CPU，Central Processing Unit）是一块超大规模的集成电路，是一台计算机的运算核心（Core）和控制核心（ Control Unit）。它的功能主要是解释计算机指令以及处理计算机软件中的数据。
       中央处理器主要包括运算器（算术逻辑运算单元，ALU，Arithmetic Logic Unit）和高速缓冲存储器（Cache）及实现它们之间联系的数据（Data）、控制及状态的总线（Bus）。它与内部存储器（Memory）和输入/输出（I/O）设备合称为电子计算机三大核心部件。

2. GPU

    图形处理器（英语：Graphics Processing Unit，缩写：GPU），又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备（如平板电脑、智能手机等）上图像运算工作的微处理器。将计算机系统所需要的显示信息进行转换驱动，并向显示器提供行扫描信号，控制显示器的正确显示，是连接显示器和个人电脑主板的重要元件，也是“人机对话”的重要设备之一。显卡作为电脑主机里的一个重要组成部分，承担输出显示图形的任务；并行地做浮点运算，图像处理和渲染就是在将要渲染到窗口上的像素上做许许多多的浮点运算。（实时高清视频滤镜）

3. 着色器 (shader)

  使用可编程管线创建的来指导 GPU 的行为的一个单独的基于C语言的程序。
 
  着色器（Shader）是用来实现图像渲染的，用来替代固定渲染管线的可编辑程序。其中Vertex Shader主要负责顶点的几何关系等的运算，Pixel Shader主要负责片源颜色等的计算。
 
  着色器替代了传统的固定渲染管线，可以实现3D图形学计算中的相关计算，由于其可编辑性，可以实现各种各样的图像效果而不用受显卡的固定渲染管线限制。

  顶点着色程序从GPU前端模块（寄存器）中提取图元信息（顶点位置、法向量、纹理坐标等），并完成顶点坐标空间转换、法向量空间转换、光照计算等操作，最后将计算好的数据传送到指定寄存器中；然后片断着色程序从中获取需要的数据，通常为“纹理坐标、光照信息等”，并根据这些信息以及从应用程序传递的纹理信息（如果有的话）进行每个片断的颜色计算，最后将处理后的数据送光栅操作模块。

4. OpenGL && OpenGL ES

    OpenGL（全写Open Graphics Library）或者叫 GLSL（全称是：OpenGL Shading Language），是指定义了一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口。它用于三维图像（二维的亦可），是一个功能强大，调用方便的底层图形库。
    
    OpenGL™ 是行业领域中最为广泛接纳的 2D/3D 图形 API，其自诞生至今已催生了各种计算机平台及设备上的数千优秀应用程序。OpenGL™ 是独立于视窗操作系统或其它操作系统的，亦是网络透明的。在包含CAD、内容创作、能源、娱乐、游戏开发、制造业、制药业及虚拟现实等行业领域中，OpenGL™ 帮助程序员实现在 PC、工作站、超级计算机等硬件设备上的高性能、极具冲击力的高视觉表现力图形处理软件的开发。

    OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL三维图形 API 的子集，针对手机、PDA和游戏主机等嵌入式设备而设计。该API由Khronos集团定义推广，Khronos是一个图形软硬件行业协会，该协会主要关注图形和多媒体方面的开放标准。

二.然后开始介绍 GPU渲染的原理：

    图片，归根结底，实际上仅仅是数据的集合。图片的文档包含每一个像素的各个颜色分量和像素透明度的值。因为对每一个像素，算式是相同的，GPU 可以流水线作业这个过程，从而更加有效的进行处理。使用正确优化过的着色器，在 GPU 上进行处理，将使你获得百倍于在 CPU 上用同样的过程进行图像处理的效率。

    1.OpenGL ES 1.1 没有使用着色器。作为替代，OpenGL ES 1.1 使用被称为固定功能管线 (fixed-function pipeline) 的方式，有一系列固定的函数用来在屏幕上渲染对象，而不是创建一个单独的程序来指导 GPU 的行为（ iOS 5 或者之前）
    2.OpenGL ES 2.0 引入了可编程管线。可编程管线允许你创建自己的着色器
    在 OpenGL ES 中你必须创建两种着色器：顶点着色器 (vertex shaders) 和片段着色器 (fragment shaders)。OpenGL ES 2.0 引入了可编程管线。可编程管线允许你创建自己的着色器，给了你更强大的能力和灵活性。
    构成：顶点着色器 (vertex shaders) 和片段着色器 (fragment shaders)
    2.1 顶点着色器定义了在 2D 或者 3D 场景中几何图形是如何处理的
    2.2 GPU 使用片段着色器在对象或者图片的每一个像素上进行计算，最终计算出每个像素的最终颜色

着色器原理图.png

三. 一些工具和框架介绍:

● GPUImage
● ShaderToy
● Shaderific
● Quartz Composer

           GPUImage 是一个基于OpenGL ES 2.0  的开源的图像处理库，作者是Brad Larson。GPUImage将OpenGL ES 封装为简洁的Objective-C 或swift接口，可以用来给图像、实时相机视频、电影等添加滤镜。对于诸如处理图像或实况视频帧的大规模并行操作，GPU相对于CPU具有一些显着的性能优点。在iPhone 4上，简单的图像滤镜在GPU上的执行速度比等效的基于CPU的滤镜快100多倍。

功能：

• 处理静态图片
• 实时视频滤镜
• 从视频中捕获图片
• 编写自定义的图像处理操作
• 从静态图片中捕获并添加滤镜（即将实现）
• 添加滤镜并转码视频（即将实现）

四.最后附上应用 Demo 地址：

https://github.com/zhoujian12/GPUImageDemo

五.总结

• 该技术产生的背景？
对2D或3D显示图片或视频的效果要求越来越高，越来越复杂

• 主要的应用场景？
处理静态图片
实时视频滤镜
从视频中捕获图片
编写自定义的图像处理操作
从静态图片中捕获并添加滤镜（即将实现）
添加滤镜并转码视频（即将实现）

• 实现的原理？
OpenGL ES 2.0

• 有哪些突出的优势？
最低支持 iOS 4.0，iOS 5.0 之后就支持自定义滤镜。
在低端机型上，GPUImage 有更好的表现。（这个我没用真正的设备对比过，GPUImage 的主页上是这么说的）
GPUImage 在视频处理上有更好的表现。
GPUImage 的代码完成公开，实现透明。
可以根据自己的业务需求，定制更加复杂的管线操作。可定制程度高。

• 如何配置来应用此技术？
参见http://www.jianshu.com/p/e310e5dd9317
• 配置时需注意哪些点？
参见http://www.jianshu.com/p/e310e5dd9317

六.参考文档：

http://www.jianshu.com/p/e310e5dd9317 (GPUImage的基本使用)
http://www.jianshu.com/p/1bcf38960dbb (swift版本 GPUImage2 的集成与介绍)
http://blog.csdn.net/familycsd000/article/details/45499049 (着色器介绍)
https://objccn.io/issue-21-7/ (Objc 中国期刊)