some fonts intersect or creates glitches

[drcmda]

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

[lojjic]

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:

• "A path in an exported font must not intersect itself"
• "Overlapping paths are sort of okay ... But they will still produce bad results if...

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:

import { configureTextBuilder } from 'troika-3d-text/dist/textmesh-standalone.umd'
configureTextBuilder({sdfGlyphSize: 128})

...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.