English subtitles

← Antialiasing - Interactive 3D Graphics

Get Embed Code
2 Languages

Showing Revision 2 created 05/25/2016 by Udacity Robot.

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