Graphics

Antialiasing

Debunking what antialiasing is in a very high level

  • #graphics
  • #game
  • #algorithm

I've heard about the jargon anti-aliasing a lot but didn't gather enough courage to actually find out what it is as I thought it is something that only some deranged mathematician can understand. Turns out that I was wrong and it was dead simple.

It's basically a technique used in computer graphics to smooth out jagged edges in digital images, games and other 3D-rendered environments.

Scenario

Let's take the monitor for example. It doesn't matter if you use Samsung or Prism+, whatever is presented on the screen is comprised of an innumerable amount of squares (a.k.a pixels) arranged in a two-dimensional grid, working together by synchronizing the colors to manifest whatever it is being displayed.

However, as the pixels are sufficiently small for the naked eye to be observed, it gives us an illusion of perfection when the shape that has diagonal lines and curves are displayed on the screen.

Usages

Anti-aliasing works by blurring out the rough edges of the pixels to give a smoother transition for the lines to look more natural.

Illustration of aliasing and antialiasing

Image adopted from vokigames.com.

Anti-aliasing is prevalent in video games. It is intended to improve the quality of the graphics especially when it is a 3D-based game. Video games often provide several different anti-aliasing techniques to cater to wider audiences with different hardware specs.

Other uses of anti-aliasing include

  1. Digital text rendering - Modern CSS provides a property called text-rendering which allows to specify whether to use anti-aliasing to improve legibility of a font. TailwindCSS also have a page for font smoothing.
  2. Image processing - Improve the quality of resized or underscaled images

Techniques of Antialiasing

However, the antialiasing process does impose some extra computing power. Different anti-aliasing techniques employ different algorithms that ultimately affect their performance and quality. Here is a non-exhaustive list of anti-aliasing technique.

Antialiasing algorithm spectrum

These are the names of the techniques mentioned above.

  • Fast Approximate Antialiasing (FXAA)
  • Subpixel Morphological Antialiasing (SMAA)
  • Temporal Antialiasing (TAA)
  • Supersampling Antialiasing (SSAA)
  • Multisample Antialiasing (MSAA)

To learn more about each of them, there are a lot of articles that already cover them in depth. Refer to this blog post by Vokigames and this blog post by HP to learn more about the individual techniques.

References

Cabading, Z. What is Anti-Aliasing? A Comprehensive Guide to Smoother Gaming Graphics.https://www.hp.com/us-en/shop/tech-takes/what-is-anti-aliasing
CGJournalist. What is Anti-Aliasing?https://www.youtube.com/watch?v=iqdVZr-TEHI
Voki Games. Anti-Aliasing in Gaming: The Battle for Perfect Graphics.https://vokigames.com/anti-aliasing-in-gaming-the-battle-for-perfect-graphics/