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.
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 kernelUma pequena grade de pesos. Cada pixel de saída é a soma ponderada dos vizinhos, o que desfoca, aumenta a nitidez ou encontra bordas, conforme os pesos. Kernel Uma pequena grade de pesos. Cada pixel de saída é a soma ponderada dos vizinhos, o que desfoca, aumenta a nitidez ou encontra bordas, conforme os pesos. Texel Um elemento de uma textura, a versão do pixel numa textura. Uma amostra mistura texels próximos ou devolve o mais próximo.out = Σ weight(i, j) · texel(x + i, y + j)texel size = 1 / textureSize(sampler, 0)
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 × nleituras porn + n, ao custo de uma segunda passada e de um render targetUma textura em que um desenho escreve no lugar da tela, para uma passada seguinte ler o resultado. Blur, bloom e todo efeito com várias passadas usam isso.RenderizaçãoRender target
Uma textura em que um desenho escreve no lugar da tela, para uma passada seguinte ler o resultado. Blur, bloom e todo efeito com várias passadas usam isso.
Fontesentre 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-processamentoPassadas de tela cheia rodadas em ordem sobre o quadro pronto, cada uma lendo a imagem que a anterior escreveu. Bloom, tone mapping e correção de cor ficam aqui. Cadeia de pós-processamento Passadas de tela cheia rodadas em ordem sobre o quadro pronto, cada uma lendo a imagem que a anterior escreveu. Bloom, tone mapping e correção de cor ficam aqui.
Leitura complementar
- Mipmap (abre em uma nova aba)Referência
- Anisotropic filtering (abre em uma nova aba)Referência
- textureLod (abre em uma nova aba)Referência
- Kernel (image processing) (abre em uma nova aba)Referência
- Gaussian blur (abre em uma nova aba)Referência
- Sobel operator (abre em uma nova aba)Referência
- texture (abre em uma nova aba)Referência
- texelFetch (abre em uma nova aba)Referência
- Using textures in WebGL (abre em uma nova aba)Documentação
- Framebuffers (abre em uma nova aba)Artigo
- Bloom (abre em uma nova aba)Artigo
- Custom post-processing (abre em uma nova aba)Documentação
- glFramebufferTexture2D (abre em uma nova aba)Referência
- EXT_color_buffer_float extension (abre em uma nova aba)Documentação
- Efficient Gaussian blur with linear sampling (abre em uma nova aba)Artigo
- exp (abre em uma nova aba)Referência