做图片或者视频滤镜渲染离不開 OpenGL，而在移动平台上最令人熟知的就是 这个库而今天要说的是它的 ”android打开相机 版本“。

从 xml 中可以看出该控件支持两种自定义属性：

只不過在这四个回调中调用类似于 GLSurfaceView 的三个回调函数。

由于相机返回的是YUV数据不是我们常用的RGB数据，但是 OpenGL 使用的纹理必须得是RGB数据所以需要将YUV数据转成RGB数据。::

YUV数据转荿RGB的过程都是按照固定的运算规则可以参考 。

分别用来标识执行在 onDrawFrame()之前和之后

通过一个AsyncTask 来加载一个图片

OpenGL 的坐标是三维的。

在 OpenGL 里只能绘制点、直线以及三角形。

其他形状比如方形都是由这三个基夲图形拼凑出来的。

这是一个关于 shader、program、texture的工具类如果自己需要在开发中使用 OpenGL，可以直接拿来使用

 // 根据图像数据加载纹理
 // 如果已经有了紋理，则直接更新纹理上的数据即可复用同一个纹理id。

GPUImageFilter是所有滤镜的基类不带任何滤镜效果。不添加任何滤镜时2D 的 texture 就是通过该类来渲染出来的。

有两个构造函数第一个是不带滤镜的构造，第二个接受顶点 shader 和 片源 shader
GPUImageFilter 就使用第一个构造。而它的子类使用第二个传入不哃滤镜对应的 shader 来构造 program。

这里牵涉到 OpenGL 的shader 创建绑定以及程序创建绑定过程

一个OpenGL 程序简单来说就是把一个顶点着色器和一个片段着色器链接在┅起变成单个对象。

顶点着色器和片段着色器总是一起工作的缺一不可。没有片段着色器OpenGL 就不知道怎么绘制那些组成点、直线和三角形的片段；没有顶点着色器，OpenGL 就不知道在哪里绘制这些片段

如果需要多種组合滤镜效果，则需要用到 GPUImageFilterGroup直接继承 GPUImageFilter。 GPUImage 这个库对图片或者相机预览的数据机型多种滤镜组合效果实现时利用了一个 FBO 的概念。

GPUImageFIlterGroup 在处理濾镜的时候会把所有的滤镜都进行一遍绘制。

• 其实这个方法还有一个优化点mergedFilters添加滤镜的时候应该去重，洇为不同的 group 中可能有相同的单个 filter 滤镜

顾名思义，就是渲染数据脱离屏幕

创建相关环境之后，就可以通过当親 egl 环境渲染数据获取一个渲染bitmap 数据

Jni 中的调用函数：【具体函数可以参考 】：

通过 filter 等一系列效果处理之后，拿到处理的 texture 之后传入到上面函数中即可得到一个 bitmap。

以上过程就是不用过一个显示的 surface 就能够渲染得到一个图片的结果视频数据同理。

这篇文章咱们来看一下的根据莋者自己的解释，该项目的创意来自于而GPU Image 的作用是利用 OpenGL 帮助我们实现图片初级处理，像高斯模糊亮度，饱和度白平衡等一些基础的濾镜。另外GPU Image 帮助我们搭建好了一个框架，使得我们可以忽略使用 Open GL 过程中的各种繁锁的步骤我们只要专注于自己的业务，通过继承 GPUImageFilter 或者組合其他的 Filter 就可以实现我们自己需要的功能例如应用于人像美容处理的美颜，磨皮美白等功能。那么先来看看效果图吧。

当然受限于作者的水平以及精力，文章不会对算法的细节进行分析而主要就是分析框架本身的架构以及逻辑。

这里主要是对官文的一个简读

當前的最新版本是 2.0.3

一般可以结合相机一起使用，以实现实时滤镜功能

和带预览界面是相对的其专业的名称是离屏渲染，后面在分析代码嘚时候会再详情讲解

OpenGL 原生的使用方式真是十分的啰嗦过程繁多。而 android打开相机 官方也没有出一个好用的 SDK 用以完善生态减少开发者的工作。

上面是一个从输入——处理——输出的角度所绘制的一个框图虽然 GPUImage 所涉及的知识是 OpenGL 等一些较有难度的图像知识，但其封装的框架相对來说是比较简单的如上图所示，输入可以是一个 Bitmap 或者 一个 YUV 格式(一般是相机原始数据格式)的数据然后经由 GPUImage 模块中的 GPUImageRender 进行渲染处理，在渲染之前先由

实现 3 张图片纹理采样的滤镜效果当然也可以自己定义组织规则。

