Skip to content

Latest commit

 

History

History
65 lines (54 loc) · 2.4 KB

readme.md

File metadata and controls

65 lines (54 loc) · 2.4 KB
Raw

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

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)