stb_truetype解析ttf字体获取顶点信息

简介：

TTF（TrueTypeFont）是一种字库名称。TTF（TrueTypeFont）是Apple公司和Microsoft公司共同推出的字体文件格式，同时也是最常用的一种字体文件表示方式。TrueType采用几何学中二次B样条曲线及直线来描述字体的外形轮廓。所以我们可以很方便地把字体轮廓转换成曲线，可以对曲线进行填充，制成各种颜色和效果，它可以进一步变形，制作特殊效果字体。

本文将通过使用stb_truetype这个开源的库来对ttf文件进行解析，取得顶点信息，然后通过opengl分格化（libtess），将顶点信息转为三角面片，最后通过opengl对其进行统一渲染。

stb_truetype基本API：

注意：在包含stb_truetype.h头文件的时候需要定义STB_TRUETYPE_IMPLEMENTATION，否则将会无法使用。

1. 初始化字体信息

mFile = new FileRead("STXIHEI.TTF");
mFontInfo = new stbtt_fontinfo;
stbtt_InitFont(mFontInfo, (unsigned char*)(mFile->getStream()), 0);

通过读取STXIHEI.TTF文件，取得当前文件的数据流，创建一个stbtt_fontinfo的对象，同于保存stbtt信息。接着调用stbtt_InitFont，来对文件进行解析，最后将信息保存在mFontInfo对象中。

2. 取得竖直方向上的度量

int ascent = 0; 
int descent = 0;
int lineGap = 0;
stbtt_GetFontVMetrics(mFontInfo, &ascent, &descent, &lineGap);
mLineHeight = ascent - descent + lineGap;

ascent即字体从基线到顶部的高度；descent即基线到底部的高度，正常为负值；lineGap即为行间距，两个字体之间的间距。所以真正两个字体之间的距离为 ascent - descent + lineGap，即为行间距，用于设置多行间字体的间隔。

3. 取得水平方向间距

int advance = 0;
int lsb = 0;
stbtt_GetCodepointHMetrics(mFontInfo, code, &advance, &lsb);

通过传入当前的字体的unicode编码，则可以获取当前字体的水平宽度。

4. 取得字体的缩放比

float scale = stbtt_ScaleForPixelHeight(mFontInfo, pixels);

返回的即为字体根据当前大小返回的缩放比：计算公式为 scale = pixels / (ascent - descent)；，pixels即为我们需要设置的字体的大小。

解析字体：

1. 创建一个opengl分格化的类：

Tessellation，具体可参考：Opengl分格化（libtess）移植与使用。

2. 通过字体的unicode取得当前字体的顶点信息：

stbtt_vertex* stbVertex = NULL;
int verCount = 0;
verCount = stbtt_GetCodepointShape(mFontInfo, code, &stbVertex);

函数返回顶点总数，顶点首地址保存在stbVertex指针对象中。

3. 顶点转换

void TrueType::_convert(void* stbVertex, int verCount)
{
	Vertex current;
	Vertex previous;

	mTess->beginPolygon();
	mTess->beginContour();
	for (int nIdx = 0; nIdx<verCount; nIdx++)
	{
		stbtt_vertex* stbVer = ((stbtt_vertex*)stbVertex+nIdx);
		switch (stbVer->type)
		{
		case STBTT_vmove:
			current.x = stbVer->x;
			current.y = stbVer->y;

			mTess->endContour();
			mTess->beginContour();
			break;

		case STBTT_vline:
			mTess->insertVertex(current);
			current.x = stbVer->x;
			current.y = stbVer->y;
			break;

		case STBTT_vcurve:
			{
				mTess->insertVertex(current);
				Vertex contrl;
				contrl.x = stbVer->cx;
				contrl.y = stbVer->cy;

				previous = current;

				current.x = stbVer->x;
				current.y = stbVer->y;
				
				//insert the middle point
				mTess->insertVertex(_getBezierPoint(previous, contrl, current, 0.5));
			}
			break;

		default:break;
		}
	}
	mTess->endContour();
	mTess->endPolygon();
}

如代码所示，分别对每个顶点进行遍历，ttf字体都是以直线或者二次贝塞尔曲线进行存储。主要有三种状态：
STBTT_vmove 移动，即当前不绘制，将当前的点移动到指定的位置。所以我们只要保持当前点即可，同时要结束上一次轮廓线的指定mTess->endContour();，同时开始下一次的轮廓线指定。
STBTT_vline 即绘制直线，即将上一次的顶点插入到轮廓线insertVertex，将当前的顶点保持。
STBTT_vcurve 即当前是绘制二次贝塞尔曲线。首先插入上次的顶点，接着取得当前贝塞尔曲线的控制点和顶点，此时有三个顶点，一个是上一次的顶点p0，一个是控制点p1，一个是当前的顶点p2。则通过二次贝塞尔曲线方程，则可计算曲线上的点。
y = (1-t)*(1-t)p0 + 2*t*(1-t)p1 + t*t p2;

对于精度要求比较高的，可以循环取得曲线上的点，我们这边则直接取得中点（t=0.5）。最后将取得的点插入到轮廓线中。

当全部的顶点都已经遍历结束后，调用mTess->endPolygon();，此时则将由opengl分割器进行分割。我们通过配置libtess来限制只将当前的信息分格为三角面片（GL_TRIANGLES），便于后面的绘制。最后将分格好的三角面片信息保存在Tessellation的mTessVertex中。

4. 优化操作