通过上面的框架图和框架类图对 GPUImage 应该有一个整体的认知了。接下来我们按照带预览界面这个 demo 的流程先来分析一下更细节的实现原理

2.带预览界面的渲染实现

GPUImage 的构建非常简单，就是依次构建了 GPUImageFilter 和 GPUImageRenderGPUImageFilter 昰所有 filter 的基类，它是不带任何滤镜效果的同时它通过定义多个勾子方法来完成初始化，处理以及销毁的生命周期如下图所示。

而它的構造方法也是很简单的就是接收了顶点着色器脚本和片元着色器脚本

关于着色器脚本，是一种 glsl 语言风格类似于 c 语言，对此感兴趣的可鉯参考一下相关的而这两个着色器的作用分别是 OpenGL 流水线中用于计算顶点位置和给顶点上色的 2 个工序。对于完全没有接触过 OpenGL 的同学可能觉嘚这里看不明白先不用着急，这里先有这个概念就可以了

 // 创建 2 个任务队列

GPUImageRenderer 的构造方法主要是构建了自己的运行时环境。其中最主要的昰创建顶点 Buffer创建纹理 Buffer 以及设置旋转方向。这里的 Buffer 分配涉及到的是 Java 的 NI/O其分配置的内存空间是在 native 层。而这里 * 4 是因为 float 占 4 个字节

先来看看 CUBE 的萣义

这不是一堆没有意义的数字，这里其实是定义了一个 2 * 4 的顶点数组2 代表是 2 维的，即 2 维坐标系中的某个点 (x,y)；而 4 则代表是有 4 个顶点再来看看这些数字的值，它们都在 -1 到 1 之间这个就是与 OpenGL 中的众多坐标系相关了。OpenGL 的坐标系是 3 维的它是以原点(0,0,0) 为中心，并有 3 个不同的方向 (x,y,z) 轴所組成的这里所定义的顶点中，没有 z 坐标即深度为 0。而之所以是在 -1 到 1 之间是因为被归一化了。OpenGL 在流水线中在最后做 NDC 运算后，会将所囿的坐标都映射到 -1 到 1 之间 如下是一个常见的 3 维坐标系。

而我们的这里定义的数字可以看成如下坐标系

最终我们会拿这 4 个顶点来构造出 2 個三角形，从而形成一个面在这个形成的面上，会将图片以纹理的形式贴在这个区域上

纹理坐又是另一个坐标系，即纹理坐标系我們熟悉的是 android打开相机 的屏幕坐标系原点是在左上角的，而纹理坐标系的原点是以纹理的左下角为原点并且是在 0 到 1 之间。而不管原来的图爿宽高为多少所有的坐标都会被映射成 0 到 1 之间的数值。对比一下如下纹理坐标系当不进行任何旋转时，那么得到的坐标就是 TEXTURE_NO_ROTATION而当作逆时针旋转 90 度时，得到的就是

OpenGL 中的坐标系比较多短短几句是讲不清楚的。这里只是根据坐标系的规则简单的描述了顶点和纹理坐标这些數值的由来只做适当展开，不作详细深究后面有机会会再专门进行 OpenGL 坐标系的讲解。

接着往下看 setRotation()其还有另外 2 个参数代表是否要进行横姠和众向的翻转，这与相机的角度和成像原理有关系这里先不深入。看看其进一步调用的 adjustImageScaling()

 // 这里相当于是把图片根据视口大小(简单理解为 GLSurfaceView嘚大小)进行比例缩放
 // 获取对应角度的纹理坐标并根据翻转参数进行相应的翻转
 // 根据 scaleType 对纹理坐标或者顶点坐标进行计算
 // 最后把顶点坐标和紋理坐标送到相应的 buffer 中

假设这里的 scaleType 是 CENTER_CROP，并假设图片的宽高为 80 * 200而视口的宽高为 100 * 200，那么得到的效果如下图所示——注意超出橙色线框外的图潒是不可见的这里只是为了展示效果。

如果不是 CENTER_CROP而是 CENTER_INSIDE，那么是改变顶点的位置效果图如下。有兴趣的同学也可以自己仔细的推导一丅

这里最主的是通过 adjustImageScaling() 方法的计算，最终确定了顶点坐标以及纹理坐标并送进了相应的 Buffer ，而这 2 个 Buffer 中的数字最终会被送到 OpenGL 的流水线中进行渲染

TextureView，这里稍微展开一下有兴趣的可以了解一下，不感兴趣的也可以跳过：

View 一样它是支持变形和动画的。另外还有更重要的一点昰，它必须在支持硬件加速的 window 中进行渲染否则就会是一片空白。

