OpenGL显示文字

最新推荐文章于 2023-03-05 21:27:00 发布
最新推荐文章于 2023-03-05 21:27:00 发布
阅读量1.1w 收藏 43
点赞数 9
分类专栏： 文字显示 OpenGL 图形学 文章标签： 显示文字 FreeType OpenGL 字体平滑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlk1229/article/details/93400574
版权

阅读这篇文章前，可以先看一下这个文字显示系列的其他文章，了解一些字符编码，字体相关的知识：https://blog.csdn.net/wlk1229/article/category/9008450

 

显示文字

OpenGL提供的是图形API，本身并不提供文字处理方面的接口，如果想要显示文字就需要先将文字转化成图片，然后渲染图片。

Char Map

Char Map是最简单的方式，首先需要准备号一张图片，图片中包含了要显示的文字。显示文字时只需要从图片中截取相应的纹理就可以了。这种方式比较适合文字大小固定，显示字符比较少的情况，例如显示数字，只需要“0123456789”十个字符图片就行，有时还会需要“.,”。而且所有数字的宽度一般都是一样的，这对于截取纹理来说非常容易。如下就是一张数字图片：

 

有时我们不光需要数字，也会需要其他字符，可以使用Bitmap font软件导出相应的文字图片，软件界面如下图：

 

软件可以导出文字使用的字体，文字的大小，加粗，斜体等等。也可设置导出图片的格式，文字之间的间隔等等，如下两张图片。

   

在设置导出图片时，有一个导出文字的描述文件“Font descriptor”的选项，这是因为为了提高导出的图片的利用率，文字会紧密排列在图片中，为了知道每个文字在图片中的位置就需要，一个单独的文件来描述。如下，是导出的图片，和相应的描述文件：

描述文件是一个“*.fnt”后缀名的文件，可以直接用记事本打开，从这个文件中可以知道文字的行高“lineHeigt”,字符的Unicode编码“id”,字符宽度“xadvance”,以及字符纹理在导出图片中的位置和长宽等等。有了这些信息，加上导出的图片就可以显示文字了。

 

FreeType解析字体

虽然Char Map的方式可以很好的显示文字，但有一定局限，1.显示的文字有限，对于英文来说字符比较少，可以用一张图片把所有字符打包，但是对于中文，要把所有字符全部打包就不是那么容易了，一般情况下只打包用到的字符；2.字体是固定的，文字的大小也是固定的，如果想更换字体则需要重新打包生成图片。Char Map本身只适合一些固定文字的显示，如果文字内容会变化，或者需要改变字体则不适合。

 

显示文字完全可以通过解析字体文件，然后获取字体的图片，完成文字显示。只要我们有字体文件，字体文件中包含了我们要显示的文字（一般中文字体会包含所有要显示的字符），可以通过FreeType解析字体文件，获取相应的字符图片。通过FreeType解析字体，可以随意更换要显示文字的字体，也可以改变文字的大小等等。

 

通过FreeType这个库可以很容易的从字体文件中获取到字符的位图。FreeType是一个C语言的库，支持各个平台，其提供了CMake编译，可以通过CMake软件转换成VS的工程，这里我已经编译好了VS2015中FreeType静态库的Debug和Release版本。

 

FreeType使用也比较简单，这里给一个字符的大致步骤，详细的可以参考官方文档。

  1. 调用FT_Init_FreeType初始化FreeType库
  2. 调用FT_New_Face使用字体文件创建字体
  3. 调用FT_Select_Charmap设置映射字符编码，默认字符编码是Unicode，通常不用设置，因为大部分字体只支持Unicode和一种Apple平台的老编码。
  4. 调用FT_Set_Char_Size设置字符大小，设置字体大小时要设置字号和DPI，字号和平时用Word中字号类似，DPI是指显示设备像素密度，一般电脑显示器DPI在100左右，而手机在300左右，两者共同决定导出位图的大小。
  5. 调用FT_Set_Transform设置字体的缩放旋转和排版位置。如果想自己控制排版位置，一般可以省略这个步骤。
  6. 调用FT_Load_Char获取文字的位图信息，默认获取的是8位色深的位图，即每个字节代表一个像素。
  7. 使用位图绘制就可以显示文字了。

 

字体缓存

通常显示文字的时候都会有好多字符，如果每次显示文字的时候去获取一次位图，然后创建纹理，这样的效率太低。显示文字的时候会有很多重复的字符，同一个字符纹理只需要获取一次就行；另外如果每个字符创建一个纹理，这会导致创建好多纹理，所以需要一张大的纹理把需要显示的文字打包起来。因为所有显示的文字都在一个纹理中，显示文字的时候可以通过一次调用glDrawArrays渲染一个字符串，大大提高渲染效率。

