SDF antialiasing
Related
More from Red Blob Games: latest blog posts
In the last few posts I have shown some of the experiments I did with font rendering. Those experiments were all in the In the last few posts I have shown some of the experiments I did with font rendering. Those experiments were all in the rendererrenderer. I’m using . I’m using msdfgen-atlasmsdfgen-atlas to generate the textures used by the renderer, and I wanted to experiment with to generate the textures used by the renderer, and I wanted to experiment with msdfgenmsdfgen’s parameters. Instead of generating new font data and then reloading the browser, I decided to try “headless” rendering controlled by a shell script.’s parameters. Instead of generating new font data and then reloading the browser, I decided to try “headless” rendering controlled by a shell script.
Blog post: 9 Oct 2024 Blog post: 9 Oct 2024Over the last few posts I wrote about things I did to improve font quality, such as Over the last few posts I wrote about things I did to improve font quality, such as antialiasingantialiasing and and combining distance fieldscombining distance fields to merge outlines and halos. But I want to “pop up the stack” a bit and talk about one of the bigger goals for this... to merge outlines and halos. But I want to “pop up the stack” a bit and talk about one of the bigger goals for this...
Blog post: 27 Sep 2024 Blog post: 27 Sep 2024Learning about font rendering, I was looking at text closely Learning about font rendering, I was looking at text closely last timelast time, and I noticed another issue. The shadows of each letter overlap the previous letter. That’s because I’m drawing one letter at a time. So for example in the fl, I draw the f’s letter, outline, and shadow, , and I noticed another issue. The shadows of each letter overlap the previous letter. That’s because I’m drawing one letter at a time. So for example in the fl, I draw the f’s letter, outline, and shadow, thenthen I draw l’s letter, outline, and shadow. So l’s shadow is... I draw l’s letter, outline, and shadow. So l’s shadow is...
My My summer projectsummer project is to work on labels for maps. In the is to work on labels for maps. In the previous postprevious post I described how I created outlines, and how I had a bug in the rendering. While looking closely at text to fix that bug, I noticed in one of my tests that the k and s seemed too close together. The h and e seemed a little too far... I described how I created outlines, and how I had a bug in the rendering. While looking closely at text to fix that bug, I noticed in one of my tests that the k and s seemed too close together. The h and e seemed a little too far...
In the In the previous postprevious post I introduced my summer project, to render labels on maps. As part of this, I want to be able to draw I introduced my summer project, to render labels on maps. As part of this, I want to be able to draw outlinesoutlines, , haloshalos, and , and drop shadowsdrop shadows. . Signed distance fieldSigned distance field[1][1] fonts are well suited for this. The basic use is to consider the signed distances -1 to 0... fonts are well suited for this. The basic use is to consider the signed distances -1 to 0...