Page 10-6: Aliasing

Page 10-6: Aliasing

Box 1: Aliasing and One Way to Fix It

If you look at the dots on the previous page (repeated below), you'll notice that you can see the pixel boundaries on the texture. Since something either is part of a dot or not, each pixel matters. As the dots get small, this can be ugly. This causes the jagged edges (called "jaggies" - yes, that's a technical term).

The problem is that we are making the pixels either light or dark - nothing in between. Even if a pixel is half full of a dot, it has to be either light or dark.

A different way to look at it: for each pixel, we compute the color at the center and make the entire pixel be that color. Since that point is either inside or outside of the dot, we choose a color for a pixel.

An answer to this is to make the cutoff for inside/outside less severe. We can "blur" the dots - making the boundary fuzzy. The transition between inside and outside can be gradual. That way a pixel can be correctly on the boundary. If you select "large blur" you can see that in action. Notice that things look blurry, but the shapes are smooth (not jaggy).

Can we have both sharp edges and no jaggies? Try "correct anti-aliasing" and see what is the best we can do easily. We're still blurring the edge, we're just making the blurriness be one pixel in width (rather than fixed in UV space). GLSL has support to help us do that. Basically, you take the derivative of u and v with respect to screen coordinates to see how much they change. This is a slightly advanced topic - but it is really important for making nice looking texturing.

Note that this is exactly the same problem as trying to figure out what level of the mipmap to look up when we filter image-based textures.

Exercise 6-1: Bonus: Anti-Aliased Checkerboard

As an optional bonus exercise, make a version of your checkerboard shader that is anti-aliased!

You can figure out how to do it from the dots example on this page. Note: this is optional, it is only for bonus points. Put the code into the shaders e61-aa-checks.vs and e61-aa-checks.fs.

Summary: Anti-Aliasing

If you get jaggy looking textures, you need to do something about it. This is called "anti-aliasing". We'll learn more about it in class.

For now we'll move on to the next page and learn about how to use images in textures.