perfect antialiasing

保守的なラスター化と分析領域の計算による抗拡張

「完璧な」アンチアリアシングで3D三角形をレンダリングするための新しい手法。フォントとベクトルは三角形に分割され、控えめにラスター化され、フラグメントシェーダーが各フラグメントのアルファを計算するために三角形の領域カバレッジを決定します。

プロセス

サブピクセルの精度でのベクトルグラフィックのGPUレンダリング：

1. 曲線を三角形に三角測量します
2. 保守的なラスター化を使用して各三角形をレンダリングします
3. 各フラグメントについて：
   1. 三角形/ボックスの交差点を実行し、ポリゴンを作成します
   2. ポリゴンの三角形の領域を合計します
   3. フラグメント領域で合計を分割して、パーセンテージカバレッジを与える
   4. すべての三角形を続け、加えてブレンドします

プレビュー

デモ

https://andrewlowndes.github.io/perfect-antialiasing/dist/にアクセスして、このレポで使用されているさまざまな手法を示すデモのセットを確認してください。

走る

1. nodejsがインストールされていることを確認してください
2. npm iを実行して依存関係をインストールします
3. npm start

ロードマップ

• CPUデモ（キャンバス）
  • 立方/二次皮肉のテッセレーション
  • ポリゴンへの三角測量
  • 保守的なラスター化
  • SVGテスト
  • セルロジック
  • カスタムフォントレンダリング
• webgl
  • 保守的なラスター化（頂点シェーダーベースのシフト）
  • カスタムフォントレンダリング
  • 3D三角形
  • 3Dシーン
  • スクリーンスペースのテッセレーション
  • インスタンス
  • パフォーマンステスト
• バルカン
  • ジオメトリシェーダーを介したスクリーン空間テッセレーション
  • GPU拡張機能を使用した保守的なラスター化
  • インスタンス
  • パフォーマンステスト
• さらなる実験
  • 正確な曲線カバレッジ分析
    • 二次bezier
    • 立方体ビジエ（あまりにも複雑すぎる）

使用法

• ゲームでのアンチエイリアス（保守的なラスター化のオーバーヘッドとフラグメントシェーダーのアルファ計算を評価する必要があります）
• フォントレンダリング（まだ三角測量に依存しています - 解像度の独立したレンダリングのためにテッセレーションシェーダーでスクリーンスペースを使用してください）

発達

コードと次の拡張機能をインストールします。

• VSコードのeditorConfig
• eslint
• きれい

参照

GPU GEMS 2のアルゴリズム2に基づく頂点ベースの保守的ラスター化2第43章（https://developer.nvidia.com/gpugems/gpugems2/part-v-image-oriented-computing/chapter-42-conservativativative-rasterization）