在上一篇文章中，主要介绍了OpenGL ES基础，了解了OpenGL ES的基础之后，我们就可以开始学习GPUImage的源码了。本文将主要介绍GPUImage的整体框架，渲染的流程以及几个重要的类和协议。
输入和输出
任何一个框架或者程序的出发点都是输入和输出，GPUImage中最重要的也是这两个元素。在框架层面上说，输入应该是一张图片，一个视频，一个UI元素或者一个数据流。而输出也同样应该是一个处理完成了的图片，视频或者数据流。
在GPUImage内部的实现中，主要的实现思想也是将一个图片的内容放置到frameBuffer中，然后将这个frameBuffer在滤镜链中进行传递，并且处理。因此，每一个滤镜既可以作为一个输入（GPUImageInput），也可以作为一个输出（GPUImageOutput）存在。
GPUImageInput
GPUImageInput是一个Protocol，实现这个Protocol的类需要实现的方法主要都是接收上一个GPUImageOutput的frameBuffer相关的方法，以及处理当上一个GPUImageOutput处理完一帧之后收到的通知。实现了GPUImageInput接口的类包括了所有的Filter，FilterGroup，GPUImageView，GPUImageMovieWriter。因为它们都需要获取之前一个Output处理得到的结果，从而进行渲染。
GPUImageOutput
GPUImageOutput是一个基类，实现了一些基本方法，比如通用的将下一个GPUImageInput添加到FilterChain中的方法。同时在每一个GPUImageOutput中，都需要维护一个GPUImageFrameBuffer，这个就是Output真正的输出。GPUImageOutput还提供了从当前的FrameBuffer中获取图片的一系列方法。常用的GPUImageOutput的子类有：所有的Filter，FilterGroup，GPUImagePicture，GPUImageMovie，GPUImageUIElement等等。
每一个GPUImageOutput对象通过调用addTarget:atTextureLocation:方法，将自己的输出frameBuffer以及相关的信息告诉FilterChain中的下一个Input；
因此，每一个FilterChain的第一个元素都是GPUImageOutput的子类，比如GPUImagePicture，GPUImageMovie等等。这个和我们上面说的输入和输出并不冲突，因为任何一个图像处理的最初的一个元素，必须要能够生成并且产出一个FrameBuffer，才能够给后面的滤镜使用。
而最终用于显示的GPUImageView则是一个GPUImageInput，因为它只需要接收处理完的图片进行显示，而不需要将结果继续传递给其他的Input。
GPUImageFrameBuffer
GPUImageFrameBuffer提供了在GPUImageOutput和GPUImageInput进行数据传递的媒介。每个GPUImageFrameBuffer都有一个自己的OpenGL Texture，这个Texture作为下一个Input的Texel来源。多数的GPUImageFrameBuffer包含一个OpenGL FrameBuffer，这个FrameBuffer用来离屏渲染，并且将渲染的结果放置到Texture中。每个GPUImageOutput都包含了至少一个GPUImageFrameBuffer对象，而每个GPUImageInput都实现了一个setInputFramebuffer:atIndex:方法，来接收上一个Output处理完的纹理。
GPUImageFilter
GPUImageFilter是一个GPUImageOutput的子类，同时实现了GPUImageInput协议。是整个GPUImage框架的核心。GPUImage除了实现了Input和Output的功能之外，还实现了基本的渲染功能。因此，每个GPUImageFilter都包含了一个GLProgram的对象，这个对象实现了OpenGL ES相关的渲染。
GLProgram
GLProgram是对OpenGL ES的program的面向对象封装，包括了Vertex Shader，FragmentShader的加载，program的link以及对attribute和uniform的获取和管理。由于GPUImage处理的对象主要是2D的图片，因此，作者将一些常用的Attributes以及Uniform做了固定的命名规范处理，从而实现了简单的面向对象封装。
渲染过程
根据上面的介绍，我们可以总结出GPUImage总体的渲染流程；
1. 首先我们需要创建一个GPUImageOutput，作为需要被处理的对象来源，常用的有：
GPUImagePicture：使用图片作为处理对象；
GPUImageMovie：使用视频作为处理对象；
GPUImageUIElement：使用UIElement作为处理对象；
GPUImageVideoCamera: 使用相机捕捉到的图像作为处理对象；
2. 有了处理的对象之后，我们需要根据我们的需求，创建不同种类的Filter，并且通过GPUImageOutput的addTarget:atTextureLocation:方法，将这些Filter添加到FilterChain中；
3. 如果我们需要显示处理完的结果或者保存这个结果的话，我们还需要将处理完的结果输出到一个GPUImageInput中。常用的有：
GPUImageView：将处理结果显示到一个View上，这个View可以实时显示处理的结果；
GPUImageMovieWriter：将处理的结果保存到一个视频文件中；
图片：如果最终没有一个显示的Target，我们也可以通过GPUImageOutput中的一系列newCGImageFromFrameBuffer方法，直接获取到当前GPUImageOutput处理的结果。
4. 调用第一步素材的开始处理方法，让处理过程开始：
[picture processImage];
[movie startProcessing];
[element update];
[camera startCapture];
到这里，整个GPUImage渲染的流程就结束了，就可以坐等输出的结果啦。当然本文只是介绍了GPUImage的整个渲染流程，具体的每一个元素会在之后的具体解析中再详细介绍。
网友评论