Opengl ES之文字渲染

前言

自此已是我关于Opengl ES系列入门教程的第16篇文章了，虽然写的不咋的，文章产出量也不高，但是这个系列从2022年8月底开始持续到现在也坚持了比较久，每一篇文章都是经过自己的精心调试通过后再写文总结发布，这个过程耗费了我很多的私人时间，其实一开始想写这个系列就是为了想看看自己不能系统性地把一件事情做好，现在看来依然比较难，因为自己平常除了工作以外，偶尔也会去峡谷浪一浪，本身自己就是个不靠谱的宝爸，所以经常周末还得往老家跑。

目前这个系列还有滤镜、转场动画等一些内容没有写完，大部分写博文的童鞋都知道，这大概就是一个用爱发电的过程，没有利益，也没有营收，离谱一点写的不好，可能还会被喷...本来打算是这个系列完善后再放出源码的，但是有不少好学的童鞋加了V信索要，同时也不知道后续这个系列自己还会不会继续完善下去，因此这次就把这个系列的源码放出来啦，仅供参考。

所谓，其实在之前的博文中，我都贴上了关键的代码，如果真有时间又想学习的话还是建议自己亲手敲一遍学得牢，理解得透切。

今天的主要内容是使用Opengl ES搭配FreeType进行文字渲染。

FreeType

文字渲染是做音视频开发逃不掉的一个需求，实际上 OpenGL 并没有定义渲染文字的方式，但是我们可以通过纹理贴图的方式实现文字渲染，就是将带有文字的图像上传到纹理，然后进行纹理贴图。因此在Android平台是使用Opengl ES进行文字渲染就有两个不同的方案，一个是使用Canvas绘制文字生产Bitmap，然后将带文字的Bitmap进行渲染；另外一个是使用跨平台的字体解析库FreeType实现。

FreeType是一个基于 C 语言实现的用于文字渲染的跨平台开源库，它小巧、高效、高度可定制，主要用于加载字体并将其渲染到位图，支持多种字体的相关操作。

FreeType 官网地址：

更多关于FreeType的介绍以及使用文档请自行参考官网教程。

FreeType编译

一贯原则，要将一个跨平台C/C++库移植到Android，首先第一步就是先进行交叉编译，对交叉编译不了解的童鞋们请参考之前的文章：

FreeType很贴心地为我们提供了文件，因此我们只需配置一下NDK的相关环境即可编译成功，更多关于可配置参数，可通过命令行查看。

下面是笔者在mac上编译FreeType的一个脚本：

编译成功后即可将静态库引入到Android Studio中使用了，引入的步骤也很简单，主要是配置一下头文件的搜索路径和动态库的查找路径即可，详情可参考之前的博文：

FreeType的使用

有关FreeType的使用，官网有比较详细的介绍：https://freetype.org/freetype2/docs/tutorial/step1.html

首先引入的头文件是：

在FreeType中每个字体库加载后就是一个叫做FT_Face的东西，后续通过FT_Face这个结构图可以获取到文字的一系列信息，比如图像宽高等。

首先使用进行初始化，然后通过函数得到一个FT_Face。

下面这段代码的意思就是将128个ASCII，并将相关字体图像信息缓存起来：

使用Opengl ES进行渲染

首先我们的偏远着色器是：

核心逻辑就是获取本身字体纹理的一个单颜色通道，然后通过变量这个变量重新组合改变字体的渲染颜色。

既然前面我们已经获取了每个文字的图像数据，那么将这些文字的图像进行纹理贴图即可渲染出来，因为我们不是渲染一个文字，可能是渲染一行或者多个文字，因此我们封装一个渲染ASCII的方法：

核心思想就是归一化以及动态变更每个文字的顶点坐标和纹理坐标，记住一点就是顶点坐标决定绘制的的位置，纹理坐标决定绘制纹理图的那一部分内容即可。

FreeType渲染中文

自此我们渲染英文以及一些常用的标点字符是没有问题，但是如果我们要渲染中文就不行了，我们尝试使用我们封装的函数渲染中文就会发现是没有效果的。

与 ASCII 码不同的是，中文字符采用 2 字节的 Unicode 编码，所以在加载字体之前，我们首先需要设置编码类型：

另外，还需要注意的一点是中文字符串需要采用宽字符。

下面是加载Unicode编码字体的实例代码：

完整的字体渲染代码：

运行结果：

遇到的问题

测试字体库如何获取

每台个人电脑都自带着很多的字体库，比如搜索结尾的文件就能搜索到很多，拷贝到手机中进行加载使用测试即可。

使用了Unicode编码依然无法渲染中文

测试的时候发现使用渲染中文有时候还是可能会没有效果，这时候需要确认加载的这个字体库是否支持中文，如果字体库本身就是不支持中文的话，那么自然是无法渲染的。

系列教程源码

https://github.com/feiflyer/NDK_OpenglES_Tutorial

后续demo如果有完善可能会更新。

Opengl ES系列入门介绍