Giter Site home page Giter Site logo

Comments (8)

guichazan avatar guichazan commented on June 23, 2024 1

You were right: the correct is to add.
Long and prosper life!

from msdf-atlas-gen.

Chlumsky avatar Chlumsky commented on June 23, 2024

No. If you think you're getting artifacts because of no margin, that means you're actually mapping the glyphs wrong. If I added such an option everyone would use it without realizing their mistake, meaning they would still have glyphs positioned wrong and on top of that less space in the atlas.

from msdf-atlas-gen.

guichazan avatar guichazan commented on June 23, 2024

Let me show you how it appears.

In the first image, you can see the artifacts. On the left there's the font size. See sizes 25, 32, 33 (on right of _), 39, 45/46 (on left of |)...

You can also see how nice are the fonts.

This is the shader i'm using:

vec4 msdf = texture2D(u_texture, v_texCoord);
float distance = median(msdf.r, msdf.g, msdf.b)  - 0.5;
distance *= dot(distanceRange / u_textureSize, 0.5 / fwidth(v_texCoord));
float glyphAlpha = clamp(distance + 0.5, 0.0, 1.0);
gl_FragColor = vec4(color.rgb, glyphAlpha * color.a);

If i use the parameters you defined in the Shadron sample, it becomes this:

vec4 msdf = texture2D(u_texture, v_texCoord);
float distance = median(msdf.r, msdf.g, msdf.b) + 0.5;
distance *= dot(vec2(0.015625), 0.5 / fwidth(v_texCoord));
float glyphAlpha = clamp(distance + 0.5, 0.0, 1.0);
gl_FragColor = vec4(color.rgb, glyphAlpha * color.a);

And then the result is in the second image: the artifacts are almost gone (still on size 47, 50, 54...). However, the fonts looks very ugly, specially on small sizes. Note: my app works on desktop, so it requires sizes <= 18.

Thanks

guich

mine

yours

from msdf-atlas-gen.

guichazan avatar guichazan commented on June 23, 2024

This is how i'm creating the font:

msdf-atlas-gen.exe -font roboto.ttf -charset roboto_charset.txt -size 30 -type mtsdf -format png -potr -imageout roboto.png -csv roboto.csv -json roboto.json -scanline -yorigin top -pxrange 4 -coloringstrategy inktrap

roboto_charset.txt

Btw, i miss a lot, in the md file, the default values for each parameter, and in which situations a change is recommended.

from msdf-atlas-gen.

Chlumsky avatar Chlumsky commented on June 23, 2024

None of that is the problem. Your texture coordinates are wrong. How do you compute them?

from msdf-atlas-gen.

guichazan avatar guichazan commented on June 23, 2024

Why you add a margin of 0.5 to all coords in GlyphGeometry::getQuadPlaneBounds?
Are you sure that you made a test of all sizes and chars like i did to confirm that your coordinates are correct?
The coordinates are computed like: xAtlasCoord / textureWidth, yAtlasCoord / textureHeight

from msdf-atlas-gen.

guichazan avatar guichazan commented on June 23, 2024

Found my issue. I was removing the 0.5 margin as LibGDX's BitmapFont format don't support it. I added the margin back and it worked.
Many thanks.

            float incU = 0.5f / bf.getRegion().getRegionWidth(), incV = 0.5f / bf.getRegion().getRegionHeight();
            for (int i = 0; i <= 65535; i++)
            {
               BitmapFont.Glyph g = data.getGlyph((char)i);
               if (g != null)
               {
                  g.yoffset += glf.ascent;
                  g.u += incU; g.u2 -= incU;
                  g.v += incU; g.v2 -= incU;
               }
            }

from msdf-atlas-gen.

Chlumsky avatar Chlumsky commented on June 23, 2024

That's good to hear. Just one thing to check - depending on what exactly happened, in case all your texture coordinates actually got rounded down, you may want to add to u2, v2 and not subtract.

from msdf-atlas-gen.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.