Git Product home page Git Product logo

Comments (6)

HouseOfFinwe avatar HouseOfFinwe commented on July 20, 2024

I figured out the issue with the white squares. It had to do with something the text layout engine was doing to the data channels (since it's not expecting data in the B and G channels). However, the problem still stands with resizing the text. The kerning information is for a given font size, and doesn't look right as I scale the mvp matrix. Additionally, the sizes of the glyphs are not proportional when autoframed. They get scaled to fix the 64x64 tile, and consequently some lower case letters end up being the same size as their upper case counterparts. I'm sure I'm missing something. How do I get each glyph to be scale proportionately?

from msdfgen.

Chlumsky avatar Chlumsky commented on July 20, 2024

This software generates SDF for individual glyphs but does not help in any way with laying out texture atlases. The autoframe option is meant for preview only and basically says "I don't care about precise positioning, just make my shape nicely fit the output bitmap." To generate a texture atlas, you need to use another library, or manually compute the layout, and pass the appropriate translation and scale values for each glyph. For this, you can utilize the shape metrics that can be outputted.

from msdfgen.

HouseOfFinwe avatar HouseOfFinwe commented on July 20, 2024

Thank you for you response. I've gotten past positioning of the shape within the bitmap, using thefont metrics. I'm using another tool to create the texture atlas. However, that tool relies on font metrics based on the size of the font. In my case, I'm building the fonts from 16 pts. These then get scaled into the 64x64 tile. When the layout engine positions the text, it appears monospaced because the glyph bitmaps are 64x64 blocks. Does the text need to be in blocks? Can I use the glyph dimensions plus some padding instead of a square, or will this cause issues with the MSDF generation?

from msdfgen.

rougier avatar rougier commented on July 20, 2024

You can have a look at https://github.com/rougier/freetype-gl. There is an example using (regular) SDF font with proper texture atlas. It might be not so hard to adapt it for msdfgen.

from msdfgen.

HouseOfFinwe avatar HouseOfFinwe commented on July 20, 2024

Thanks for the suggestion. I was able to get the all of the spacing issues resolved. The last remaining issue has to do with the texture borders appearing when I add a drop shadow (based on the font effects shader that Chlumsky posted in a previous issue). If I add alpha testing to get rid of the these borders, than the shadow disappears, so I'm not sure how to handle them, or why exactly they're appearing in the first place. I could post a picture if that would help. It's a light grey thin line around the glyph border on the upper left and top side of the borders.

from msdfgen.

HouseOfFinwe avatar HouseOfFinwe commented on July 20, 2024

It ended up being the font atlas needed more padding to accommodate the drop shadow offset. I'll consider the issue closed. I would, however, appreciate any suggestions about how to maintain the integrity of the glyph when downscaling. I added some super sampling (a 5 point tent filter) to the fragment shader to help with subpixel rendering, which helps, but I still can't produce a decent looking font at sub 12 pt.

from msdfgen.

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.