Scale and translate text in 2D with OpenGL - c

Question

I am trying to draw text in UI elements with OpenGL but i fail in computing scale
and translation values for different font sizes correctly, such that a text would
fit nicely into a designated area.
This is my first attempt in doing such a thing and it seemed to work until i
noticed that with increasing font size the text will not fit into the calculated area anymore. I am not allowed to attach an image for a visual impression of what i mean, which is very sad.
First i thought this would be caused by rounding the scaled font width in order
to calculate the width that a frame needs but was unable to verify this.
After much trial and error i am not even sure anymore if it's the text that
gets projected incorrectly, or the frames i am trying to fit the text into.
Please have a look and help me find the error, here's an overview of what i do:
I construct a UI element by passing a certain font size in pixels.
For a frame ( e.g. input box ) that should hold at most n characters
the computation would look like this:
- 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.
When rendering UI elements first all frames are drawn and secondly the text.
- 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
The respective scale and translation values are sent to the shader.
Here's the vertex shader code which is the same for frames and text:
#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;
}
I hope i provided everything relevant, if not please let me know.
Regards and thanks,
Alfred
Follows the render function for frames and text:
// 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

The calculation for the font scale should look like this:
font_scale = line_height / font_size
Before that i had multiplied the font size with the aspect ratio, which i guess makes no sense as i later divide the two orthographic scale values by the font scale and those already got the width and height "baked" into them. Sorry i can't give a mathematical explanation, it just seems to work nicely with that little change.