缓存字体时需要注意以下几个问题

  1. 因为像素坐标是整数，OpenGL中纹理坐标是浮点数，为了防止像素挨得太近，导致显示字符的时候出现其他字符的像素，字符之间需要留一定的空隙。
  2. OpenGL在设置纹理数据时默认是4字节对齐，而FreeType获取的是8bit位图，每个像素只有1个字节，所以需要将纹理数据对其设为一个字节，需要调用glPixelStorei(GL_UNPACK_ALIGNMENT, 1)函数。
  3. 更新字体纹理缓存中的字符是可以通过函数glTexSubImage2D只更新一个字符的数据。
  4. OpenGL中纹理坐标是以坐下角为原点，Y轴是从下到上，而FreeType获取的位图图原点是左上角，Y轴是从上到下，与OpenGL相反，所以纹理缓存中的纹理实际如下：

 

文字边框

FreeType获取的位图是一张刚好包只含文字的位图，不包含左右上下的空白信息。如果绘制文字时直接把每一张位图连接在一起，文字则会一个粘一个，不利于阅读，正常显示的文字上下左右都会有一定的间距。

如上图外面的大矩形框是显示中字时需要的位置，内部红色框是FreeType获取的位图。为了正确显示文字，需要六个位置信息，图中的Height、Width、OffsetX、OffsetY已经位图的长宽。

这六个信息可以通过以下方式获得：

  1. Height，当调用完FT_Set_Char_Size后，所有字符的高度都是一样的，在FT_Set_Char_Size设置文字大小后，可以通过fontFace->size->metrics.height/64获得，除以64说因为FreeType获取的字体高度单位的原因。
  2. Width，当调用完FT_Load_Char后，可以通过fontFace->glyph->advance.x/64，也需要除以64。
  3. OffsetX，当调用完FT_Load_Char后，为fontFace->glyph->metrics.horiBearingX/64。
  4. OffsetY，当调用完FT_Load_Char后，为(fontFace->size->metrics.height + fontFace->size->metrics.descender - fontFace->glyph->metrics.horiBearingY)/64。
  5. Bitmap宽，当调用完FT_Load_Char后，为fontFace->glyph->bitmap.width。
  6. Bitmap高，当调用完FT_Load_Char后，为fontFace->glyph->bitmap.rows。

以上数据主要根据FreeType文档中的这张图片获得：

其他请参考，FreeType文档。

 

除了以上信息，对于每个字符，渲染文字时还需要保存字符纹理在字体缓存纹理中的位置，所以总共需要8个位置信息，我使用了以下结构体存储：
 

struct CharGlyphRect
{
	int width, height; //字符的宽高
	int offsetX, offsetY; // 字符纹理在字符矩形中的偏移量, 坐标系为X从左到右，Y从上到下
	int texWidth, texHeight; // 字符纹理的宽高
	int texX, texY; //字符在缓存大纹理中的位置, 坐标系为X从左到右，Y从上到下
	CharGlyphRect() :texWidth(0), texHeight(0), width(0), height(0), offsetX(0), offsetY(0), texX(0), texY(0) {}
};

为了保存所有已缓存的字符，需要使用一个map，map<wchar_t, CharGlyphRect> CharCache。

 

渲染文字

渲染文字时我们需要渲染一个矩形，如下图时渲染的文字与其对应的矩形：

