perfect antialiasing

Antialiasing por meio de assalto conservador e computação de área analítica

Uma nova técnica para renderizar triângulos 3D com anti-aliasing 'perfeito'. Fontes e vetores são divididos em triângulos e rasterizados de forma conservadora, então um shader de fragmento determina a cobertura da área do triângulo para calcular o alfa para cada fragmento.

Processo

Renderização da GPU dos gráficos vetoriais com uma precisão de sub-pixel:

1. Triangular curvas em triângulos
2. Render
3. Para cada fragmento:
   1. Realize um cruzamento de triângulo/caixa, criando um polígono
   2. Soma as áreas dos triângulos no polígono
   3. Divida a soma pela área de fragmento para dar uma cobertura percentual
   4. Continue para todos os triângulos, misturando aditivamente

Visualização

Demos

Visite https://andrewlowndes.github.io/perfect-antialiasing/dist/ para ver um conjunto de demos mostrando as várias técnicas usadas neste repositório.

Correr

1. Verifique se os nodejs são instalados
2. Execute npm i para instalar dependências
3. Execute npm start a abrir as demos em um aplicativo da web

Roteiro

• Demo da CPU (tela)
  • Tseselation cúbica/quadrática de Bezier
  • Caminho triangular para polígonos
  • Rasterização conservadora
  • Teste SVG
  • Lógica celular
  • Renderização de fontes personalizadas
• Webgl
  • Rasterização conservadora (mudança baseada em vértice-shader)
  • Renderização de fontes personalizadas
  • Triângulo 3D
  • Cena 3D
  • Tesselation de espaço na tela
  • Instalação
  • Teste de desempenho
• Vulkan
  • Tesselation de espaço de tela via Shader de Geometria
  • Rasterização conservadora usando extensões de GPU
  • Instalação
  • Teste de desempenho
• Outras experiências
  • Análise de cobertura exata da curva
    • Bezier quadrático
    • Bezier cúbico (provavelmente complicado)

Usos

• Anti-Aliasing nos Jogos (precisam avaliar a sobrecarga da Rasterização Conservadora e a Computação Alpha no Shader Fragment)
• A renderização de fontes (ainda depende da triangulação - use espaço de tela no shader de teselation para renderização independente da resolução)

Desenvolvimento

Instale o código vs e as seguintes extensões:

• EditorConfig para o código VS
• Eslint
• Mais bonito

Referências

Rasterização conservadora baseada em vértice baseada no algoritmo 2 da GPU Gems 2 Capítulo 43 (https://developer.nvidia.com/gpugums/gpugums2/part-v-image-oriented-computing/chapter-42-conservative----trasterização)