<p>A gaussian blur with a small kernel size, like 3, would blur the line into adjacent pixels and may be all that is needed.</p>
<p>There is a technique called jump flooding that will turn an image like this, even with very thin lines into a signed distance field. The signed distance field can then be used to recreate the lines at any thickness, with anti-aliasing. There was a paper written &quot;Jump Flooding in GPU with Applications to Voronoi Diagram and Distance Transform&quot; and there is an interesting blog post at <a href="https://bgolus.medium.com/the-quest-for-very-wide-outlines-ba82ed442cd9" rel="nofollow noreferrer">https://bgolus.medium.com/the-quest-for-very-wide-outlines-ba82ed442cd9</a>. The blog post is about generating wide outlines but it applies to thin lines and anti-aliasing lines as well.</p>
<p>One interesting thing about jump flooding is it allows for fractional pixel widths like 1.5px wide lines.</p>

CC BY-SA 4.0
2023-10-30T23:47:05.380Z
2023-10-30T23:47:05.380Z
pmw1234
<p>I need to solve the following problem: do some <strong>anti-aliasing onto an image that contains rasterized &quot;lines&quot;</strong>.</p>
<p>I have some post-processing effects that output super-thin (~1px) features such as silhouette-edges and outlines as shown here:</p>
<p><a href="https://i.sstatic.net/WYymi.jpg" rel="noreferrer"><img src="https://i.sstatic.net/WYymi.jpg" alt="enter image description here" /></a></p>
<p>I tried with an FXAA shader I found online, which works fine if the line is at least 2px wide, doesn't work with 1px lines. I guess the edge detection method completely breaks with such thin features (also the common optimization to sample at the boundary of the edge won't work with lines).</p>
<p>How should I address this issue?</p>
<p>Is there a technique out there specifically designed to solve this problem?</p>

<image-processing><antialiasing><post-processing>
Screen space line anti aliasing
leone ruggiero
# Screen space line anti aliasing

(Asked by: username_0 on 2023-10-25)

I need to solve the following problem: do some **anti-aliasing onto an image that contains rasterized "lines"**.

I have some post-processing effects that output super-thin (~1px) features such as silhouette-edges and outlines as shown here:

[![enter image description here](https://i.sstatic.net/WYymi.jpg)](https://i.sstatic.net/WYymi.jpg)

I tried with an FXAA shader I found online, which works fine if the line is at least 2px wide, doesn't work with 1px lines. I guess the edge detection method completely breaks with such thin features (also the common optimization to sample at the boundary of the edge won't work with lines).

How should I address this issue?

Is there a technique out there specifically designed to solve this problem?

**Tags:** image-processing, antialiasing, post-processing


---

## 1 answers

### Answer by username_1 on 2023-10-30. Score: 3

A gaussian blur with a small kernel size, like 3, would blur the line into adjacent pixels and may be all that is needed.

There is a technique called jump flooding that will turn an image like this, even with very thin lines into a signed distance field. The signed distance field can then be used to recreate the lines at any thickness, with anti-aliasing. There was a paper written "Jump Flooding in GPU with Applications to Voronoi Diagram and Distance Transform" and there is an interesting blog post at <https://bgolus.medium.com/the-quest-for-very-wide-outlines-ba82ed442cd9>. The blog post is about generating wide outlines but it applies to thin lines and anti-aliasing lines as well.

One interesting thing about jump flooding is it allows for fractional pixel widths like 1.5px wide lines.


---

