perfect antialiasing

通過保守的柵欄和分析區域計算進行抗脈

一種用“完美”抗聲明渲染3D三角形的新技術。字體和向量分為三角形，並保守地柵格，然後片段著色器確定三角形區域的覆蓋範圍，以計算每個片段的alpha。

過程

以子像素準確性的GPU渲染矢量圖形：

1. 三角曲線成三角形
2. 使用保守的柵格化渲染每個三角形
3. 對於每個片段：
   1. 執行三角形/盒子交集，創建多邊形
   2. 總結多邊形中三角形的區域
   3. 將總和除以碎片區域以給出百分比覆蓋率
   4. 繼續進行所有三角形，加性混合

預覽

演示

請訪問https://andrewlowndes.github.io/perfect-antialiasing/dist/，以查看一組演示，其中顯示了此存儲庫中使用的各種技術。

跑步

1. 確保已安裝nodejs
2. 運行npm i以安裝依賴項
3. 運行npm start在Web應用中打開演示

路線圖

• CPU演示（畫布）
  • 立方/二次bezier tesselation
  • 多邊形的三角剖分路徑
  • 保守的柵欄
  • SVG測試
  • 細胞邏輯
  • 自定義字體渲染
• WebGl
  • 保守的柵格化（基於頂點遮陽的轉移）
  • 自定義字體渲染
  • 3D三角
  • 3D場景
  • 屏幕空間鑲嵌
  • 實例
  • 性能測試
• VULKAN
  • 通過幾何著色器的屏幕空間切割器
  • 使用GPU擴展的保守柵欄
  • 實例
  • 性能測試
• 進一步的實驗
  • 確切的曲線覆蓋分析
    • 二次bezier
    • 立方bezier（概率太複雜）

用法

• 遊戲中的抗氧化（需要評估碎片著色器中保守的柵格化和α計算的開銷）
• 字體渲染（仍然依賴三角剖分 - 使用鑲嵌著色器中的屏幕空間進行分辨率獨立渲染）

發展

安裝VS代碼和以下擴展名：

• VS代碼的EditorConfig
• eslint
• 更漂亮

參考

基於頂點的保守柵欄基於GPU寶石的算法2 2第43章（https://deverveper.nvidia.com/gpugems/gpugems/gpugems2/part-image-image-image-oriented-computing/COMPUTING/CHAPTER-COMPUTING/CHAPTER-42-CONServative-Rasterative））