Git Product home page Git Product logo

Comments (5)

ruby0x1 avatar ruby0x1 commented on July 20, 2024

I think I saw similar here (Droid Sans Bold), even though the glyph size is 20x20 the output at 1024 is great, but there is noticeable stepping on inner paths.

output

render

from msdfgen.

Chlumsky avatar Chlumsky commented on July 20, 2024

The signed distance field representation is not lossless and this is an effect of that. The reason you're perceiving it on the inner curve only is that it is much more curved, but the outer curve is actually also made up of lines of the same length, but it's less noticeable because they are connected at less sharp angles.

The length of the lines is actually proportional to the distance between pixels of the distance field, and they arise from the linear interpolation. One way to prevent this would be to use bicubic interpolation, but I strongly advise against that as although it may improve the appearance of some curves (that don't change too unpredictably) at this extreme magnification, it will basically mess up everything else.

My actual solution would be to just increase the distance field resolution if this concerns you too much, but I believe even that is unnecessary unless you're specifically targeting this gigantic text size.

from msdfgen.

Chlumsky avatar Chlumsky commented on July 20, 2024

Here is your G with bicubic interpolation:

resample

The curves are better but you can already see the beginning of an artifact where I marked it. I made a script for this in Shadron, too bad you can't try it just yet. :)

from msdfgen.

ruby0x1 avatar ruby0x1 commented on July 20, 2024

Yea I agree on that front, I was mostly adding to the notes for more data. It's probably possible to mix interpolation types based on angle and look ahead if you were really that inclined to eliminate the stepping. I've been more than happy with the results otherwise.

I'm also looking forward to Shadron, I saw it pop up on my twitter feed and look forward to trying it out.

from msdfgen.

paulhoux avatar paulhoux commented on July 20, 2024

Thanks for your replies. It turned out that I was incorrect in thinking 64x64 texels were used for each glyph on the texture. Instead, only 32x32 texels were used, causing the artifacts mentioned in this issue. By increasing the area to 64x64 texels, curves in the font became much smoother.

Feel free to close the issue.

from msdfgen.

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.