渲染的矩形并不是紧挨着的，以为我们的文字纹理只是刚好包含的字符的纹理，没有包括空隙，这个空隙需要我们自己控制。为了一次渲染多个文字，而文字渲染的矩形又不是紧挨着，所以不能使用GL_TRIANGLE_STRIP，只能使用GL_TRIANGLES。一个矩形需要两个三角形，所以需要六个点，六个点的坐标设置如下：
 

	const auto& glyphRect = CharCache[str[i]];

	int x = currentX + glyphRect.offsetX;
	int y = currentY - glyphRect.offsetY;

	int texX = glyphRect.texX;
	int texY = glyphRect.texY;
		 
	//以下坐标是渲染时的NDC坐标
	//左上角
	verts[i * 6].pos[0] = PerPixelWidth * x;
	verts[i * 6].pos[1] = PerPixelHeight * y;
	verts[i * 6].texPos[0] = texX / static_cast<float>(CharCacheWidth);
	verts[i * 6].texPos[1] = texY/ static_cast<float>(CharCacheHeight);

	//左下角
	verts[i * 6 + 1].pos[0] = PerPixelWidth * x;
	verts[i * 6 + 1].pos[1] = PerPixelHeight * (y - glyphRect.texHeight);
	verts[i * 6 + 1].texPos[0] = texX / static_cast<float>(CharCacheWidth);
	verts[i * 6 + 1].texPos[1] = (texY + glyphRect.texHeight) / static_cast<float>(CharCacheHeight);

	//右上角
	verts[i * 6 + 2].pos[0] = PerPixelWidth * (x + glyphRect.texWidth);
	verts[i * 6 + 2].pos[1] = PerPixelHeight * y;
	verts[i * 6 + 2].texPos[0] = (texX + glyphRect.texWidth) / static_cast<float>(CharCacheWidth);
	verts[i * 6 + 2].texPos[1] = texY / static_cast<float>(CharCacheHeight);

	//右上角
	verts[i * 6 + 3].pos[0] = PerPixelWidth * (x + glyphRect.texWidth);
	verts[i * 6 + 3].pos[1] = PerPixelHeight * y;
	verts[i * 6 + 3].texPos[0] = (texX + glyphRect.texWidth) / static_cast<float>(CharCacheWidth);
	verts[i * 6 + 3].texPos[1] = texY  / static_cast<float>(CharCacheHeight);

	//左下角
	verts[i * 6 + 4].pos[0] = PerPixelWidth * x;
	verts[i * 6 + 4].pos[1] = PerPixelHeight * (y - glyphRect.texHeight);
	verts[i * 6 + 4].texPos[0] = texX / static_cast<float>(CharCacheWidth);
	verts[i * 6 + 4].texPos[1] = (texY + glyphRect.texHeight) / static_cast<float>(CharCacheHeight);

	//右下角
	verts[i * 6 + 5].pos[0] = PerPixelWidth * (x + glyphRect.texWidth);
	verts[i * 6 + 5].pos[1] = PerPixelHeight * (y - glyphRect.texHeight);
	verts[i * 6 + 5].texPos[0] = (texX + glyphRect.texWidth) / static_cast<float>(CharCacheWidth);
	verts[i * 6 + 5].texPos[1] = (texY + glyphRect.texHeight) / static_cast<float>(CharCacheHeight);

	currentX += glyphRect.width;

平滑字体

文字显示中有大量的曲线，如果要显示清晰的文字必须要让曲线看上去非常平滑，不能出现锯齿。

FreeType默认获取的位图是一个8bit的位图，每个像素只有一个字节，这是一种256度灰阶图。正是这个8位的位图可以让显示的字符具有反走样的能力，可以显示平滑清晰的文字。在OpenGL中最常用的一种抗锯齿反走样方式就是利用透明来进行反走样，具体原理参考。因为FreeType提供的是灰阶图，所以可以设置一个文字颜色，然后把这个灰阶设为像素的透明度，这样显示的文字可以非常平滑，没有锯齿。

片元着色器如下：

#version 430

layout(location= 2) uniform sampler2D tex; //缓存字体纹理

layout(location= 3) uniform vec3 color; //文字颜色

 

out vec4 outColor;

in vec2 texCoord;

void main()

{

    float a = texture(tex, texCoord).r;

    outColor = vec4(color, a);

}

 

在绘制的时候，因为要使用透明，所以需要开启融合，代码如下：

glActiveTexture(GL_TEXTURE0);

glBindTexture(GL_TEXTURE_2D, CharCacheTex);

glUniform1i(2, 0);

glUniform3fv(3, 1, _color); //设置文字颜色

 

glEnable(GL_BLEND);

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);//设置融合函数

 

glBindVertexArray(_vao);

glDrawArrays(GL_TRIANGLES, 0, _vertCount);

glDisable(GL_BLEND);

 

以下是一个完整的例子，VS2017代码下载地址：

 

KyleWlk
关注
专栏目录
八、OpenTK中的纹理操作(万字详细教程)
仰望星空的博客
08-21 701
  在图形渲染中，纹理可以从图像文件加载。通常使用图像处理库来读取图像文件的像素数据，并将其上传到 GPU 作为纹理。在 C# 中，可以使用一些第三方库（如 System.Drawing.Common 或 SixLabors.ImageSharp）来读取图像文件。首先，读取图像文件并获取其像素数据。然后，创建一个纹理对象，并使用 GL.TexImage2D 函数将像素数据上传到 GPU。同时，需要设置纹理的参数，如过滤模式和环绕模式。   以下是一个从 PNG 图像文件加载纹理的 C# 示例代码： （二）生