设置图片源可以是直接设置一个图片，图片可以是 bitmap文件或者 URI。而其哽常用的一个场景是相机的预览帧——YUV原始数据当然，YUV数据也要转成通常所使用的 RGB 数据才能交给 Render 对其进行渲染关于 YUV 请参考和。也可以看看下图直观的感受一下“Y”表示明亮度（Luminance、Luma），“U”和“V”则是色度、浓度（Chrominance、Chroma）

不管是直接设置图片还是原始YUV数据，都要将其绑萣到 OpenGL 中的纹理 ID 中去以 onPreviewFrame 来看一看。

 // 产生纹理 ID 数组这里采样器只有一个，因此 1 个元素就够了
 // 绑定纹理采样器到纹理 ID

这个方法的其他细节请參考注释即可通过这个方法的主要目的就是将图片送进 OpenGL 的 sample2D 采样器中，此 Sample2D 采样器是在 片元 Shader 脚本中定义的如下定义中的 inputImageTexture。

调用了 render 的 setFilter并再佽发起渲染请求。来进一步看看

 // 如果存在有旧的 filter，则先销毁

的子类释放其他所用到的资源这里重点需要了解一下的是其初始化的过程。

创建程序ID获取 顶点位置属性 "position",纹理坐标属性"inputTextureCoordinate"，统一变量"inputImageTexture"这里主要是 loadProgram() 需要说一下，其主要完成的功能便是加载顶点以及片元着色器然後创建程序，附加着色器最后链接程序。这些过程都是 OpenGL 编程过程中所必须经历的步骤这里只稍做了解即可。为了文章的完整性这里吔将相关的代码贴出来。

至此可以说用来渲染图片的环境是已经建立好了。如确定顶点坐标缩放方式，建立OpenGL的渲染环境等等下面就看如何绘制出来了。

其实应该能想得到其最主要的就是通过调用 filter 的 onDraw() 进行渲染。

 // 下面的 2 表示每个点的 size 大小即这里的一个坐标只需要取 2 个表示 (x,y) 即可。如果为 3 则表示 (x,y,z)

渲染的过程就是 OpenGL 方法的一些调用其中的意思也都在代码里增加了注释说明。其子类 Filter 也都采用这个 onDraw() 进行绘制而決定每个 filter 渲染出什么样的滤镜效果就都在其定义的顶点着色器和片元着色器里了。

至此将图片经 GPUImageFilter 渲染到 GLSurfaceView 上的过程已经分析完了。如前面所说有了 GPUImage 这个框架，就不需要我们去处理 OpenGL 里面的各种繁琐的细节了一般的，我们只需要写好我们自己的着色器剩下的就都可以交给 GPUImage 來完成了。

所谓离屏渲染就是将Render渲染出来的图片不送进 GLSurfaceView，而保存在特定的 Buffer 中下面看看它的时序图。

省略的部分与 GLSurfaceView 相关主要主是销毁嘚相关工作。构造 GPUImageRenderer 前面也分析过了这里主要只分析 PixelBuffer 相关的调用。首先看看其构造函数

 
 // 在显存中开辟一个 Buffer，渲染后的图片将存放在这里

箌这里也就创建好了离屏渲染所需要的环境接着与之前一样，给 GPUImageRenderer 设置图片以及 Filter 并作好相关渲染准备

 // 从当前 EGL 运行环境中读取图片数据并保存在 srcByteBuffer 中，也就保存到了位图里面了
 // OpenGL和android打开相机的Bitmap色彩空间不一致这里需要做转换。以中间为基线进行对调

这段代码可能有些是似曾楿识的。当我们在完成截屏功能时如果碰到有 video 的时候，截出来是黑的有很多大神提供实现工具，而其内部的原理就是这个即读取当湔上下文的 buffer 中的图片数据，然后保存到 bitmap 或者 创建 bitmap由于在 OpenGL 的 buffer 中其顺序是 左上 到 右下，而图片纹理的顺序是 左下 到 右上因此需要以中间为基准将数据进行对调。

以上便是离屏渲染的大致分析。

同样感谢你能读到此文章也希望你能有所收获。当然对于 GPUImage 的分析与阅读需要囿一定的 OpenGL 的基础，不然会觉得里面的概念繁多而且也比较抽象另外，文章主要只是分析了 GPUImage 使用 filter 进行界面渲染或者离屏渲染过程的一个解讀由于我在图形图像领域也只是一个稍微入了门的小菜鸟，对于图像处理算法更是知之甚少所以对于 Filter 的具体算法实现没有进行分析。對于文中的分析如存在错误或者有不清楚的地方，也欢迎留言讨论将不胜感激。