Jujusoft - Anti-aliasing

The idea of anti-aliasing is to attempt to represent straight lines and smooth curves [or any arbitrarily detailed object] as accurately as possible using a finite number of colored squares [ie pixels]. It's one of those technologies that's working best when you don't notice it. When you see an image on a computer screen and think to yourself, "That looks rough!", most likely what you are noticing is the absence of anti-aliasing. This page attempts to illustrate the pros and cons of some of the methodologies commonly employed.

The basic idea is to choose the color of each pixel based not just on the color of the object, but also on how much of an object covers that pixel. For example, if a black shape only covers 50% of a pixel (against an otherwise white background) then the resulting color should be 50% grey. The thing is, it's a bit tricky getting a computer program to work out what these percentages are on a pixel-by-pixel basis.

Point sampling

This is about as un-anti-aliased as you can get. Pixel coverage here is decided on a yes or no basis, ie if the centre of a pixel falls within a shape, it is "full", otherwise it is "empty". Note that many of the details are simply missing. Thin lines drop out leaving behind random dashes, and edges of shapes appear very "jaggy"

[the patterns on the faces of the cube are supposed to be gridlines—see later examples]

Point sampling + 0.5 pixel Gaussian blur

Blurring an image is one way to make it look less jaggy, and is commonly confused with anti-aliasing.

Whilst generally smoother, the edge of the outer circle is still a bit jaggy.

Point sampling + 1.0 pixel Gaussian blur

Here the jaggies have been almost smoothed away, but at the expense of more detail. Note that blurring an image can never add detail; it will only remove it.

Because we started with a jaggy image, we cannot magically "get back" those fine gridlines; instead they just become blurry dots.

2 x 2 Point sampling

A popular method, often supported by video cards as Full Scene Anti-aliasing. In essence the image is rendered at a higher resultion and then downsampled.

In this case, every pixel value in the final image has been computed by taking the average of 4 point sampled sub-pixels. While certainly an improvement, there are still many drop-outs in the fine lines.

Box-filtering [approximated using Photoshop]

As the number of sub-pixels increases, n x n point sampling approaches box-filtering. This method can be imaged by considering each pixel as a box covering a small square [rather than a point] and averaging the colors that appear inside the box.

Note that the heavy edges are smooth without appearing blurry, and fine gridlines are unbroken. They are however, still a bit jaggy.

Triangle Filtering [approximated using Photoshop]

Similar to box-filtering, triangle filtering adds further refinement by weighting the sub-pixel values according to their distance from the pixel centre.

Crucially, the contributing areas for each pixel value overlap, so that rendering even the smallest dot will contribute to the values of 4 surrounding pixels. This method is therefore ideal for image rendering, but not necessarily the best for fonts— since even the tinest of features are spread to a minimum width of 2 pixels, which can make a font appear slightly blurry.

__________

Related: font rendering

Point sampling This is about as un-anti-aliased as you can get. Pixel coverage here is decided on a yes or no basis, ie if the centre of a pixel falls within a shape, it is "full", otherwise it is "empty". Note that many of the details are simply missing. Thin lines drop out leaving behind random dashes, and edges of shapes appear very "jaggy" [the patterns on the faces of the cube are supposed to be gridlines—see later examples]
	Point sampling + 0.5 pixel Gaussian blur Blurring an image is one way to make it look less jaggy, and is commonly confused with anti-aliasing. Whilst generally smoother, the edge of the outer circle is still a bit jaggy.
Point sampling + 1.0 pixel Gaussian blur Here the jaggies have been almost smoothed away, but at the expense of more detail. Note that blurring an image can never add detail; it will only remove it. Because we started with a jaggy image, we cannot magically "get back" those fine gridlines; instead they just become blurry dots.
	2 x 2 Point sampling A popular method, often supported by video cards as Full Scene Anti-aliasing. In essence the image is rendered at a higher resultion and then downsampled. In this case, every pixel value in the final image has been computed by taking the average of 4 point sampled sub-pixels. While certainly an improvement, there are still many drop-outs in the fine lines.
Box-filtering [approximated using Photoshop] As the number of sub-pixels increases, n x n point sampling approaches box-filtering. This method can be imaged by considering each pixel as a box covering a small square [rather than a point] and averaging the colors that appear inside the box. Note that the heavy edges are smooth without appearing blurry, and fine gridlines are unbroken. They are however, still a bit jaggy.
	Triangle Filtering [approximated using Photoshop] Similar to box-filtering, triangle filtering adds further refinement by weighting the sub-pixel values according to their distance from the pixel centre. Crucially, the contributing areas for each pixel value overlap, so that rendering even the smallest dot will contribute to the values of 4 surrounding pixels. This method is therefore ideal for image rendering, but not necessarily the best for fonts— since even the tinest of features are spread to a minimum width of 2 pixels, which can make a font appear slightly blurry.