What is aliasing?

what is aliasing and anti-aliasing in Computer Graphics
Share this:

The aliasing effect is the appearance of the jaggies or staircase-like edges in rasterized images. Look at the image below, there are two in the image. Look closely to upper a, you can see there is distortion in the image where there is a curve. This is because the rounded corners are rasterized using pixels and the pixel is square. Images on the screen are made up of pixels which are tiny squares so how is anything that is not a straight line displayed on the screen? Like curves in ‘a’ or diagonal shape etc.

alias and anti-aliased
diagonal (aliased and anti-aliased)

Have a look at the image above, the second image is anti-aliased.

It is quite clear that you end up with the square box at the edge.

To get rid of this there is a wide variety of anti-aliasing. It is important that to understand this, you should have a good understanding of the rasterization process in computer graphics. This problem can be more visible when you know how fragments are created from processed vertices from the vertex shaders.
One of the simplest ways to showcase where this problem originates is illustrated in a nice way in https://learnopengl.com/Advanced-OpenGL/Anti-Aliasing.

Rasterization of triangle

In rasterization, all the vertices that are covered by a primitive are taken and a fragment is created from it. In this grid of pixels, the center of each pixel is its sample point which is used to determine if this pixel covers the pixel. Pixel with a red dot center means they are entered by this triangle edge. 

So here in this triangle, there are some cases where you may not agree with the above rasterization. Some pixels are entered by triangle edges but they aren’t taken as covered pixels or red dots because they don’t cover sample points or dots. So this will not be processed in the fragment shader.

So, the rendered triangle looks like this :

the rasterized output of the above triangle

So we get primitive or not smooth edges. This is aliasing in computer graphics.

Let’s look through one more example since you know it better, let’s visualize it more.

another image depicting the reason for aliasing ( source: apple developer page)

There are several ways for anti-aliasing that try to bring smooth edges to these unpleasing edges. More popular of them is MSAA- multi-sample anti-aliasing- or FXAA – fast approximate anti-aliasing. In antialiasing, what we try to achieve is find missing data that can fill the jaggies gap with approximated data.

So what you have as a preliminary guess from here is that the whole problem root is the center of the pixel or single sample point. Yes, you are right. What multisampling does is listen to your solution and not use a single sample point in the center of each pixel. In MSAA, we put four sample points in a pixel and now they are used to check if the pixel is covered or not. Let’s see through this image,

4x MSAA with four subsampling point in a pixel

In the figure above, this illustrates the same triangle being rendered using 4xMSAA.What it meant to say is that each pixel has four sampling points and GPU average the color of each sample and determine the final color. This produces a better result and reduces the jaggies.

Thank you for reading, Happy Learning.

Take Care.


Related posts

Leave a Reply