andrewlowndes / perfect-antialiasing

Antialiasing via conservative rasterisation and analytical area computation

Antialiasing via conservative rasterisation and analytical area computation

A new technique for rendering 3D triangles with 'perfect' anti-aliasing. Fonts and vectors are broken into triangles and rasterised conservatively then a fragment shader determines the triangle area coverage to compute the alpha for each fragment.

Process

GPU Rendering of vector graphics at a sub-pixel accuracy:

1. Triangulate curves into triangles
2. Render each triangle using conservative rasterisation
3. For each fragment:
   1. Perform a triangle/box intersection, creating a polygon
   2. Sum the areas of the triangles in the polygon
   3. Divide the sum by the fragment area to give a percentage coverage
   4. Continue for all triangles, additively blending

Preview

Demos

Visit https://andrewlowndes.github.io/perfect-antialiasing/dist/ to see a set of demos showing the various techniques used in this repo.

Run

1. Ensure NodeJS installed
2. Run npm i to install dependencies
3. Run npm start to open the demos in a web app

Roadmap

• CPU Demo (Canvas)
  • Cubic/quadratic bezier tesselation
  • Triangulate path to polygons
  • Conservative rasterisation
  • SVG test
  • Cell logic
  • Custom font rendering
• WebGL
  • Conservative rasterisation (vertex-shader based shifting)
  • Custom font rendering
  • 3D Triangle
  • 3D scene
  • Screen-space tesselation
  • Instancing
  • Performance test
• Vulkan
  • Screen-space tesselation via geometry shader
  • Conservative rasterisation using gpu extensions
  • Instancing
  • Performance test
• Further experiments
  • Exact curve coverage analytics
    • Quadratic Bezier
    • Cubic Bezier (prob too complicated)

Usages

• Anti-aliasing in games (need to assess overhead of conservative rasterisation and the alpha computation in the fragment shader)
• Font rendering (still relies on triangulation - use screen-space in tesselation shader for resolution independent rendering)

Development

Install VS Code and the following extensions:

• EditorConfig for VS Code
• ESLint
• Prettier

References

Vertex-based conservative rasterisation based off algorithm 2 from GPU Gems 2 Chapter 43 (https://developer.nvidia.com/gpugems/gpugems2/part-v-image-oriented-computing/chapter-42-conservative-rasterization)