Comments (6)
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.
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.
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.
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.
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.
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)
- Just a couple of questions.
- Msdf generation fails on symbol with several nested holes HOT 4
- Alpha as input ? HOT 1
- Allow FT_LOAD_DEFAULT in import-font extension HOT 5
- Confusing SignedDistance calculation in QuadraticSegment::signedDistance
- Inverting Y Axis makes uneven baseline HOT 2
- Segfault on Empty Shape
- Chinese character rendering issues HOT 5
- The effect of render small character is not good HOT 2
- Outline effect is not good on some glphys HOT 4
- Failure to import SVG file with empty initial <g> element HOT 4
- Using vcpkg leads to compiler error in VS2022 HOT 4
- Incorrect rendering of SVG with internal path HOT 1
- New release soon? HOT 1
- Call project() after cmake_minimum_required() HOT 6
- Artifact on a certain glyph HOT 4
- SVG with Quadradic path commands generates an SDF instead of MSDF HOT 3
- Multiple character output HOT 1
- Render HOT 2
- SDF from glyph curves? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from msdfgen.