UV warping

Como funciona

Um shader nunca move pixels. Ele decide, para cada pixel, onde olhar: qual ponto de um padrão desenhar, ou qual ponto de uma textura ler. O UV warping muda esse “onde”. Some um pequeno deslocamento à UV antes da leitura, faça o deslocamento ser diferente em cada pixel, e a imagem entorta.

vec2 warped = uv + offset(uv, time);
vec3 color = pattern(warped); // ou texture(image, warped).rgb

O fundamento de transformações 2D move o espaço inteiro por um único deslocamento. O warping é a mesma conta, com um deslocamento que varia pela superfície. Tudo no visual mora no deslocamento:

• Uma onda senoidal ao longo de um eixo dá uma ondulação que viaja: uma bandeira, um estandarte, linhas de água.
• Vários senos em frequências sem relação dão um tremor que não se repete de forma visível: calor, miragem, vidro.
• Ruído dá curvas orgânicas e imprevisíveis, e alimentar o ruído com ele mesmo é a distorção de domínio: fumaça, tinta, mármore.

Dois estágios, uma ideia

Numa superfície, a coordenada entortada alimenta um padrão procedural ou a própria textura do objeto. A Bandeira tremulando desenha as listras na UV entortada, então o tecido parece dobrar, embora o quad continue plano.

Como passada de pós-processamento de tela, a coordenada entortada lê o quadro pronto. A cena é desenhada primeiro num render target; depois uma passada de tela cheia o amostra em coordenadas deslocadas. O Ar quente faz isso perto do chão. É uma passada da cadeia de pós-processamento.

Num sprite, a mesma leitura pega a textura do sprite, para uma planta balançando ou uma bandeira num jogo 2D.

O que observar

• A intensidade está em unidades de UV. Um deslocamento de 0.01 move a leitura em 1% da superfície, o que numa tela de 1000 pixels dá 10 pixels. Uma distorção de tela já parece forte bem antes disso.
• Bordas. Uma leitura entortada perto da borda cai fora de 0..1. Uma textura com clamp repete o texel da borda, e uma com repeat dá a volta até o outro lado; escolha a que disfarça melhor, ou reduza o warping perto das bordas.
• Onde o deslocamento é zero, nada se move. Mascarar o deslocamento (por altura, distância ou uma textura) é como você mantém parado o mastro de uma bandeira ou limita o calor ao ar acima de uma fogueira.