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.
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 fBmUma soma de várias cópias de um ruído, cada uma com frequência maior e força menor que a anterior, para que o resultado tenha detalhes em vários tamanhos ao mesmo tempo, como nuvens, fumaça ou terreno. Movimento browniano fractal (fBm) Uma soma de várias cópias de um ruído, cada uma com frequência maior e força menor que a anterior, para que o resultado tenha detalhes em vários tamanhos ao mesmo tempo, como nuvens, fumaça ou terreno. Oitava Uma camada de ruído numa soma fractal. Cada oitava costuma ter o dobro da frequência e metade da amplitude da anterior, acrescentando detalhes mais finos e mais fracos. Ruído Uma função pseudoaleatória e suave da posição. Valores ou gradientes aleatórios ficam numa grade e são misturados entre os pontos, então pontos próximos recebem valores parecidos e o resultado não tem padrão visível.fbm(p) = Σ gainᵏ · noise(lacunarityᵏ · p) produz, uma soma de
oitavasUma camada de ruído numa soma fractal. Cada oitava costuma ter o dobro da frequência e metade da amplitude da anterior, acrescentando detalhes mais finos e mais fracos.fbm(p) = Σ gainᵏ · noise(lacunarityᵏ · p) de ruídoUma função pseudoaleatória e suave da posição. Valores ou gradientes aleatórios ficam numa grade e são misturados entre os pontos, então pontos próximos recebem valores parecidos e o resultado não tem padrão visível.
A receita tem quatro partes:
- Densidade. Um fBm da coordenada dá um valor suave em torno de 0,5 em todo lugar, mais alto onde as camadas coincidem.
- Forma. Um smoothstepUm limiar suave. Vale 0 abaixo da primeira borda, 1 acima da segunda e segue uma curva em S com as pontas planas entre elas.Fundamento
Smoothstep
Um limiar suave. Vale 0 abaixo da primeira borda, 1 acima da segunda e segue uma curva em S com as pontas planas entre elas.
t = clamp((x − e0) / (e1 − e0), 0, 1); s = t² (3 − 2t)Fontesem 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.- smoothstep (abre em uma nova aba)Referência
- Smoothstep (abre em uma nova aba)Referência
- 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ínioDeslocar as coordenadas que um padrão lê usando outro ruído, para que formas retas se curvem em redemoinhos e dobras sem que o resultado perca a suavidade.Fundamento · Ruído
Distorção de domínio
Deslocar as coordenadas que um padrão lê usando outro ruído, para que formas retas se curvem em redemoinhos e dobras sem que o resultado perca a suavidade.
n = fbm(p + k · vec2(fbm(p), fbm(p + offset)))que se move em outra velocidade faz as formas se revolverem e mudarem enquanto viajam. - Cor. Um mixMistura de a até b por um fator t, em linha reta. O GLSL chama de mix; o HLSL e a maioria dos editores de nós chamam de lerp.Fundamento
Interpolação linear (mix)
Mistura de a até b por um fator t, em linha reta. O GLSL chama de mix; o HLSL e a maioria dos editores de nós chamam de lerp.
mix(a, b, t) = a (1 − t) + b tFontesdas 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.- mix (abre em uma nova aba)Referência
- Linear interpolation (abre em uma nova aba)Referência
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
- Domain warping (abre em uma nova aba)Artigo
- Fractal Brownian Motion (abre em uma nova aba)Livro
- fBM (abre em uma nova aba)Artigo
- Fractional Brownian motion (abre em uma nova aba)Referência
- mix (abre em uma nova aba)Referência
- clamp (abre em uma nova aba)Referência
- Linear interpolation (abre em uma nova aba)Referência
- Uniforms (abre em uma nova aba)Livro
- Window: requestAnimationFrame() method (abre em uma nova aba)Documentação
- The OpenGL ES Shading Language, version 3.00 (abre em uma nova aba)Documentação
- Noise (abre em uma nova aba)Livro
- Value noise (abre em uma nova aba)Referência
- smoothstep (abre em uma nova aba)Referência
- NoiseTexture2D (abre em uma nova aba)Documentação
- FastNoiseLite (abre em uma nova aba)Documentação
- CanvasItem shaders (abre em uma nova aba)Documentação
- Shading language (abre em uma nova aba)Documentação