由于解析出的顶点很多是重复的（绘制所需），所以我们将对顶点数据进行优化，只保存不重复的顶点，对于重复的顶点则用索引的方式来进行绘制。从而提升opengl绘制的性能。

std::vector<Vertex>* tessVertex = mTess->getVertex();
std::vector<Vertex>::iterator iter = tessVertex->begin();
std::vector<Vertex>::iterator iterfind;

fontInfo->mIndicesSize = tessVertex->size();
fontInfo->mIndices = new GLuint[tessVertex->size()];

GLuint* indPoint = fontInfo->mIndices;
for (iter; iter != tessVertex->end(); iter++)
{
	int i = _findTheIndex(fontInfo->mVertexList, *iter);
	if (-1 != i)
	{
		*indPoint++ = i;
	}
	else
	{
		*indPoint++ = fontInfo->mVertexList.size();
		fontInfo->mVertexList.push_back(*iter);
	}
}

如上所示，创建一个FontInfo的结构体指针，用于保存字体信息：

struct FontInfo
{
	int mCode; //字体编码
	std::vector<Vertex> mVertexList; //顶点列表
	GLuint* mIndices; //索引数组
	GLuint mIndicesSize;//索引数组大小
};

通过上述方式，保存了当前的字的顶点数据和索引数据，最后保存在结构体指针fontInfo中。对于上述的优化至少能减少50%的顶点数，所以对于后续的渲染性能的提升还是很可观的，同时对于移动设备等，能够极大的减少系统的带宽和功耗。

OpenGL VBO渲染：

通过上面的方式，取得某一个字的顶点信息与索引信息后，接下来将通过opengl来对其进行渲染：
虽然每个问题经过优化后顶点数得到了较大的降低，但是多个文字绘制时，加起来也是很庞大的。所以我们将通过VBO的方式来保存要渲染的顶点数据和所以数据，从而不需要每次渲染都将数据上传到opengl内部。

1. 创建VBO

glGenBuffers(VBO_MAX, mVbo);

由于我们需要两个缓冲区，所以创建一个数组大小为2的mVbo，用于保存缓冲区索引。

2. 取得每个字的顶点和索引

std::vector<Vertex> vertexList;
std::vector<GLuint> indicesList;

int beginPos = 0;
int preCode = 0;
int fontDis = 0;
int fontHeight = 0;

if (mFontInfoList.empty())
{
	return ;
}

float nScale = mTrueType->getScaleForPixelHeight(mSize);

for (int fontIdx=0; fontIdx<mFontInfoList.size(); fontIdx++)
{
	if (mFontInfoList[fontIdx]->mCode == '\n')
	{
		fontHeight -= (mTrueType->getLineHeight()+mLineDis*mLineDis) * nScale;
		fontDis = 0;
		continue;
	}

	std::vector<Vertex>& vertex = mFontInfoList[fontIdx]->mVertexList;
	int verCount = vertex.size();
	beginPos = vertexList.size();		
	
	//every font vertex
	Vertex v;
	for (int i=0; i<verCount; i++)
	{
		v.x = vertex[i].x * nScale + fontDis + mPos.x;
		v.y = vertex[i].y * nScale + fontHeight + mPos.y;
		vertexList.push_back(v);
	}
	
	//indices
	for (int i=0; i < mFontInfoList[fontIdx]->mIndicesSize; i++)
	{
		indicesList.push_back(*(mFontInfoList[fontIdx]->mIndices+i) + beginPos);
	}		

	//font dis
	int fontWidth = mTrueType->getAdvance(mFontInfoList[fontIdx]->mCode);
	int kernDis = mTrueType->getKernAdvance(preCode, mFontInfoList[fontIdx]->mCode);
	fontDis += (fontWidth + fontDis + mDis*mDis)*nScale;
	preCode = mFontInfoList[fontIdx]->mCode;
}

如上代码所示，通过vertexList和indicesList来保存全部一次要绘制的文字的顶点和索引。同时通过计算字体的缩放和水平位置等来对每个字设定位置。

3. 绑定VBO

glBindBuffer(GL_ARRAY_BUFFER, mVbo[0]);
glBufferData(GL_ARRAY_BUFFER, vertexList.size()*sizeof(Vertex), &vertexList[0], GL_STATIC_DRAW);

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, mVbo[1]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, indicesList.size()*sizeof(GLuint), &indicesList[0], GL_STATIC_DRAW);

如上所示，分别绑定顶点数据和索引数据。

4. 绘制

GLuint vertPos = shader->getId("vertPosition", Type_Attribute);
glBindBuffer(GL_ARRAY_BUFFER, mVbo[0]);
glVertexAttribPointer(vertPos, 2, GL_FLOAT, GL_FALSE, 0, 0);
glEnableVertexAttribArray(vertPos);

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, mVbo[1]);
glDrawElements(GL_TRIANGLES, mIndicesCount, GL_UNSIGNED_INT, 0);

取得着色器中的顶点的索引，同时绑定vbo来设置顶点到着色器中，如上所示，只需要绑定vbo和设置顶点的组合方式即可，不需要再上传顶点数据（最后一个参数为0即可说明）。最后在绘制的时候通过调用glDrawElements来进行全部顶点数据的绘制。第一个参数为GL_TRIANGLES，说明我们的顶点都是以单独的三角形来绘制的。同时这边的第二个参数需要设置总的需要绘制的顶点数，即可完成绘制。
通过使用VBO，数据只需要在第一次的时候上传到opengl中的缓冲区中，接下来的绘制都不需要再次上传，只需要从opengl的缓冲区中去取得数据，能够较大的提升渲染的性能。