短视频图像处理 OpenGL ES 实践

2017年，短视频正以其丰富的内容表现力和时间碎片化的特点，快速崛起，而短视频最具可玩性之处就在支持人脸识别的动态贴图和各种不同效果的美颜、滤镜等。那短视频动态贴纸、滤镜、美颜等功能究竟是如何实现的呢？

为什么选择 OpenGL ES

Android 手机在处理 3D 图形相关的计算时一般都会选择使用 GPU。相较于 CPU，GPU 在图像动画处理时能提供更快的速度以达到更高的帧率。 Android 设备的 GPU 处理提供了两套不同的 API ：Vulkan 和 OpenGL ES。其中 VulKan 只支持 Android 7.0 以上的设备。OpenGL ES 则支持所有的 Android 版本。

同时 OpenGL ES 作为 OpenGL 的子集，针对手机、PDA 和游戏主机等嵌入式设备去除了 glBegin/glEnd，四边形、多边形等复杂图元等许多非绝对必要的特性，消除它的冗余功能，从而提供了更容易学习和易于在移动图形硬件中实现的库。

所以目前，在短视频图像处理中 OpenGL ES 凭借它良好的系统支持性和功能的高度精简性使它成为了最广泛的 GPU 处理 API 之一。

下文我将以 Android 为例通过绘制一个三角形，简单介绍一下如何使用 OpenGL ES 2.0。

如何使用 OpenGL ES 绘制一个三角形

创建一个画布

首先要在 manifest 配置文件中添加申明使用 OpenGL ES 2.0 接口：

Android 为 3D 图形提供了两个可以作为画布的控件，GLSurfaceView 和 TextureView 。其中 GLSurfaceView 使用起来更加简单方便,只要像普通的 View 一样在布局文件中定义即可。

然后再 Activity 中直接用 findViewById() 获取 view 即可。

还需要调用 setEGLContextClientVersion() 方法来指定使用的 OpenGL ES 版本。

GLSurfaceView 的渲染模式有两种，默认是幕 RENDERMODE_CONTINUOUSLY 连续不断的更新屏，另外一种是RENDERMODE_WHEN_DIRTY只有在调用 requestRender() 在更新屏幕（要在 onSurfaceCreated（）方法后调该改方法）。

创建一个渲染器

上面创建的 GLSurfaceView 控件需要一个 GLSurfaceView.Renderer 来进行图像的渲染。使用 setRender（）为 GLSurfaceView 绑定一个渲染器。

GLSurfaceView.Renderer 有三个方法：

onSurfaceCreated()：调用一次，用来配置 View 的 OpenGL ES 环境。

onDrawFrame()：每次重新绘制 View 时被调用。

onSurfaceChanged()：如果 View 的几何形态发生变化时会被调用，例如当设备的屏幕方向发生改变时。

绘制三角形

创建一个 Triangle 类，确定三角形的坐标并传入一个 ByteBuffer 中。

定义 Vertex Shader 和 Fragment Shader 用来渲染图形顶点和图形表面。

用一个辅助方法加载 Vertex Shader 和 Fragment Shader 。

创建一个 Program 并传入 Vertex Shader 和 Fragment Shader 。

创建一个 onDraw() 方法用于绘制图形。

最后在 GLSurfaceView.Renderer 的 onDrawFrame () 方法中执行绘制方法。

这样就可以通过 OpenGL ES 2.0 在屏幕上绘制一个三角形了。效果如图：

上文以使用 OpenGL ES 在屏幕绘制一个三角形为例，展示了 OpenGL ES 的基础使用方法。感兴趣的朋友可以通过 Android 的官网教程（https://developer.android.com/training/graphics/opengl/environment.html）学习了解。

短视频图像处理实现

我们知道了如何在 Android 使用 OpenGL ES，那么短视频中滤镜和美颜等操作又是如何实现的？

首先在短视频采集过程中，需要提供一个 view 作为摄像头的预览画面展示，Android 中提供了 GLSurfaceView 以及 TextureView 这两个 API 来实现相机预览。通过这种方式就可以使用 Android 提供的 OpenGL ES 环境，对图像进行处理。比如美颜是对肤色部分做模糊美白加亮操作，滤镜贴纸是将素材图片处理成纹理叠加到原视频纹理中。

创建 SurfaceTexture 绑定 Camera 之后开启相机预览。

这里涉及很多 OpenGL 的操作。有兴趣的同学可以看下这个开源项目（https://github.com/wuhaoyu1990/MagicCamera）提供了丰富的滤镜效果示例。

又拍云最近推出了一站式短视频解决方案，提供短视频录制端、播放端 SDK，上传加速，不限量存储以及稳定快速的 CDN服务。短视频拍摄端 SDK 集成美颜、滤镜、动态贴纸等众多功能。一站式短视频解决方案，即可满足你的全部需求！

参考内容：维基百科 — OpenGL ES