Pular para o conteúdo
Lente · TécnicaIntermediário

Desfoque

Trocar cada pixel por uma média ponderada dos vizinhos, a peça básica do bloom, da profundidade de campo e do vidro fosco.

UVTelaTexturaTela / pósSuperfície

Cards

Um exemplo ao vivo para ajustar, aprender e copiar.

Como funciona

Um desfoque dá a cada pixel um pouco da cor dos vizinhos. Em termos de shader, é um kernel: ler os texels em volta do pixel, dar um peso a cada um e somar. Os pesos definem o visual. Pesos iguais dão um desfoque de caixa (box blur), que transforma detalhes claros e pequenos em quadrados; pesos que caem como uma curva de sino dão um desfoque gaussiano, que parece uma lente fora de foco.

A parte difícil é o custo, não a matemática. Cada amostra é uma leitura de textura, e um desfoque largo precisa de muitas. Três truques deixam isso viável, e a maioria dos desfoques de verdade usa os três:

  • Passadas separáveis. Um gaussiano num quadrado é igual a um desfoque nas linhas seguido de um desfoque nas colunas. Isso troca n × n leituras por n + n, ao custo de uma segunda passada e de um render target entre elas.
  • Imagens menores. Um desfoque numa cópia com metade do tamanho cobre o dobro do raio em pixels da original, sobre um quarto dos pixels. Bloom e profundidade de campo desfocam em meia resolução ou menos.
  • Leituras bilineares. Uma leitura posta entre dois texels devolve os dois, misturados pelo hardware, então um kernel de 9 amostras precisa de 5 leituras.

O desfoque roda em dois lugares. Sobre o quadro pronto, é uma passada de pós-processamento, que é o que o card daqui faz. Numa superfície, ele lê uma textura, do jeito que um vidro fosco desfoca o que está atrás dele ou um painel de interface desfoca a página embaixo.

Leitura complementar