FreeType OpenGL动态文字=糟糕的表现

时间:2015-06-04 13:22:12

标签: c++ opengl freetype

我目前正在搜索代码中的瓶颈,结果发现GUI就是其中之一。好吧,实际上不是GUI,而是绘制在那里的动态文本。

初​​始化

        if (FT_Init_FreeType(&m_FreeType))
            throw Helpers::ExceptionWithMsg("Could not init freetype lib");

        if (FT_New_Face(m_FreeType, "res\\fonts\\FreeSans.ttf", 0, &m_FontFace))
            throw Helpers::ExceptionWithMsg("Could not open font");

        m_ShaderID = ... // Loads the corresponding shader
        m_TextColorLocation = glGetUniformLocation(m_ShaderID, "color");
        m_CoordinatesLocation = glGetAttribLocation(m_ShaderID, "coord");

        glGenBuffers(1, &m_VBO);

        FT_Set_Pixel_Sizes(m_FontFace, 0, m_FontSize);
        glyph = m_FontFace->glyph;

        glGenTextures(1, &m_Texture);

        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, m_Texture);

        // We require 1 byte alignment when uploading texture data 
        glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

        // Linear filtering usually looks best for text 
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

        // Clamping to edges is important to prevent artifacts when scaling 
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

        glUseProgram(m_ShaderID);
            glUniform4f(m_TextColorLocation, m_TextColor.x, m_TextColor.y, m_TextColor.z, m_TextColor.w);
        glUseProgram(0);

我的所作所为:我初始化FreeType,获取字体,初始化着色器和所有制服。

然后我为textureCoordinates创建vbo,设置字体的像素,获取字形。

现在我生成纹理,激活它,绑定它......我想设置所有参数,然后设置永不改变的制服。

渲染:

    glUseProgram(m_ShaderID);

    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, m_Texture);

    // Linear filtering usually looks best for text 
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

    // Set up the VBO for our vertex data 
    glEnableVertexAttribArray(m_CoordinatesLocation);
    glBindBuffer(GL_ARRAY_BUFFER, m_VBO);
    glVertexAttribPointer(m_CoordinatesLocation, 4, GL_FLOAT, GL_FALSE, 0, 0);

    GLfloat cursorPosX = m_X;
    GLfloat cursorPosY = m_Y;
    for (size_t i = 0; i < m_Text.size(); ++i)
    {
        // If Loading a char fails, just continue
        if (FT_Load_Char(m_FontFace, m_Text[i], FT_LOAD_RENDER))
            continue;

        glTexImage2D(GL_TEXTURE_2D, 0, GL_ALPHA, glyph->bitmap.width, glyph->bitmap.rows, 0, GL_ALPHA, GL_UNSIGNED_BYTE, glyph->bitmap.buffer);

        // Calculate the vertex and texture coordinates 
        GLfloat x2 = cursorPosX + glyph->bitmap_left * m_SX;
        GLfloat y2 = -cursorPosY - glyph->bitmap_top * m_SY;
        GLfloat w = glyph->bitmap.width * m_SX;
        GLfloat h = glyph->bitmap.rows * m_SY;

        PointStruct box[4] =
        {
            { x2, -y2, 0, 0 },
            { x2 + w, -y2, 1, 0 },
            { x2, -y2 - h, 0, 1 },
            { x2 + w, -y2 - h, 1, 1 }
        };

        // Draw the character on the screen
        glBufferData(GL_ARRAY_BUFFER, sizeof box, box, GL_DYNAMIC_DRAW);
        glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

        // Advance the cursor to the start of the next character 
        cursorPosX += glyph->advance.x / 64 * m_SX;
        cursorPosY += glyph->advance.y / 64 * m_SY;
    }

    glDisableVertexAttribArray(m_CoordinatesLocation);
    glDeleteTextures(1, &m_Texture);
    glDisable(GL_BLEND);
    glUseProgram(0);

设置着色器和东西很明显。

对于每个渲染调用,我激活纹理,绑定它,启用VBO我存储我的textureCoordinates。然后我迭代文本中的每个字符加载FT_LOAD_CHAR。 然后我用glTexImage2D指定纹理,计算顶点和纹理坐标并绘制所有内容。

这似乎非常低效,但我发现没有办法提高性能,但却有可读的文字。

我想在init中设置一次文本参数 - &gt;所有的字符都是盒子。

我想将GL_DYNAMIC_DRAW设置为GL_STATIC_DRAW ......差别不大。 我还能做什么?

我渲染的文字是动态的,它会改变(或可能会改变)每一帧,所以我有点卡住了。

