CSE-435
Aliasing and
Anti-Aliasing Techniques
Aliasing and
Anti-Aliasing Techniques
• What is Aliasing?
• Effects of Aliasing
• Avoiding Aliasing
• Anti-Aliasing Techniques
– Unweighted Filtering
– Weighted Filtering
– Supersampling
Effects of Aliasing in Graphics
• Jagged effect in rasterised graphics:
Vector representation of a circle Jagged edges due to aliasing
during the rasterisation process
Effects of Aliasing in Graphics
• Poor representation of fine detail:
Image representing a Closeup of most distant
chessboard in 3D squares
Aliasing in Graphics
• A graphics example:
Anti-Aliasing Techniques
• Consider a diagonal line to be
represented as a raster graphic…
Anti-Aliasing Techniques
• The simplest way to rasterise would be to fill
only those pixels with >50% coverage.
Anti-Aliasing Techniques
• This is not a particularly good representation
of the original line.
• Aliasing artefacts create a jagged, ‘stepped’
appearance.
• The aliasing also makes lines appear to have
different intensities depending on their angle.
Unequal Brightness
Anti-Aliasing Techniques
• A better method would be to determine the strength
of the colour used to fill each individual pixel
according to the percentage covered by the line.
90% 65%
15% 50%
Anti-Aliasing Techniques
• This technique (known as pre-filtering)
creates a much smoother appearance.
Circle with aliasing Pre-filtering applied
Anti-Aliasing Techniques
• In the method seen on the previous slides, the
amount of coverage given to each pixel is
determined irrespective of the distance from
the center of the line.
• It is therefore known as Un-weighted filtering.
• The filter used to calculate the % coverage of
each pixel in this method can be thought of as
a cube covering an area of 1x1 pixels, as
explained in the following slides…
Unweighted Filtering
• Consider the line on a plane surface in a
3D space…
Unweighted Filtering
• A cube is extrapolated up from the plane
for each pixel that the line intersects…
Unweighted Filtering
• The line is then extrapolated to fill a
portion of this cube…
Unweighted Filtering
• The percentage of the cube filled by the
line can now be calculated and used to
shade this pixel.
• Unweighted filtering is computationally simple,
but better results can be achieved by using a
weighted filter.
Weighted Filtering
• In weighted filtering, a cone is used in
place of the cube.
Weighted Filtering
• The line is extrapolated into the cone and the
percentage of the cone filled is calculated.
Aliasing in Graphics
• A graphics example:
Weighted Filtering
• This weighted filtering gives a more accurate
result by taking into account the pixels around the
one currently being investigated.
• The use of a cone means that priority is given to
line coverage closest to the center of the pixel in
question.
• It is possible to give different priorities to the
outlying pixels by adjusting the height therefore of
the cone - a steeper slope will give more priority
to the pixel at the center.
The Results
Supersampling
• These filtering methods have so far been
applied just once per pixel in the
rasterised image.
• This is referred to as “1x” anti-aliasing.
• Greater accuracy and more graphically
impressive results can be obtained by a
technique known as supersampling.
Supersampling
• Supersampling performs calculations on a
virtual image ‘n’ times the resolution of the
desired output.
• This produces several pixels for each pixel in
the final output.
• Filtering is applied to each of these virtual
pixels and the resultant average value is used
to shade the corresponding pixel in the output
image.
Supersampling
• Supersampling anti-aliasing is usually
referred to in terms of the n value used:
n=8
1
2
4
(1x anti-aliasing)
(2x
(4x
(8x
Supersampling
• Supersampling is expensive computationally, but
many high-end video cards provide on-board
functionality to speed the process up.
• Modern video games strive for smooth, realistic
edges and make extensive use of anti-aliasing
techniques.
• Many games provide the user with options to
select the level of supersampling used (2x, 4x,
8x) to balance the desired graphics level with the
computing power available.
Character Display
1. Two methods: Bitmap Font and Outline
Font
Bitmap Font
• Character is represented by the on pixels in a bilevel
pixel grid pattern called a bitmap.
• Characters are already scan converted form.
• We may overlay the bitmap onto itself with a
horizontal offset of one pixel to produce bold and shift
rows of pixels to produce italic.
• Thus variation in appearance and size from one font,
the overall results tends to be less than satisfactory.
• Furthermore, the size of a bitmap font is dependent
on image resolution.
Outline Font
• The graphical primitives such as lines and arcs are
used to define the outline of each character.
• Requires scan conversion operations.
• But it can be used to produce characters of varying
size, appearance and even orientation.
• It can be resized through a scaling transformation,
made into italic through a shearing transformation
and turned around with respect to a reference point
through a rotation transformation.