What’s Antialiasing and Why is it Blurry?

Before we talk about antialiasing, we must discuss the problem it tries to solve.

It’s called aliasing and is generated by improper sampling.

 

Aliasing

The term originates in the field of signal processing. In computer graphics, it describes a variety of ugly artefacts and image flaws created by improper sampling. Staircase-like artefacts that appear at the edges of lines are a common example of aliasing.

 

Example for aliasing on the edges of a line.

 

What exactly happens when aliasing appears has something to do with the interaction between the original frequency of the picture and the sampling rate.

 

If you are interested in diving deeper google the Theory of Fourier Analysis, and the Nyquist Frequency. They are not just applicable to audio processing but to everything else that can be described as a sum of sinus waves, including images.

 

Or take a look at Texturing & Modeling, A Procedural Approach – Third Edition (Ebert, Musgrave, Peachey, Perlin, Worley 2003). A great book on computer graphics I’m currently reading. Its chapter about the different antialiasing approaches inspired this blog post.

 

 

Sampling

Raster images (consisting of pixels) are a digital representation of the real world. The digital images are created by sampling the original with a defined resolution called the sampling rate. This is how cameras turn a nice view into a digital picture!

 

Example of a raster image with visible pixel borders.

 

 

Sampling and reconstruction are fundamental to computer graphics.

 

You can create digital pictures without quality loss when the amount of detail in the original (called bandwidth) is not larger than the resolution of the digital copy.

This is known as the Sampling Theorem.

 

Unfortunately for us, the requirements for this are rarely satisfied because the real world tends to have an infinite amount of detail. This is when aliasing occurs.

 

Sampling example:

When sampling the left picture with a sampling rate of 17×17, we get the picture on the right side. It’s only an inaccurate copy of the original with large fragments. This happened because the sampling rate was way lower than the original resolution (bandwidth) of the picture.

 

The original picture (left) and the sampled picture (right)

with a grid representing the sampling rate.

 

 

 

Antialiasing

Antialiasing is an attempt to fix improper sampling by

 

  1. Filtering the image to improve the conditions for the sampling
  2. Increasing the sampling rate

 

High frequencies are a cause for aliasing problems which the antialiasing tackles by applying a low-pass filter to the picture before sampling. The visual effect of low-pass filtering is to blur the image. The challenge for good antialiasing is to blur as little as possible while still getting rid of the unwanted frequencies.

 

Additionally supersampling/oversampling is used. This means the algorithm computes at a higher rate (resolution) than required. This can be 2x, 4x, or 8x for each pixel. If you apply 4x antialiasing to your texture/screen the computer must perform 4 times the amount of work to render the image. This is the reason for the bad performance of antialiasing.

 

On the left is the sampled picture with aliasing artefacts,

on the right, the same picture with antialiasing.