在OpenGL ES 2中绘制文本的正确方法

时间:2012-08-01 02:15:09

标签: android iphone c++ opengl-es-2.0 bitmap-fonts

我正在使用PowerVR OpenGL ES 2 SDK在Windows上用C ++开发我的游戏然后我可以将它移植到android或iphone。

一切看起来都不错但我现在仍然坚持使用文字渲染。我找不到任何关于使用C ++在OpenGL ES 2.0中渲染文本(使用TTF或Bitmap字体)的详细教程。 我发现很多话题都是关于使用java或objective-c(带有textview,surfaceview或者某些等等)在android或iphone上渲染文本的话题,但我不认为这就是我需要的东西。我需要一个“跨平台解决方案”。 (或者在这一点上我可能错了?)

经过一番研究,我脑子里有了解决方案:

加载并绑定位图字体纹理 - > 解析文本并生成和绑定顶点数组,使用uv数组映射纹理,... - > 将其渲染到屏幕

我还没有测试,但我认为使用我的解决方案时出现问题:当我想要更改文本时(例如:我正在制作用户评分或屏幕上的计时器)我必须重新绑定顶点数组和uv数组,这不是一个好主意,对吧?

有没有更好的方法/正确的方法在OpenGL ES 2屏幕上绘制位图字体?

3 个答案:

答案 0 :(得分:4)

您提到的解决方案是要走的路,事实上,如果您修改文本,则必须重新创建代表它的几何体,然后重新提交给OpenGL。

这个娱乐步骤需要一些时间,但肯定不会过多。

对于渲染文本,问题有两个主要组成部分:

  • 创建纹理图集位图
  • 使用此纹理绘制文本,考虑字体指标(大小,字距调整等)和可能的子像素抗锯齿

要创建纹理图集,您可以找到一些代码(可能使用freetype)或使用现有工具(例如AngleCode's bmfont)。

对于绘图,您可能希望根据一些现有代码推出自己的代码,因为有很多细节可以获得好看的文本。要开始您的头痛,您可以查看this article

一个很好的现代灵感来源可能是Nicolas Rougier's freetype-gl代码。

答案 1 :(得分:2)

文本渲染是大多数新人迟早需要在3D图书馆世界中面对的主题之一。

互联网上有很多关于文本渲染的教程,很多书都在谈论它。我的建议是环顾四周并尝试了解它们的工作原理。

TTF字体不是一个可行的解决方案,因为在实时计算场景(如计算机游戏)中,基于几何的TTF技术耗费太多资源。

一个非常常见的解决方案(例如我在我的PATRIA 3D引擎中使用的解决方案)是使用包含不同字符的字形的纹理图集,然后您的应用程序逻辑需要处理文本 - >字形位置关系用于构成最终“屏幕文本”的四边形纹理。

文字渲染不是一个简单的主题,因为它涉及的主题是字距调整/间距/不同的文字大小等。

尝试按照此链接最好地理解主题(如果我没有错,则此Wiki的作者是此社区的活跃成员)。

http://en.wikibooks.org/wiki/OpenGL_Programming/Modern_OpenGL_Tutorial_Text_Rendering_01

答案 2 :(得分:0)

在游戏中绘制文本的正确方法是使用带有包含距离字段的字形的纹理图集:https://www.mapbox.com/blog/text-signed-distance-fields/

另请参阅来自Valve(Half-Life和Portal的创建者)的Siggraph论文,描述该技术的变体:http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

基于距离字段的文本质量远高于基于纯文本位图的文本。它还使用较少的内存,因为距离场小于字体的逐字位图表示。