c - 使用 OpenGL 缩放和翻译 2D 文本

Question

我尝试使用 OpenGL 在 UI 元素中绘制文本，但计算比例失败和正确的不同字体大小的翻译值，这样文本就会很好地融入指定区域。这是我第一次尝试做这样的事情，它似乎有效，直到我注意到随着字体大小的增加，文本将不再适合计算的区域。我不被允许附上图像来直观地表达我的意思，这是非常可悲的。

首先我认为这可能是由于按顺序四舍五入缩放字体宽度引起的计算框架所需的宽度，但无法验证这一点。经过多次尝试和错误，我什至不再确定这是否是文本投影不正确，或者我试图将文本放入的框架。

请查看并帮助我找到错误，以下是我所做的概述:

我通过传递特定的字体大小(以像素为单位)来构建 UI 元素。对于一个最多可以容纳n个字符的框架(例如输入框)计算如下所示:

- Get the width (in pixels) of a single character:
    x_advance and line_height are given by the fonts glyph description.
    Since i use mono spaced fonts i treat the x_advance as character width.

    font_oo_aspect      = 1 / ( x_advance / line_height )
    font_width          = roundf( font_size / font_oo_aspect )

- Computing the actual frame dimension + some margin:

    frame_height        = font_size + 2 * vertical pad
    frame_width         = n * font_width + 2 * horizontal_pad

    The x and y location in pixels of the frames top left corner
    are set to be relative to its parents top left corner.

渲染 UI 元素时，首先绘制所有框架，然后绘制文本。

- Computing scale and translation for a frame:
    ortho_scale_x       = 2 / window_width
    ortho_scale_y       = -2 / window_height
    wo2                 = frame_width * 0.5
    ho2                 = frame_height * 0.5
    dx                  = parent_x + location_x + wo2
    dy                  = parent_y + location_y + ho2

    scale_x             = ortho_scale_x * wo2
    scale_y             = ortho_scale_y * ho2
    translation_x       = dx / wo2
    translation_y       = dy / how

- Computing scale and translation for a text:

    view_aspect         = window_width / window_height
    font_scale          = line_height / ( view_aspect * font_size )

    scale_x             = ortho_scale_x * font_scale
    scale_y             = -ortho_scale_y * font_scale
    translation_x       = frame_location_x / font_scale
    translation_y       = -frame_location_y / font_scale

相应的缩放和平移值被发送到着色器。以下是帧和文本的顶点着色器代码:

    #version 130
    in vec2 vertex;
    in vec2 uv;
    uniform vec2 scale;
    uniform vec3 translation;
    out vec2 coords;
    void main( void ) {
        gl_Position = vec4(
            ( translation.x + vertex.x ) * scale.x - 1.0,
            ( translation.y + vertex.y ) * scale.y + 1.0,
            translation.z, 1.0 );
        coords = uv;
    }

我希望我提供了所有相关信息，如果没有，请告诉我。问候和感谢，阿尔弗雷德

