-
Notifications
You must be signed in to change notification settings - Fork 122
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
some fonts intersect or creates glitches #57
Comments
Hmmm, this is a tough one. The root issue is that this font has intersecting paths. I've found slightly conflicting information online about intersecting paths in fonts:
Either way it sounds like it's considered bad practice and could probably be considered a bug in that font. That said, I'd like to find a workaround if possible. The obvious issue is the way I determine whether a given point is inside or outside the glyph fill, which uses a ray starting from that point and counts the number of times that ray intersects the glyph path. Currently I use a simple even-odd intersection count, which ends up giving an even-odd fill like in SVG. If I tweak that to take into account the direction of those intersections, I can get slightly better: However there are still visible artifacts. That is because when calculating a Signed Distance Field, the distance is to the closest path segment. So obviously if you've got a bunch of extra path segments that lie inside the fill area, those are going to throw it off. I'd need a way to remove/ignore all those interior segments. I'll do some research and see if there's a good way to do that, but I have a feeling it could become complex and hurt performance. The other issue I see in the "h" is due to the SDF texture resolution. My default SDF size is 64x64 which is a good speed-vs-quality balance in most cases, but does create some artifacts and slightly rounded corners on occasion. That usually only becomes noticeable when the text is displayed at very large sizes, but some fonts with fine details can also make it noticeable. There's a way to increase the resolution:
...where the sdfGlyphSize is a power-of-two value. Here's the "h" at 128 for example: Unfortunately this is currently a global configuration and can't be controlled for individual objects, but I think I can change that. I've opened #58 for that. |
example: https://codesandbox.io/s/r3f-drei-meshwobblematerial-tjmu2?file=/src/App.js
all playfair variants have this problem, even the non-italic ones. https://fonts.google.com/specimen/Playfair+Display?category=Serif&thickness=6
The text was updated successfully, but these errors were encountered: