Antialiasing – Interactive 3D Graphics

Antialiasing – Interactive 3D Graphics

September 12, 2019 1 By Bernardo Ryan


Now that we’re at the pixel level, let’s talk a bit about Anti-aliasing. By default, when we rasterize a scene, we find what’s at the center of each pixel. This can give some fairly bad results, as edges of triangles will either be considered to fully cover a pixel, or not cover it at all. The binary nature of this process causes what’s called Aliasing, giving a ragged look to edges. Informally, this problem is called the Jaggies or Stairstepping. When you see it in animation, it’s called the Crawlies. What we’d like to do is get a nice smooth result, where each edge pixel is shaded proportionately to how much of it is covered by each object overlapping it. If the pixel is mostly covered by a triangle, use more of the triangle’s color, less, use less. The hard part is in figuring out this coverage, it’s expensive to compute, store and blend triangle areas for each pixel. Though maybe this will happen someday, about the same time we get personal jet packs. In the meantime there have been a huge number of Anti-aliasing schemes proposed for interactive 3D graphics. On one end of the spectrum is Supersampling. Where you simply create a higher resolution image, and then use all these extra samples to make the final image. For example, for 1000 by 1000 pixel image, you might render it at a resolution of 4000 by 4000. Now each pixel has 16 pixels associate with it in the high res image. Blend these together and you get a better result. This scheme is considered a bad idea, for a number of reasons. One is that it’s expensive both in memory and processing cost. Another is that sampling in a little 4 by 4 grid is not much help in fixing the jaggies for nearly horizontal or nearly vertical lines. A scheme commonly supported by the GPU is called Multi-sampling Anti-aliasing or MSAA. The idea here is to compute a shade for the whole fragment once, and to compute the geometric coverage separately. In addition, a different sampling pattern than a grid is used, doing so helps narrowly horizontal and vertical lines considerably. This sampling pattern does vary depending on the hardware company making the GPU. The main costs here are processing and storage, but these costs are considerably less and give considerably more bang for the buck than brute force super-sampling. This is generally the form of Anti-aliasing used by default by WebGL. I say generally because there’s a toggle for Anti-aliasing on or off, and it’s not specified what form of Anti-aliasing is used. To turn Anti-aliasing on in 3GS consists of setting a simple Boolean parameter called antialias. I should note that turning this on doesn’t necessarily do anything. It depends upon whether the GPU supports Anti-aliasing, most should, and whether the browser decides to allow it. Sometimes there are bugs that make it safer to keep Anti-aliasing off. Sadly most of the video lessons we’ve made showing 3GS demos do not have Anti-aliasing on, just because of such a bug. Welcome to the bleeding edge of technology, no one said there would be cake. Another class of algorithms for Anti-aliasing perform filtering on the image, this is a relatively new class of techniques. The first of these called Morphological Anti-aliasing, or MLAA, was developed in 2009. The idea is to use the existing image and possibly other data to detect sharp edges. When these are found, try to smooth just these edges by using nearby pixels. Amazingly, such techniques work pretty well, though can fail on thin lines, text, and other special cases. One of the most popular fitting techniques is called FXAA, which just needs the image itself to operate. I’ve used it myself in products and it’s even included in 3GS. I think part of the popularity is the author Timothy Lates put a serious amount of effort into both making this shader run on just about every GPU known to human kind and thoroughly documenting the code itself. Just to spell it out in case you didn’t get the hint, please do document your code, especially if you plan on having anyone else see it, which of course, anyone can do if you’re using WebGL or 3GS. So, I’ll say it again, document your code.