我用查询查询这些东西的性能。如果我不渲染动态文本它非常低,但是如果我渲染动态文本它会变得非常高......在这个过程中没有太多其他内容,它只是绘制了GUI。

真正困扰我的是什么

我真的不明白(可能是阳光灿烂的日子......)

如果我没有在render-method()中设置线性过滤,我会得到奇怪的立方体字形,但为什么会这样? OpenGL是一个状态机,纹理参数设置为当前绑定的一个。因此,如果我在初始化时将Min和Mag滤波器设置为GL_LINEAR,为什么还不够呢?

如果我删除渲染中的那两行,我会从查询中获得更好的性能(更低的数字),但它没有绘制任何可读的内容。

3 个答案:

答案 0 :(得分:4)

这绝对会很慢。

  

对于每个渲染调用,我激活纹理,绑定它,启用VBO我存储我的textureCoordinates。然后我迭代文本中的每个字符加载FT_LOAD_CHAR。然后我用glTexImage2D指定纹理,计算顶点和纹理坐标并绘制所有内容。

遗憾的是,这个问题很难实现。这是我使用的方法:

  • 有一种格式,GL_RED8格式,用于存储字形。

  • 每当需要新的字形时,它都会添加到纹理中。这是通过调用FT_Render_Glyph()并将结果复制到纹理缓冲区来完成的。如果新字形不适合,则调整整个字形纹理的大小并重新打包。 (我使用天际线算法打包字形,因为它很简单。)

  • 如果添加了任何新字形,请拨打glTexSubImage2D()。代码应该是结构化的,这样每帧只调用一次。

  • 为了渲染文本,我创建了一个VBO,其中包含渲染一段文本所需的所有四边形的顶点和纹理坐标。 (请理解&#34; quad&#34;表示两个三角形,而不是GL_QUAD)。

因此,当您更改要渲染的文本时,

  • 您必须更新VBO,但每帧只更新一次

  • 您可能需要更新纹理,但每帧只需更新一次,这可能不会经常发生,因为字形纹理会填满您使用的字形。

对这种系统进行原型设计的一个好方法是首先将字体中的所有字体渲染到纹理中,但如果您最终使用多个字体,则效果不佳字体和样式,或者如果要渲染中文,韩文或日文文本。

其他考虑因素包括换行符,字形替换,字距调整,双向,国际文本的一般问题,如何指定样式等等。我建议将HarfBuzz与FreeType结合使用。 HarfBuzz处理困难的字形替换和定位问题。如果您的程序只有英文文本,则这些都不是绝对必要的。

有些库可以完成所有这些,但我还没有使用它们。

另一种方法,如果你想削减gordian结,就是在你的应用程序中嵌入一个像Chromium(Awesomium,W​​ebKit,Gecko-many选项)这样的Web浏览器,并将所有文本渲染到那个。

答案 1 :(得分:1)

你的瓶颈可能是许多平局电话。首先,缓冲绘制例程中的纹理:改为提供一个纹理,您可以将字符映射到四边形位置,然后替换以下内容:

    // Calculate the vertex and texture coordinates 
    GLfloat x2 = cursorPosX + glyph->bitmap_left * m_SX;
    GLfloat y2 = -cursorPosY - glyph->bitmap_top * m_SY;
    GLfloat w = glyph->bitmap.width * m_SX;
    GLfloat h = glyph->bitmap.rows * m_SY;

    PointStruct box[4] =
    {
        { x2, -y2, 0, 0 },
        { x2 + w, -y2, 1, 0 },
        { x2, -y2 - h, 0, 1 },
        { x2 + w, -y2 - h, 1, 1 }
    };

    // Draw the character on the screen
    glBufferData(GL_ARRAY_BUFFER, sizeof box, box, GL_DYNAMIC_DRAW);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

使用预处理文本的代码,生成一个更大的PointStruct缓冲区(不要忘记为查找纹理调整纹理坐标)并在每次绘制调用时绘制多个字符。

答案 2 :(得分:1)

有两种简单的方法可以提高性能。

  1. 创建一个纹理,其中包含您需要在设置偏移处渲染的所有字符。然后,您的文本字符串将成为一个模型(缓冲区对象),它将引用正确的偏移系列以创建文本字符串。这样做的缺点是你无法进行字距调整或任何其他花哨的字体连接。
  2. 使用PangoCairo将文字完全呈现为单个位图。此位图将使用正确的字距调整和连接格式化文本。然后,您只需为整个文本输出上传和绘制单个纹理。