使用freetype于opengl显示汉字（g引擎）
06-20
使用freetype于opengl显示汉字 改编的东西 :)
OpenGL: 文本的显示
Augusdi的专栏
05-22 3746
---- 本文详细讨论了在OpenGL中显示文本的几种方法。----也许大多数程序员使用OpenGL更多的是将精力集中于动 态三维图形应用，因此，OpenGL中的文本显示往往被忽视，使人有不见积薪之感。本文 介绍了几种文本显示的方法，希望能对使用OpenGL的编程者有所帮助。建立并修改程序----建立一个MFC SDI Windows应用工程Text，除单文档属 性外，使用其他的所有默认选择。在菜
OpenGL,显示汉字
10-30
OpenGL并没有直接提供显示文字的功能，并且，OpenGL也没有自带专门的字库。因此，要显示文字，就必须依赖操作系统所提供的功能了
转载:OpenGL显示文字
zdw624ma
01-17 263
转载:OpenGL显示文字 2010年07月03日 　　本课我们来谈谈如何显示文字。 　　OpenGL并没有直接提供显示文字的功能，并且，OpenGL也没有自带专门的字库。因此，要显示文字，就必须依赖操作系统所提供的功能了。 　　各种流行的图形操作系统，例如Windows系统和Linux系统，都提供了一些功能，以便能够在OpenGL程序中方便的显示文字。 　　最常见的方法就是，我们...
opengl显示文字
热门推荐
编程小生的专栏
10-12 1万+
在目前的项目中因为有涉及到OpenGL文字输出之类的操作，于是做了一个总结，并把一个库进行了改进，在这里贴出来，希望大家能够在将来的编程中省去一些写细节代码的时间，同时也是抛砖引玉。 首先，要注明的是唐明理先生的开源库还有OpenGL资料是相当宝贵的，也是我见过的许多资料中最好的，如果初学者有了一定的应用水平，看他的这些东西，提高会是飞速的，而且会顺利过渡到框架开发的思维。我们做游戏与图像编程，
opengl文字显示（一）
shanzhizi的专栏
08-13 8260
线贴一个简单可用的opengl文字显示调用函数 opengl文字显示大致三步： 1，创建字体 2，输出打印 3，删除字体 1，创建字体的函数： /* * BuildFont * 创建位图字体 */ GLvoid BuildFont(GLvoid) { HFONT font; // 字体句柄 HFONT oldfont; bas
OpenGL -文字
weixin_45054115的博客
09-11 2549
OpenGL 文字
OpenGL下文字的显示.rar_C# 矢量文字_OPENGL位图_OpenGL显示文字_opengl文字_位图 矢量
09-23
在OpenGL中，显示文字是一项重要的任务，尤其在开发用户界面或者进行数据可视化时。本资源主要关注如何在OpenGL环境下用C#实现中英文文字的显示，包括位图文字和矢量轮廓文字两种方法。 位图文字是将每个字符编码为...
GTK4+OpenGl显示文字
04-17
综上所述，结合GTK4、OpenGL和FreeType2来显示文字是一种常见的技术手段，它利用了GTK4的GUI能力，OpenGL的高性能渲染，以及FreeType2的字体处理能力，实现了高质量、灵活的文本显示。在实际项目中，开发者可以根据...
Windows_fonts.rar_OpenGL显示文字
09-14
在Windows系统中显示文字的opengl教程
QtOpenGL文字显示
08-23
Qt版的OpenGLDemo，其中包含透视投影，纹理贴图，文字显示，反锯齿。
opengl显示汉字
03-30
可以在opengl下很好地显示汉字，包括3D文字等
C++下的OpenGL文字显示的完美解决方案
03-15
NULL 博文链接：https://kungsoft.iteye.com/blog/318875
OpenGL: 文本显示
Augusdi的专栏
05-25 4819
用wglUseFontBitmaps当然可以写汉字,不过我使用的是wglUseFontBitmapsW版本    #include   "comutil.h"    void   DrawString(int   x,int   y,char*   strText)    {    int   xx=m_FontColor;    float   r=GetRValue(m_FontColor)/
opengl学习之显示文字
干啥啥不行，但是也要干的博客
04-04 2441
本课我们来谈谈如何显示文字。 OpenGL并没有直接提供显示文字的功能，并且，OpenGL也没有自带专门的字库。因此，要显示文字，就必须依赖操作系统所提供的功能了。 各种流行的图形操作系统，例如Windows系统和Linux系统，都提供了一些功能，以便能够在OpenGL程序中方便的显示文字。 最常见的方法就是，我们给出一个字符，给出一个显示列表编号，然后操作系统由把绘制这个字符的OpenGL命令装...
opengl文字显示（二）
shanzhizi的专栏
08-13 2768
（一）显示英文 OpenGL并没有直接提供显示文字的功能，并且，opengl也没有自带专门的字库。因此，要显示文字，就必须依赖操作系统所提供的功能了。 各种流行的图形操作系统，例如Windows系统和Linux系统，都提供了一些功能，以便能够在OpenGL程序中方便的显示文字。 最常见的方法就是，我们给出一个字符，给出一个显示列表编号，然后操作系统由把绘制这个字符的OpenGL命令装到指定的
【转】【OpenGL】OpenGL显示文字--显示汉字
kakarrot2009的专栏
03-05 540
OpenGL显示文字--显示汉字 原则上，显示中文和显示英文并无不同，同样是把要显示的字符做成显示列表，然后进行调用。但是有一个问题，英文字母很少，最多只有几百个，为每个字母创建一个显示列表，没有问题。但是汉字有非常多个，如果每个汉字都产生一个显示列表，这是不切实际的。我们不能在初始化时就为每个字符建立一个显示列表，那就只有在每次绘制字符时创建它了。当我们需要绘制一个字符时，创建对应...
OpenGL显示文字--显示汉字
Wadejr的专栏
11-23 4545
本文转自：http://blog.sina.com.cn/s/blog_4ff085000100dew0.html   原则上，显示中文和显示英文并无不同，同样是把要显示的字符做成显示列表，然后进行调用。 但是有一个问题，英文字母很少，最多只有几百个，为每个字母创建一个显示列表，没有问题。但是汉字有非常多个，如果每个汉字都产生一个显示列表，这是不切实际的。 我们不能在初始化时就为每个字符建
Qt OpenGL 显示文字
最新发布
05-26
在Qt中使用OpenGL显示文字可以通过使用QOpenGLWidget和QOpenGLFunctions类实现。以下是一个简单的示例： 首先，在你的Qt项目中添加一个QOpenGLWidget控件，并在其构造函数中启用OpenGL功能： ``` MyGLWidget::MyGLWidget(QWidget *parent) : QOpenGLWidget(parent) { // 启用OpenGL功能 initializeOpenGLFunctions(); } ``` 接下来，你需要编写一个代码片段来生成一个纹理，该纹理包含所需的文本。你可以使用Qt的QPainter类将文本渲染到QImage中，并使用QOpenGLFunctions类将其转换为OpenGL纹理。以下是一个示例： ``` void MyGLWidget::createTextTexture() { // 创建QImage并使用QPainter将文本渲染到其中 QImage textImage(256, 256, QImage::Format_RGBA8888); textImage.fill(Qt::transparent); QPainter painter(&textImage); painter.setPen(Qt::white); painter.setFont(QFont("Arial", 24)); painter.drawText(textImage.rect(), Qt::AlignCenter, "Hello, world!"); // 将QImage转换为OpenGL纹理 glGenTextures(1, &m_textTexture); glBindTexture(GL_TEXTURE_2D, m_textTexture); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, textImage.width(), textImage.height(), 0, GL_RGBA, GL_UNSIGNED_BYTE, textImage.constBits()); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); } ``` 现在，你需要在OpenGL上下文中绘制纹理。在QOpenGLWidget的paintGL()函数中，你可以使用QOpenGLFunctions类启用纹理映射，并使用glBindTexture()将纹理绑定到当前的纹理单元。然后，你可以使用glBegin()和glEnd()函数绘制一个矩形，并将纹理坐标与顶点坐标一起传递给OpenGL。以下是一个示例： ``` void MyGLWidget::paintGL() { // 启用纹理映射 glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, m_textTexture); // 绘制矩形并绑定纹理坐标 glBegin(GL_QUADS); glTexCoord2f(0.0f, 0.0f); glVertex2f(-1.0f, -1.0f); glTexCoord2f(1.0f, 0.0f); glVertex2f(1.0f, -1.0f); glTexCoord2f(1.0f, 1.0f); glVertex2f(1.0f, 1.0f); glTexCoord2f(0.0f, 1.0f); glVertex2f(-1.0f, 1.0f); glEnd(); } ``` 现在，你已经可以在Qt中使用OpenGL显示文字了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值