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...
Last timeLast time I was looking at letter spacing with my renderer to see how it compared to Google Chrome on Mac. But while doing that I noticed that their antialiasing looked nicer than mine. So I tweaked parameters, including antialias edge width, gamma, and threshold bias. I was looking at letter spacing with my renderer to see how it compared to Google Chrome on Mac. But while doing that I noticed that their antialiasing looked nicer than mine. So I tweaked parameters, including antialias edge width, gamma, and threshold bias.
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...
Blog post: 20 Aug 2024 Blog post: 20 Aug 2024My friend L recently mentioned that he hadn’t seen any blog posts from me. It’s true, I haven’t posted for a while. Earlier this year I had explored My friend L recently mentioned that he hadn’t seen any blog posts from me. It’s true, I haven’t posted for a while. Earlier this year I had explored signed distance field fontssigned distance field fonts, in particular using , in particular using Viktor Chlumský’s multi-channel distance fieldsViktor Chlumský’s multi-channel distance fields[1][1]. I really enjoyed the many.... I really enjoyed the many...
I had previously blogged about text effectsI had previously blogged about text effects, and how I accidentally discovered that I could alter the personality of the font by rendering a distorted shape. At the time, I was focused on text effects and didn’t want to get distracted by this discovery. So I wrote it down for later., and how I accidentally discovered that I could alter the personality of the font by rendering a distorted shape. At the time, I was focused on text effects and didn’t want to get distracted by this discovery. So I wrote it down for later.Well, later came, and I decided to explore it:Well, later came, and I decided to explore it:
I have several pages that are unfinished because I can’t find an explanation I’m happy with. Sometimes while trying to come up with an explanation, I realize I have several pages that are unfinished because I can’t find an explanation I’m happy with. Sometimes while trying to come up with an explanation, I realize I don’t actually understand the topicI don’t actually understand the topic as well as I thought! One of these topics is heuristics for the A* algorithm.While trying to understand the topic better, I came up with this example: as well as I thought! One of these topics is heuristics for the A* algorithm.While trying to understand the topic better, I came up with this example:
You may know me for my You may know me for my interactiveinteractive tutorials. But before that, I was writing visual but non-interactive tutorials. In particular, there wasn’t a lot of information about A* on the web, so I decided to collect tutorials. But before that, I was writing visual but non-interactive tutorials. In particular, there wasn’t a lot of information about A* on the web, so I decided to collect all my notes about pathfindingall my notes about pathfinding[1][1] together in one place in the 1990s. But then in the 2010s I started making interactive pages. The newer pages are narrower in scope; I covered... together in one place in the 1990s. But then in the 2010s I started making interactive pages. The newer pages are narrower in scope; I covered...
Blog post: 17 Apr 2024 Blog post: 17 Apr 2024On my pages I often want to be able to move an object around in a diagram using the mouse or touch. Last year I spent some time learning about browser mouse+touch events, and On my pages I often want to be able to move an object around in a diagram using the mouse or touch. Last year I spent some time learning about browser mouse+touch events, and wrote a page about event handlerswrote a page about event handlers for dragging objects around. I hadn’t realized it at the time, but it was only half the solution. for dragging objects around. I hadn’t realized it at the time, but it was only half the solution.
Earlier this year Earlier this year I was trying to improve font rendering in some of my C++ projectsI was trying to improve font rendering in some of my C++ projects, and that led me down a rabbit hole of learning signed distance field (SDF) font rendering. I wanted to try out the SDF fonts in a real project. I occasionally help with , and that led me down a rabbit hole of learning signed distance field (SDF) font rendering. I wanted to try out the SDF fonts in a real project. I occasionally help with Galactic Assault SquadGalactic Assault Squad[1][1] (GAS), especially “engine” code, so for Week 6 I decided... (GAS), especially “engine” code, so for Week 6 I decided...
In Week 4 of the year, I tried out various ways of using In Week 4 of the year, I tried out various ways of using distancesdistances in signed distance field fonts. In Week 5 I wanted to do something different. I decided to explore what I could do treating each character as its own sprite and then applying sprite antimation. The week turned out to be in signed distance field fonts. In Week 5 I wanted to do something different. I decided to explore what I could do treating each character as its own sprite and then applying sprite antimation. The week turned out to be funfun but I didn’t learn as much as I hoped I would. To start, I copied the code from the previous week so that I would have a working program right away. Then I removed things I... but I didn’t learn as much as I hoped I would. To start, I copied the code from the previous week so that I would have a working program right away. Then I removed things I...
Blog post: 27 Mar 2024 Blog post: 27 Mar 2024In the In the last postlast post I described how I fell into the font rendering rabbit hole. I try to put some time limits on each topic — otherwise I would explore forever! I try to pick a theme each week: I described how I fell into the font rendering rabbit hole. I try to put some time limits on each topic — otherwise I would explore forever! I try to pick a theme each week:Week 3 was the basics: SDF, MSDF, atlas, shaderWeek 3 was the basics: SDF, MSDF, atlas, shaderWeek 4 was effects on individual glyphs: outlines, shadows, glow, bevelWeek 4 was effects on individual glyphs: outlines, shadows, glow, bevelWeek 5 was effects...Week 5 was effects...
Blog post: 23 Mar 2024 Blog post: 23 Mar 2024Each week I pick one or two things to work on. In week 2 of this year, I decided I should update my Each week I pick one or two things to work on. In week 2 of this year, I decided I should update my “hello world” OpenGL+Emscripten code“hello world” OpenGL+Emscripten code[1][1] from 2015. It’s boilerplate I use occasionally in other projects. It wasn’t compiling anymore, and I wanted to fix that as well as several other things. from 2015. It’s boilerplate I use occasionally in other projects. It wasn’t compiling anymore, and I wanted to fix that as well as several other things.One of the unsolved issues in that...One of the unsolved issues in that...
Blog post: 8 Mar 2024 Blog post: 8 Mar 2024For some time now I’ve been unhappy with how much more friction there is when posting to For some time now I’ve been unhappy with how much more friction there is when posting to my blogmy blog[1][1] than posting than posting to twitterto twitter[2][2]. I keep wanting to blog more but I don’t. Part of the problem is content. I did blog more in 2018, when I was working on projects that had more to share. Part of the problem.... I keep wanting to blog more but I don’t. Part of the problem is content. I did blog more in 2018, when I was working on projects that had more to share. Part of the problem...