How to scale 2D text?

[paulross80]

I got text rendering working
Now I'm trying to get the scaling working as expected

At scale 1x

Scale 4x (you can clearly see the pixels)

How am I processing the 10 columns from the CSV file generated by msdf-atlas-gen:

        // Add the data to the map
        m_glyphs.try_emplace(codepoint,
        GlyphData
        {
            // Un-normalized sprite rectangle
            .rect =
            {
                csv_values[6], // x
                csv_values[7], // y
                csv_values[8] - csv_values[6], // width
                csv_values[9] - csv_values[7] // height
            },

            // Glyph bearing in EM units
            .bearing =
            {
                csv_values[2] * font_size,
                csv_values[3] * font_size
            },

            // Advance value for the x axis, in EM units
            .advance =
            {
                csv_values[1] * font_size,
                0.0f
            }
        });

font_size is the parameter I have passed to msdf-atlas-gen (32 in this case)
For rendering, I'm making a quad for each character, like this:

        Quad2D quad
        {
            .local_coords =
            {
                x + (glyph_bearing.x * quad_scale),
                y_baseline + (glyph_bearing.y * quad_scale),

                glyph_rect.width  * quad_scale,
                glyph_rect.height * quad_scale
            }
        };

My fragment shader:

    #version 330 core

    // Input from vertex shader
    smooth in vec4 fs_color;
    smooth in vec2 fs_tex_coords;

    // Input from uniforms
    uniform sampler2D u_tex_unit;
    uniform float u_screen_px_range;
    
    // Output color
    out vec4 final_color;

    float median(float r, float g, float b)
    {
       return max(min(r, g), min(max(r, g), b));
    }

    void main()
    {
       // Sample the MSDF 2D texture
       vec3 msdf = texture(u_tex_unit, fs_tex_coords).rgb;
       // Calculate the signed distance
       float sd = median(msdf.r, msdf.g, msdf.b);

       // Distance in pixels to the edge
       float pixel_dist = u_screen_px_range * (sd - 0.5);
       float opacity = clamp(pixel_dist + 0.5, 0.0, 1.0);

       // Multiply by text color
       final_color = fs_color * vec4(0.5, 0.5, 0.5, opacity);
    }

I'm passing a value of 2.0f to u_screen_px_range. I've tried some highter values but almost nothing changes. Characters look a bit less pixelated, but not perfectly clean

What should I change to make MSDF 2D text scaling work as intended?

[paulross80]

I have added the function for 3D text to my shader

float screen_px_range()
{
   vec2 unit_range = vec2(u_px_range) / vec2(textureSize(u_tex_unit, 0));
   vec2 screen_tex_size = vec2(1.0) / fwidth(fs_tex_coords);

   return max(0.5 * dot(unit_range, screen_tex_size), 1.0);
}

But the text still looks pixelated at any scale other than 1. What is the magic that makes crisp text work? What am I missing?

[paulross80]

Let's see
Following this post, I have rewritten my CSV data parsing code:

// CSV columns:
// (2, 3, 4, 5) are the glyph quad's bounds (plane_bounds)
// (6, 7, 8, 9) are the glyph's bounds in the atlas in pixels (pixel_bounds)
// These structs are just 4 floats: x, y, width, height
.plane_bounds =
{
    csv_values[2],
    csv_values[3],
    csv_values[4] - csv_values[2],
    csv_values[5] - csv_values[3]
},
.pixel_bounds =
{
    csv_values[6],
    csv_values[7],
    csv_values[8] - csv_values[6],
    csv_values[9] - csv_values[7]
}

In my rendering code, I'm generating a quad for each glyph using this data:

x + plane_bounds.x * font_size,
y + plane_bounds.y * font_size,
plane_bounds.width  * font_size,
plane_bounds.height * font_size

// For texture coordinates, I just use pixel_bounds (each field divided by texture width/height)

Shader uniform:

const float pixel_range = 2.0f;
// Before calling draw elements
glUniform1f(loc_pixel_range, pixel_range);

Here is how I have generated the output files using msdf-atlas-gen. As you can see, at sizes larger than the original font scale, I got pixelated results (this font file is not meant to be pixelated)

Someone please help me find what's wrong in my code

[paulross80]

I have fixed it, I just had to enable magnification texture filtering in OpenGL