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））