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

Nuvens e fumaça (2D)

Nuvens e fumaça ondulantes feitas de ruído fBm, curvadas por uma distorção de domínio, recortadas com um limiar suave e levadas pelo tempo.

UVTempoSuperfície2D / sprite

Cards

Um exemplo ao vivo para ajustar, aprender e copiar.

Como funciona

Nuvens, fumaça, vapor e poeira têm algo em comum: formas suaves com detalhes em todos os tamanhos, um grande tufo feito de tufos menores feitos de fiapos. É exatamente isso que o fBm produz, uma soma de oitavas de ruído em que cada camada tem metade do tamanho e metade da força da anterior. Todo shader de nuvem 2D é essa soma, transformada em forma e posta em movimento.

A receita tem quatro partes:

  1. Densidade. Um fBm da coordenada dá um valor suave em torno de 0,5 em todo lugar, mais alto onde as camadas coincidem.
  2. Forma. Um smoothstep em volta de um limiar transforma a densidade em cobertura: abaixo dele é céu limpo, acima é nuvem, e a largura do smoothstep define quão suaves são as bordas. Baixar o limiar acrescenta nuvens; subir deixa só alguns tufos espalhados.
  3. Movimento. Deslizar a coordenada com o tempo faz o vento. Sozinho, isso parece uma imagem sendo arrastada pela tela, então uma distorção de domínio que se move em outra velocidade faz as formas se revolverem e mudarem enquanto viajam.
  4. Cor. Um mix das cores da nuvem sobre o fundo pela cobertura, e um sombreamento pela densidade, para que os miolos espessos fiquem mais escuros que as bordas finas e iluminadas pelo sol.

As mesmas quatro partes fazem fumaça num sprite (uma máscara radial em vez de um céu, subindo em vez de derivar), bancos de neblina na parte de baixo da tela ou uma aurora, com a cobertura esticada em faixas. O que muda entre eles é o limiar, a direção do movimento e a paleta, não o ruído.

Até onde vai

Isto é uma imagem plana de nuvens: não há profundidade, nem luz atravessando, nem paralaxe quando a câmera se move. Para um céu atrás de um jogo 2D, uma textura de skybox ou um fundo barato, basta, e custa uma fração das nuvens volumétricas, que percorrem um raio dentro de um campo de densidade 3D e iluminam cada amostra.

Leitura complementar