Comments (1)
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.
from troika.
Related Issues (20)
- Util function getCaretAtPoint can't get the uniform text caret vertical position for number/character and Chinese text. HOT 5
- Runtime error: 'webgl-sdf-generator' does not contain a default export (imported as 'createSDFGenerator'). HOT 3
- Emoji and Unicode support HOT 3
- Memory Issue with troika-three-text HOT 5
- troika-three-text: Indic shaping
- getCaretAtPoint(...) taking surrogate pairs into consideration HOT 2
- Support ligature caret positioning provided in font
- anchorY="bottom-baseline" not working since v0.48.0 HOT 2
- Glitches when used with Montserrat HOT 2
- Cloning a synced text still requires sync();
- [ Angular 17 ] - TS2307: Cannot find module 'troika-three-text' or its corresponding type declaratio HOT 1
- troika-three-text uncaught exception HOT 8
- Apply GLSL shader to only some letters
- Fix netlify links in documentation
- Cannot set property customDepthMaterial of #<InstancedUniformsMesh> which has only a getter
- LinearEncoding was not found in 'three'
- troika-three-text: mesh.textRenderInfo missing lineHeight and other font metrics HOT 3
- troika-three-text: First line of text is missing "top" spacing HOT 10
- How to draw many instance of plan with same texture but with different uvs.
- troika-three-text: possible to use in a webworker? HOT 6
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 troika.