遵循框架和文本的渲染函数:

    // The buffer object data that frames use looks like this:
    float quad_data[ ] = { // x, y, u, v
         1.0f, -1.0f, 1.0f, 0.0f,   // bottom right
         1.0f,  1.0f, 1.0f, 1.0f,   // top right
        -1.0f,  1.0f, 0.0f, 1.0f,   // top left
        -1.0f, -1.0f, 0.0f, 0.0f    // bottom left
    };

    // Each text element is rendered as an individual vertex array object.            
    void render_frame_batches( void ) {
        int i, j;
        float f_font_size = 12; // 28;
        const float h = core.settings.height;
        const float sx = core.perspective.ortho_scale_x;
        const float sy = core.perspective.ortho_scale_y;
        const float view_aspect = core.perspective.view_aspect;
        float dx, dy, layer, wo2, ho2;

        Ui_Frame_Renderer *frame_renderer = &core.renderer.queue[ 0 ];
        Ui_Render_Batch_Frame *batch = frame_renderer->batch;
        Ui_Render_Target_Frame *target;
        Ui_Shader *p = &core.programs[ PROGRAM_FRAME ];
        const s16 *uni_loc = p->uniform_locations;

        glActiveTexture( GL_TEXTURE0 );
        glUseProgram( p->program_id );
        glUniform1i( ( s32 ) uni_loc[ LOC_U_TEXTURE0 ], 0 );
        glBindVertexArray( core.shape_vao[ SHAPE_QUAD ].vao );
        glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, core.shape_vao[ SHAPE_QUAD ].ind );

        for( i = 0; i < RENDER_BATCH_FRAME_MAX; i++ ) {
            layer = ( float ) batch->layer;

            for( j = 0; j < batch->frame_count; j++ ) {
                target = &frame_renderer->target[ batch->queue_index + j ];
                wo2 = ( float ) target->frame_width * 0.5f;
                ho2 = ( float ) target->frame_height * 0.5f;
                dx = ( float ) target->tx + wo2;
                dy = ( float ) target->ty + ho2;

                if( j > 0 ) {
                    dx += ( float ) batch->parent_x;
                    dy += ( float ) batch->parent_y;
                }
                glUniform2f( ( s32 ) uni_loc[ LOC_U_SCALE ], sx * wo2, sy * ho2 );
                glUniform3f( ( s32 ) uni_loc[ LOC_U_TRANSLATION ], dx / wo2, dy / ho2, layer );
                glUniform2f( ( s32 ) uni_loc[ LOC_U_LOCATION ], dx, h - dy );

                s32 ib, ob;

                if( target->texture ) {  // slider gradients
                    ib = ob = 0;
                    glBindTexture( GL_TEXTURE_1D, core.dynamic_textures[ target->texture ] );
                } else {
                    ib = wo2 - target->detail.frame.inner_border;
                    ob = ho2 - target->detail.frame.outer_border;
                    glUniform4fv( ( s32 ) uni_loc[ LOC_U_COLOR_BG ],
                        1, ( float * ) &core.colors[ target->bg ] );
                    glUniform4fv( ( s32 ) uni_loc[ LOC_U_COLOR_FG ],
                        1, ( float * ) &core.colors[ target->fg ] );
                }
                glUniform1i( ( s32 ) uni_loc[ LOC_U_INNER ], ib );
                glUniform1i( ( s32 ) uni_loc[ LOC_U_OUTER ], ob );
                glDrawElements( GL_TRIANGLES,
                    core.shape_vao[ SHAPE_QUAD ].len, GL_UNSIGNED_SHORT, 0 );

                if( target->texture ) {
                    glBindTexture( GL_TEXTURE_1D, 0 );
                }
            }
            batch++;
        }
        frame_renderer++;
        batch = frame_renderer->batch;
        p = &core.programs[ PROGRAM_FONT ];
        uni_loc = p->uniform_locations;
        Ui_Font *f = &fonts[ FONT_MENU ];
        float font_scale = f->line_height / ( view_aspect * f_font_size );
        float ri, ro;
        font_stroke_radii( f_font_size, f->line_height, view_aspect, &ri, &ro );

        glBindTexture( GL_TEXTURE_2D, f->tex_id );
        glUseProgram( p->program_id );
        glUniform1i( ( s32 ) uni_loc[ LOC_U_TEXTURE0 ], 0 );
        glUniform1i( ( s32 ) uni_loc[ LOC_U_FLAGS ], 1 );
        glUniform1f( ( s32 ) uni_loc[ LOC_U_INNER ], ri );
        glUniform1f( ( s32 ) uni_loc[ LOC_U_OUTER ], ro );

        for( i = 0; i < RENDER_BATCH_FRAME_MAX; i++ ) {
            layer = ( float ) batch->layer;

            for( j = 0; j < batch->frame_count; j++ ) {
                target = &frame_renderer->target[ batch->queue_index + j ];
                dx = ( float )( target->tx + batch->parent_x );
                dy = ( float )( target->ty + batch->parent_y );

                glUniform2f( ( s32 ) uni_loc[ LOC_U_SCALE ],
                    sx / font_scale, -sy / font_scale );
                glUniform3f( ( s32 ) uni_loc[ LOC_U_TRANSLATION ],
                    dx * font_scale, -dy * font_scale, layer  );
                glUniform4fv( ( s32 ) uni_loc[ LOC_U_COLOR_FG ], 1,
                    ( float * ) &core.colors[ target->fg ] );

                Ui_Text *ui_text = &core.text_vao[ STATIC_STRING_MAX + target->detail.text.id ];
                Ui_Vao *obj = &ui_text->vao;
                glBindVertexArray( obj->vao );
                glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, obj->ind );
                glDrawElements( GL_TRIANGLES, obj->len, GL_UNSIGNED_SHORT, 0 );
                glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, 0 );
                glBindVertexArray( 0 );
            }
            batch++;
        }
        glBindTexture( GL_TEXTURE_2D, 0 );
        glUseProgram( 0 );
    }

Answer 1

字体比例的计算应如下所示:

font_scale = line_height / font_size

在此之前，我将字体大小乘以纵横比，我认为这没有任何意义，因为我后来将两个正交比例值除以字体比例，并且这些值已经“烘焙”到了它们中。抱歉，我无法给出数学解释，它似乎只需要一点点的改变就可以很好地工作。