Giter Site home page Giter Site logo

Comments (1)

lojjic avatar lojjic commented on August 16, 2024 3

Hmmm, this is a tough one. The root issue is that this font has intersecting paths.

image image

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:

image

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:
image

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)

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.