我正在尝试使用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 );
}
答案 0 :(得分：0)
字体比例的计算应如下所示：
font_scale = line_height / font_size
在此之前，我将字体大小乘以宽高比，我认为没有任何意义，因为我后来将两个正交比例值除以字体比例，并且那些已经得到宽度和高度＆＃34;烘焙＆＃34 ;进入他们。对不起，我不能给出一个数学解释，它似乎与这个小小的改变很好地合作。