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:
- Triangulate curves into triangles
- Render each triangle using conservative rasterisation
- For each fragment:
- Perform a triangle/box intersection, creating a polygon
- Sum the areas of the triangles in the polygon
- Divide the sum by the fragment area to give a percentage coverage
- Continue for all triangles, additively blending
Preview
![Preview](/perfect-antialiasing/images/preview.png)
Demos
Visit https://andrewlowndes.github.io/perfect-antialiasing/dist/ to see a set of demos showing the various techniques used in this repo.
Run
- Ensure NodeJS installed
- Run
npm i
to install dependencies
- Run
npm start
to open the demos in a web app
Roadmap
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)